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

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

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

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

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

Ответ 1

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

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

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

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

Удачи!

Ответ 2

Не уверен, что это то, что вам нужно, но вот пример щелчка с включенным 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>