Масштабируемый SVG с интерактивными областями - Android

Я делаю очень простое приложение. Нужно показать один SVG, содержащий обобщенную карту мира. Нажав на название города (прямоугольник SVG), мне нужно показать еще один SVG, который соответствует этому городу. Кроме того, все SVG должны поддерживать масштабирование и панорамирование.

Мне удалось заставить SVG поддерживать масштабирование и панорамирование, и это прекрасно работает. Для этого я использую библиотеку svg-android для рендеринга SVG и настраиваемый TouchImageView для панорамирования, масштабирования и захвата масштаба и сенсорных событий. Но, кажется, невозможно сделать кликабельные области на SVG в Android.

Я пытался грубой силой пересчитать положение моих интересных областей при каждом взаимодействии с пользователем (при касании или в масштабе) и при каждом щелчке по SVG проверять, содержат ли мои области (список прямоугольников) эту точку, и выполнять соответствующие действия.

Это не работает, потому что я не могу понять правило для расчета MotionEvent#getX/Y и подобные методы. Может быть, я мог бы добиться этого для фиксированной SVG, но для масштабирования, я действительно не могу.

Есть намеки? Это вообще возможно в Android?

1 ответ

Решение

Прежде всего, очень жаль за поздний ответ. Надеюсь, еще не поздно для всех:)

Я сделал репозиторий GitHub с примером кода (не с работающим приложением), поэтому, пожалуйста, используйте его!:)

Используйте 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);

Голоса приветствуются!:)

Другие вопросы по тегам