具有可点击区域的可缩放SVG-Android [英] Zoomable SVG with clickable areas - Android

问题描述

我正在做非常简单的申请.它需要显示一张包含SVG的广义世界地图.通过单击城市名称(svg矩形)，我需要显示另一个与该城市相对应的SVG.另外，所有SVG都必须支持缩放和平移.

我设法使SVG支持缩放和平移，并且效果很好.为此，我使用 svg-android 库来渲染SVG并自定义了 TouchImageView ，用于平移，缩放和捕获比例和触摸事件.但是，似乎不可能在Android的SVG上设置可点击区域.

我尝试使用蛮力，在每次用户交互(触摸或按比例)以及每次单击SVG时重新计算我感兴趣的区域的位置，以检查我的区域(矩形列表)是否包含该点，并执行相应的操作行动.

那是行不通的，因为我不理解计算MotionEvent#getX/Y的规则和类似方法.也许我可以用固定的SVG做到这一点，但要实现可缩放的效果，我真的做不到.

有任何提示吗?在Android中甚至有可能吗?

解决方案

首先，对于以后的回答深表歉意.希望对大家来说还不算太晚:)

我制作了带有代码示例的GitHub存储库(不适用于正在运行的应用)，请使用它！ :)

使用回购的自述文件了解一些详细信息.

核心解决方案:

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);

投票很感激！ :)

I'm making very simple application. It needs to show one SVG containing generalised world map. By clicking on city's name (svg rectangle), I need to show another SVG that corresponds to that city. Also, all SVGs must support zooming and panning.

I managed to make SVGs support zooming and panning and that works perfect. For that purpose, I'm using svg-android library for rendering SVGs and customized TouchImageView for panning, zooming and capturing scale and touch events. But, it seems to be impossible to make clickable regions on SVGs in Android.

I tried brute force, to recalculate position of my interesting areas on every user interaction (on touch or on scale) and on every click on the SVG to check if my areas (List of rectangles) contain that point, and perform corresponding action.

That doesn't work because I can't understand rule for calculating MotionEvent#getX/Y and similar methods. Maybe I could achieve this for fixed SVG but for zoomable, I really can't.

Any hints? Is this even possible in Android?

解决方案

First of all, really sorry for late answer. Hope it is not too late for everyone :)

I made a GitHub repo with code sample (not with working app), so please, use it! :)

Use repo's readme for some details.

Core solution:

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);

Votes are appreciated! :)

这篇关于具有可点击区域的可缩放SVG-Android的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！