Mappa immagine Android. - visualizzazione di un file .svg e utilizzo come mappa immagine (zone touch)

Question

Sto cercando un modo per visualizzare un'immagine e fare in modo che l'utente tocchi diverse parti dell'immagine per navigare ed eseguire azioni.

Stavo considerando l'utilizzo di un invisible color map per verificare quali parti sono state toccate.

Ma poiché voglio anche evidenziare le aree selezionate, stavo pensando di utilizzare i vettori. C'è una bella libreria per il rendering di file svg in una vista immagine here, ma non gestisce i tocchi.
C'è una libreria là fuori? O un modo più intelligente per farlo?

(Inoltre ho verificato this project ma non sarà ingoiare i file SVG e la mia immagine di vettore è troppo complessa per inserire tutti i dati a mano)

Answer 1

problema interessante! Non sono convinto che non puoi usare una combinazione delle librerie che hai menzionato.

Quello che vorrei fare è utilizzare SVG-Android per la lettura programmatica del file SVG. Guardando SVG-Android, sembra che restituisca il prodotto finale come PictureDrawable, che è una sottoclasse di Drawable.

Subito dopo che SVG-Android ha terminato l'elaborazione della grafica SVG, avrei utilizzato ImageView.setImageDrawable per caricare lo ImageView principale con lo PictureDrawable appena generato. Quindi utilizzerei semplicemente lo ImageView come base per l'implementazione di "Images with Clickable Areas" che hai collegato nella domanda originale.

Onestamente, penso che la parte più difficile sarà ottenere SVG-Android per funzionare correttamente (ho giocato un po 'con esso, ed è un po' schizzinoso). Tuttavia, non penso che avrai molte difficoltà a combinare il drawable generato da SVG con le aree cliccabili. È un semplice cambiamento nella fonte dell'immagine di base.

Buona fortuna!

Answer 2

Non sono sicuro se questo è il genere di cose si è dopo ma qui è un esempio di click abilitato SVG in una WebView Android:

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

dovrebbe mostrare un cerchio rosso che si può fare clic su e la dimensione del cerchio modifiche.

Ecco lo stesso esempio rielaborato con il file svg caricato dalla cartella delle risorse e un'interfaccia javascript Android esposta in modo da fare callback in codice Android dal tuo file SVG.

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

e il file 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>