Android圖像映射。 - 顯示.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生成的drawable與可點擊區域結合起來不會有太大困難。這是基礎圖像源的簡單改變。

祝你好運！

Answer 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接口暴露，你從你的SVG文件做回調到Android的代碼的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>