SVGImageView

In essence, I'm trying to layer multiple ImageViews (one of which is a floor plan, the other a rectangle) on top of each other while still allowing for pinch-zooming. The effect I'm going for is very similar to this post: http:/ /stackoverflow.com/questions/10482229/draw-rectangle-over-imageview-for-highlight-that-can-be-zoom-in-out-in-android?rq=1. However, I want the rectangle to appear at application startup (as opposed to when the user taps the screen) and to update its position over time.

One of my images is an SVG file of a floor plan. I'm using the AndroidSVG library (https:/ /code.google.com/p/androidsvg/) to render it to Android as an SVGImageView. My current implementation allows for pinch-zooming and panning of this SVG file (on application startup: http:/ /imgur.com/SceJuni; after pinch-zooming: http:/ /imgur.com/wL8anKd).

(Sorry for the space in the links; I don't have 10 reputation points so I can't post more than one link)

Now I need to overlay this SVGImageView with a rectangle to denote a location on this map. I want this rectangle to zoom in and out as the SVGImageView zooms in and out. I considered using the ScaleImageView class from this link (https:/ /github.com/matabii/scale-imageview-android) but now I am unsure how to proceed.

Here's the repo: https://github.com/mthai95/SVGApp

And heres what I have so far:

import android.app.Activity;
import android.graphics.*;
import android.os.Bundle;
import android.util.FloatMath;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import com.caverock.androidsvg.SVGImageView;

public void onCreate(Bundle savedInstanceBundle) {
    super.onCreate(savedInstanceState);
    LinearLayout layout = new LinearLayout(this);
    SVGImageView svgImageView = new SVGImageView(this);
    svgImageView.setImageAsset("w1a.svg");
    svgImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    svgImageView.setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            ... pinch-zoom and pan ...
        }
    });
    layout.addView(svgImageView,
            new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.MATCH_PARENT));
    setContentView(layout);
}

 

上图的svg为：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="140px" height="140px" viewBox="0 0 140 140" enable-background="new 0 0 140 140" xml:space="preserve">
<style type="text/css">
<![CDATA[
    .strokeColor{fill:#DB3E38;}　　　　　　//样式
]]>
</style>
<g>
    <path class="strokeColor" d="M128.877,63.448c0.281,2.34,0.441,4.715,0.441,7.129c0,32.614-26.375,59.053-58.907,59.053
        c-32.534,0-58.908-26.438-58.908-59.053s26.374-59.052,58.908-59.052c18.292,0,34.637,8.358,45.44,21.472
        c2.896-0.342,6.056-1.781,6.443-6.324C109.839,11.895,91.225,2.5,70.411,2.5C32.904,2.5,2.5,32.979,2.5,70.577
        c0,37.599,30.404,68.077,67.911,68.077c37.506,0,67.911-30.479,67.911-68.077c0-2.656-0.168-5.273-0.465-7.852
        C135.914,61.223,132.539,59.778,128.877,63.448z"/>　　　　　　　　　　　　　　　　　　//环形的线
    <rect x="41.911" y="65.911" class="strokeColor" width="58.667" height="7.666"/>     //横着的线
    <rect x="67.411" y="40.411" class="strokeColor" width="7.667" height="58.667"/>     //竖着的线
</g>
</svg>

 由于绘制路径的复杂性，因此强烈建议您使用 SVG 编辑器来创建复杂的图形。