安卓图像映射。 - 显示 .svg 并将其用作图像映射（触摸区）

Question

我正在寻找一种方法来显示图像并让用户点击图像的不同部分来导航和执行操作。

我正在考虑使用invisible color map 来检查哪些部分被触摸了。

但由于我也想突出显示选定的区域，所以我正在考虑使用矢量。 有一个不错的库可以将 svg 文件渲染到图像视图 here，但它不处理触摸。
那里有图书馆吗？或者有什么更聪明的方法？

（我还查看了this project，但它不会吞下 .svg 文件，而且我的矢量图太复杂，无法手动插入所有数据）

Answer 1

有趣的问题！我不相信你不能使用你提到的库的组合。

我要做的是首先使用 SVG-Android 以编程方式读取您的 SVG 文件。查看 SVG-Android，看起来它以 PictureDrawable 的形式返回最终产品，它是 Drawable 的子类。

在 SVG-Android 处理完 SVG 图形之后，我会使用 ImageView.setImageDrawable 来加载主 ImageView 和我们刚刚生成的 PictureDrawable。然后，我将使用 ImageView 作为您在原始问题中链接的 "Images with Clickable Areas" 实现的基础。

老实说，我认为最难的部分是让 SVG-Android 正常工作（我已经玩过它了，它有点挑剔）。但是，我认为将 SVG 生成的可绘制对象与可点击区域结合起来不会有太大困难。这是对基础图像来源的简单更改。

祝你好运！

Answer 2

不确定这是否是您所追求的，但这是一个在 Android WebView 中启用点击的 svg 示例：

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

它应该显示一个红色圆圈，您可以单击该圆圈并且该圆圈会改变大小。

这是从资产文件夹加载的 svg 和暴露的 android javascript 接口重新处理的相同示例，因此您可以从 svg 文件回调到 android 代码。

  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>

Answer 3

非常非常简单;-)

您必须创建一个 javascript 界面来处理来自 Web 视图的点击并将此文件添加到您的 Web 视图中。只需流动步骤：

1) 创建 JavaScript 接口

public class WebViewInterface {
    @JavascriptInterface
    public void showDetail(String content) {
        Toast.makeText(getActivity(), content, Toast.LENGTH_SHORT).show();
    }
}

2) 为网页视图添加界面

WebView webView = findViewById(R.id.web_view);
webView.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new WebViewInterface(), "Android");

3) 编辑与此相同的 svg 文件

<?xml version="1.0" standalone="no"?>
<svg width="10cm" height="10cm" viewBox="0 0 600 500"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
    <desc>Sample SVG</desc>
    <script type="application/ecmascript"> <![CDATA[
    function section_click(evt) {
        Android.showDetail("OnClick: " + evt.id);
    }
  ]]> </script>

    <rect id="rect" onclick="section_click(this)" x="1" y="1" width="598" height="498" fill="none" stroke="blue"/>

    <circle id="circle" onclick="section_click(this)" cx="300" cy="225" r="100"
        fill="red"/>

    <text id="text" onclick="section_click(this)" x="300" y="480"
        font-family="Verdana" font-size="35" text-anchor="middle">
        Click on each element
    </text>
</svg>