एंड्रॉइड छवि मानचित्र। - एक .svg प्रदर्शित करना और इसे एक छवि मानचित्र (स्पर्श क्षेत्र) के रूप में उपयोग करना

Question

मैं एक छवि प्रदर्शित करने का तरीका ढूंढ रहा हूं और उपयोगकर्ता ने नेविगेट करने और क्रियाओं को करने के लिए छवि के विभिन्न हिस्सों पर टैप कर रहा हूं।

मैं यह देखने के लिए कि कौन से हिस्सों को छुआ गया है, invisible color map का उपयोग करने पर विचार कर रहा था।

लेकिन चूंकि मैं चयनित क्षेत्रों को हाइलाइट करना चाहता हूं, इसलिए मैं वैक्टर का उपयोग करने की सोच रहा था। एसवीजी फ़ाइलों को छवि दृश्य here में प्रस्तुत करने के लिए एक अच्छी लाइब्रेरी है, लेकिन यह स्पर्श को संभाल नहीं पाती है।
क्या वहां कोई पुस्तकालय है जो करता है? या ऐसा करने का कोई स्मार्ट तरीका?

(मैं यह भी this project जाँच की लेकिन यह .svg फ़ाइलों को निगल नहीं है और मेरी वेक्टर छवि हाथ से सभी डेटा को सम्मिलित करने के लिए अब तक बहुत जटिल है)

Answer 1

दिलचस्प बात नहीं! मुझे विश्वास नहीं है कि आप जिन पुस्तकालयों का उल्लेख करते हैं, उनके संयोजन का उपयोग नहीं कर सकते हैं।

मैं सबसे पहले एसवीजी-एंड्रॉइड का उपयोग अपने एसवीजी फ़ाइल में प्रोग्रामेटिक रूप से पढ़ने के लिए करता हूं। एसवीजी-एंड्रॉइड को देखते हुए, ऐसा लगता है कि यह अंतिम उत्पाद को PictureDrawable के रूप में देता है, जो ड्रायबल का उप-वर्ग है।

ठीक बाद एसवीजी एंड्रॉयड एसवीजी ग्राफिक्स संसाधित होना समाप्त, मैं ImageView.setImageDrawable प्रयोग करेंगे PictureDrawable हम सिर्फ उत्पन्न के साथ मुख्य ImageView लोड करने के लिए। तो मैं मूल प्रश्न में जुड़े "Images with Clickable Areas" के कार्यान्वयन के लिए आधार के रूप में उस ImageView का उपयोग करता हूं।

ईमानदारी से, मुझे लगता है कि सबसे कठिन हिस्सा एसवीजी-एंड्रॉइड को सही तरीके से काम करने के लिए मिल रहा है (मैंने इसे थोड़ा सा खेला है, और यह थोड़ा सा मुश्किल है)। हालांकि, मुझे नहीं लगता कि आपको क्लिक करने योग्य क्षेत्रों के साथ एसवीजी-जेनरेटेड ड्रॉबल के संयोजन में बहुत कठिनाई होगी। यह मूल छवि के स्रोत में एक साधारण परिवर्तन है।

शुभकामनाएं!

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 फ़ाइल से एंड्रॉइड कोड में कॉलबैक कर सकें।

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>