안드로이드 이미지 맵. - .svg를 표시하고 (터치 존)

Question

나는 이미지를 표시하고 탐색하고 작업을 수행 할 수있는 이미지의 다른 부분에서 사용자 탭을 할 수있는 방법을 찾고 있는데요 이미지 맵으로 사용.

터치 한 부분을 확인하기 위해 invisible color map을 사용하는 것이 좋습니다. 나는 또한 선택 영역을 강조하려는 때문에

하지만, 난 벡터를 사용하여 생각했다. svg 파일을 이미지보기 here에 렌더링하는 멋진 라이브러리가 있지만 감동을 처리하지 못합니다.
밖에있는 라이브러리가 있습니까? 아니면 이렇게하는 더 똑똑한 방법?

는 (나는 또한 밖으로 this project 확인하지만 파일을 .svg 삼키지하고 내 벡터 이미지는 손으로 모든 데이터를 삽입하는 데 너무 복잡)

Answer 1

재미있는 문제! 내가 언급 한 도서관의 조합을 사용할 수 없다고 확신하지는 않습니다. 내가 할 것이 무엇

는 프로그래밍 방식 SVG 파일에서 읽을 처음 사용 SVG-안드로이드입니다. SVG-Android를 보면 최종 제품이 Drawable의 하위 클래스 인 PictureDrawable으로 반환됩니다.

SVG 그래픽 처리 완료 직후 ImageView.setImageDrawable을 사용하여 방금 생성 한 PictureDrawable으로 ImageView을로드 할 수 있습니다. 그럼 난 원래의 질문에 연결된 "Images with Clickable Areas" 구현의 기초로 그 ImageView을 사용하고 싶습니다.

은 솔직히 가장 어려운 부분은 SVG-안드로이드가 제대로 작동하려면 받고있을 것이라고 생각 (나는 그것으로 조금 해본 적이, 그리고 조금 까다로운이다). 그러나 SVG 생성 드로어 블과 클릭 가능한 영역을 결합하는 데 많은 어려움이 없을 것이라고 생각합니다. 이는 기본 이미지의 소스를 간단히 변경 한 것입니다.

행운을 빈다.

Answer 2

이 당신이 물건의 종류가 확실하지를 후 그러나 여기하는 것은 안드로이드 웹보기에서 클릭 활성화 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 파일에서 안드로이드 코드로 콜백을 할 수 있도록 노출 자바 스크립트 인터페이스 안드로이드와 재 작업 같은 예이다.

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>