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

Question

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

我正在考虑使用不可见的颜色图来检查已触摸的部分。

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

（我也检查了这个项目，但它不会吞下 .svg 文件，而且我的矢量图太复杂，无法手动插入所有数据）

Answer 1

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

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

在 SVG-Android 处理完 SVG 图形之后，我会使用ImageView.setImageDrawable来加载我们刚刚生成ImageView的main。PictureDrawable然后，我将使用它ImageView作为实现您在原始问题中链接的“带有可点击区域的图像”的基础。

老实说，我认为最难的部分是让 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>