Androidイメージマップ。 - .svgを表示してイメージマップとして使用する（タッチゾーン）

Question

私は画像を表示したり、ユーザが画像の異なる部分をタップして操作したり、操作を行う方法を模索しています。

私はinvisible color mapを使用してどのパーツに触れているかを確認することを検討していました。

しかし、私も選択した領域を強調したいので、私はベクトルを使うことを考えていました。 svgファイルを画像ビューhereにレンダリングするための素晴らしいライブラリがありますが、それは触れません。
そこにはライブラリがありますか？これを行うにはどんなスマートな方法ですか？

（私もthis projectをチェックアウトしたが、それは.SVGファイルを飲み込むませんし、私のベクトル画像が手ですべてのデータを挿入するにはあまりにも複雑である）

Answer 1

興味深い問題！私はあなたが言及した図書館の組み合わせを使用できないと確信していません。

最初にSVG-Androidを使用してSVGファイルをプログラムで読み込みます。 SVG-Androidを見ると、最終製品がDrawableのサブクラスであるPictureDrawableとして返されるようです。

SVG-Graphicsの処理がSVGグラフィックスの処理を終えた直後に、ImageView.setImageDrawableを使用して、ちょうど生成したPictureDrawableでメインImageViewをロードします。それから私はちょうどその元の質問にリンクした"Images with Clickable Areas"の実装のためのベースとしてその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と、あなたのSVGファイルからアンドロイドのコードにコールバックを行うためのインターフェースが露出javascriptのアンドロイドで作り直さ同じ例です。

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>