Карта изображений Android. – отображение .svg и использование его в качестве карты изображения (сенсорные зоны)

Я ищу способ отображения изображения и пользователь нажимает на разные части изображения для навигации и выполнения действий.

Я рассматривал возможность использования невидимой цветовой карты, чтобы проверить, какие части были затронуты.

Но поскольку я также хочу выделить выделенные области, я думал об использовании векторов. Существует хорошая библиотека для рендеринга svg-файлов в виде изображения здесь , но она не обрабатывает штрихи.
Есть ли там библиотека? Или любой более умный способ сделать это?

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

Solutions Collecting From Web of "Карта изображений Android. – отображение .svg и использование его в качестве карты изображения (сенсорные зоны)"

Интересная проблема! Я не уверен, что вы не можете использовать комбинацию упомянутых вами библиотек.

Что я буду делать, это сначала использовать SVG-Android для программного чтения в вашем SVG-файле. Глядя на SVG-Android, похоже, что он возвращает конечный продукт как PictureDrawable , который является подклассом Drawable.

Сразу после того, как SVG-Android закончит обработку графики SVG, я бы использовал ImageView.setImageDrawable для загрузки основного ImageView с помощью только что созданного PictureDrawable . Тогда я просто использовал бы этот ImageView в качестве основы для реализации «Изображений с кликабельными областями», которые вы связали в исходном вопросе.

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

Удачи!

Не уверен, что это то, что вам нужно, но вот пример щелчка с включенным svg в Android WebView:

 WebView webView = (WebView) findViewById(R.id.webView1); webView.getSettings().setJavaScriptEnabled(true); webView.loadUrl("http://www.w3.org/TR/SVG/images/script/script01.svg"); 

Он должен отображать красный круг, который вы можете щелкнуть, и круг изменит размер.

Вот тот же пример, переработанный с помощью svg, загруженного из папки с ресурсами, и интерфейса javascript для Android, так что вы вызываете обратные вызовы в код Android из вашего svg-файла.

  WebView webView; public class WebAppInterface { /** Show a toast from svg */ @JavascriptInterface public void showToast(String toast) { Toast.makeText(MainActivity.this, toast, Toast.LENGTH_SHORT).show(); } } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView = (WebView) findViewById(R.id.webView1); webView.getSettings().setJavaScriptEnabled(true); webView.addJavascriptInterface(new WebAppInterface(), "Android"); String svg = loadSvg(); webView.loadData(svg, "image/svg+xml", "utf-8"); } String loadSvg() { try { BufferedReader input = new BufferedReader(new InputStreamReader( getAssets().open("test.svg"))); StringBuffer buf = new StringBuffer(); String s = null; while ((s = input.readLine()) != null) { buf.append(s); buf.append('\n'); } input.close(); return buf.toString(); } catch (IOException ex) { ex.printStackTrace(); } return null; } 

И файл test.svg:

 <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="6cm" height="5cm" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>Example script01 - invoke an ECMAScript function from an onclick event </desc> <!-- ECMAScript to change the radius with each click --> <script type="application/ecmascript"> <![CDATA[ function circle_click(evt) { Android.showToast("Hello from SVG"); var circle = evt.target; var currentRadius = circle.getAttribute("r"); if (currentRadius == 100) circle.setAttribute("r", currentRadius*2); else circle.setAttribute("r", currentRadius*0.5); } ]]> </script> <!-- Outline the drawing area with a blue line --> <rect x="1" y="1" width="598" height="498" fill="none" stroke="blue"/> <!-- Act on each click event --> <circle onclick="circle_click(evt)" cx="300" cy="225" r="100" fill="red"/> <text x="300" y="480" font-family="Verdana" font-size="35" text-anchor="middle"> Click on circle to change its size </text> </svg>