Android görüntü haritası. - bir .svg görüntülenmesi ve bir görüntü haritası olarak kullanılması (dokunmatik bölgeler)

Question

Bir görüntüyü görüntülemenin ve kullanıcının hareketlerin farklı bölümlerinde gezinmesini ve gerçekleştirmesini sağlamak için bir yol arıyorum.

Hangi parçalara dokunulduğunu kontrol etmek için invisible color map kullanmayı düşünmekteyim.

Ayrıca seçilen alanları vurgulamak istediğim için vektörleri kullanmayı düşünüyordum. svg dosyalarını bir görüntü görüntüsü here içine işlemek için güzel bir kütüphane var, ancak dokunma işlemez.
Orada bir kütüphane var mı? Veya bunu yapmanın daha akıllı bir yolu?

(Ben de dışarı this project kontrol ama dosyaları .svg yutmak olmaz ve benim vektör görüntü elle tüm verileri eklemek için çok karmaşık)

Answer 1

İlginç sorun! Bahsettiğin kütüphanelerin bir bileşimini kullanamayacağına ikna olmadım.

İlk olarak SVG-Android'inizi SVG dosyanızda programsal olarak okumak için kullanın. SVG-Android'e baktığımızda, son ürünü bir Çizim Çizelgesi alt sınıfı olan PictureDrawable olarak döndürüyor gibi görünüyor.

Sağ SVG-Android SVG grafikleri işleme bittikten sonra, biraz önce oluşturulan PictureDrawable ana ImageView yüklemek için ImageView.setImageDrawable kullanmayı tercih ediyorum. O zaman sadece ImageView'u orijinal soruya bağladığınız "Images with Clickable Areas"'un uygulaması için kullanacağım.

Dürüst olmak gerekirse, en zor kısmı SVG-Android'in doğru şekilde çalışacağını düşünüyorum (biraz oynamışım ve biraz titiz davranıyorum). Bununla birlikte, SVG tarafından oluşturulmuş çekilebilir bölümleri tıklanabilir alanlarla birleştirmenin çok zor olacağını düşünmüyorum. Baz görüntünün kaynağında basit bir değişiklik.

İyi şanslar!

Answer 2

bu sen türden bir şey olup olmadığından emin değil sonra ama burada bir Android WebView'da tıklama etkin svg bir örnektir:

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

size tıklayabilir kırmızı bir daire ve daire değişiklikleri boyutunu göstermesi gerekir.

İşte varlıklar klasöründen yüklenen svg'ait ve size svg dosyadan android koduna geri aramalar yapmak böylece maruz javascript arayüzü android ile yeniden aynı örnektir.

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; 
    } 

ve test.svg dosyası:

<?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>