Android图片地图. - 显示.svg并将其用作图像映射(触摸区域)

Question

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

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

但由于我也想强调所选区域,我正在考虑使用矢量.有一个很好的库来渲染SVG文件转换成图像视图在这里,但它不处理的一面.
那里有图书馆吗？或者更聪明的方式吗？

(我也检查了这个项目,但它不会吞下.svg文件,我的矢量图像太复杂了,无法手工插入所有数据)

Answer 1

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

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

紧接着SVG-的Android处理完SVG图形,我会使用ImageView.setImageDrawable加载主ImageView与PictureDrawable我们刚刚生成的.然后我只是用它ImageView作为你在原始问题中链接的"带有可点击区域的图像"的实现的基础.

老实说,我认为最困难的部分是让SVG-Android正常工作(我玩了一下,它有点挑剔).但是,我认为将SVG生成的drawable与可点击区域相结合并不会有太大困难.这是对基本图像源的简单改变.

祝好运!

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>