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 编辑器来创建复杂的图形。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步