可缩放的SVG图像与可点击区域 - 安卓

Question

我正在制作一个非常简单的应用程序。它需要显示一个包含概括世界地图的SVG。通过点击城市名称（svg矩形），我需要显示与该城市对应的另一个SVG。此外，所有SVG都必须支持缩放和平移。

我成功地使SVG支持缩放和平移，并且这完美地运作。为此，我使用svg-android库来渲染SVG，并使用定制的TouchImageView进行平移、缩放和捕获比例和触摸事件。但是，在Android上似乎无法在SVG上创建可点击区域。

我尝试过粗暴的方式，在每次用户交互（触摸或缩放）和每次单击SVG时重新计算我的有趣区域的位置（矩形列表），并检查我的区域是否包含该点，并执行相应的操作。

这不起作用，因为我无法理解计算MotionEvent#getX/Y和类似方法的规则。也许我可以为固定的SVG实现这一点，但是对于可缩放的SVG，我真的做不到。

有什么提示吗？在Android上是否可能实现这一点？

- Aleksandar

---

你好，你能否简单介绍一下你用了哪些工具使其运作起来？ - Pavel

@Aleksandar，你是否成功地写了一篇关于这个的文章？ - Nicolas

@Aleksandar，你能否分享一下你使用的工具以及你所取得的成果的一些笔记？ - Hélène Martin

Answer 1

首先，非常抱歉回答晚了。希望对大家来说不会太晚 :)

我创建了一个GitHub代码示例repo（没有工作应用程序），请使用它！:)

请查看repo的readme获取一些详细信息。

核心解决方案：

SVG svg = SVGParser.getSVGFromResource(getResources(), R.raw.world_map);

// Get image view (this is our SVG map that is going to be clickable and zoomable):
ImageView touchImageView = (ImageView) view.findViewById(R.id.touchImageView);

// Create drawable (will convert svg to drawable so we can set it to image view as a bitmap):
PictureDrawable image = svg.createPictureDrawable();
Bitmap b = drawableToBitmap(image); // refer to WorldMapFragment for source code of the converting method 
touchImageView.setImageBitmap(b);

// Create image with clickable areas from previous image view and set listener to id (listener of type OnClickableAreaClickedListener created in onAttach callback):
ClickableAreasImage clickableAreasImage = new ClickableAreasImage(new PhotoViewAttacher(touchImageView), listener);

// Define your clickable areas
// parameter values (pixels): (x coordinate, y coordinate, width, h eight) and assign an object to it
List<ClickableArea> clickableAreas = new ArrayList<>();
Map<String, FintemCity> cities = svg.getCities();
for (String key : cities.keySet()){
  clickableAreas.add(cities.get(key).toClickableArea(getMetrics()));
}

// Set your clickable areas to the image
clickableAreasImage.setClickableAreas(clickableAreas);

非常感谢您的投票！:)

- Aleksandar

---

如果您为您的源代码创建一个库，那将是非常棒的。 - Jasurbek

@Aleksandar 如果您将map.xml添加到存储库中，那将非常好，因为它可以帮助更好地理解流程。 - Pankaj Kumar