我正在使用Android上的SVG文件。 Android Studio将SVG文件转换为包含矢量和路径元素的XML文件。 XML文件可以有多个" path"元素。问题从这里开始。我想为每个路径元素提供单独点击的功能,而无需使用webview。 (javascript的原因是冒险!)有没有办法做到这一点?
我无法使用点击的像素颜色。因为它们变化很大。 我可以将每个路径元素分成不同的XML文件。但是这条路也记住了它们的位置。当我想将每个XML文件添加到FrameLayout时,他们将矩形边缘扩展到手机边缘。即使他们在width和height属性中有wrap_content ..所以onClick事件被阻止了。 onClick事件只有一个。您可以检查照片中的蓝色边缘。每个图像视图的蓝色边缘相同:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/path_one" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/path_two" />
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="@drawable/path_three" />
</FrameLayout>
path_one:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="800dp"
android:height="340dp"
android:viewportHeight="340"
android:viewportWidth="800">
<path
android:fillAlpha="1"
android:fillColor="#da241c"
android:pathData="M52.39,44.01L54.63,41.94L57.68,42.54L64.66,41.57L66.41,42.87L67.51,45.88L72.34,49.65L75.51,48.5L78.38,45.54L80.04,39.15L82.2,37.29L88.55,34.96L92.09,34.57L100.5,29.58L100.87,28.25L102.52,28.39L102.52,28.39L103.01,29L103.01,29L99.86,44.65L97.47,48.72L97.49,51.15L95.74,54.66L95.58,57.53L96.47,59.49L96.47,59.49L94.92,62.8L91.57,62.71L86.49,60.02L76.48,62.25L74.69,65.68L74.09,69.27L69.49,73.59L67.58,77.44L62.61,81.12L57.04,82.69L54.94,84.99L52.22,85.67L52.22,85.67L52.17,82.72L55.49,74.92L52.38,73.87L46.42,74.15L46.42,74.15L42.46,68.99L43.56,60.73L41.5,58.83L42.36,57.78L46.69,57.12L50.78,53.06L53.17,48.89z"
android:strokeAlpha="1"
android:strokeColor="#FFFFFF"
android:strokeWidth="0.5" />
</vector>
path_two:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="800dp"
android:height="340dp"
android:viewportHeight="340"
android:viewportWidth="800">
<path
android:fillAlpha="1"
android:fillColor="#da241c"
android:pathData="M65.51,0.31L67.29,0.43L69.07,2.54L70.31,2.65L71.46,5.52L74.69,8.09L76.36,8.08L78.5,11.11L79.06,9.29L80.72,9.11L81.02,8.09L83.07,8.3L84.16,7.07L89.81,8.73L89.13,6.6L90.46,5.69L90.65,6.31L90.81,5.52L92.95,7.36L95.64,6.4L97.64,6.94L98.86,12.3L96.42,12.11L95.82,15.36L98.39,21.01L100.86,24.08L100.16,24.76L100.66,26.19L102.52,28.39L102.52,28.39L100.87,28.25L100.5,29.58L92.09,34.57L88.55,34.96L82.2,37.29L80.04,39.15L78.38,45.54L75.51,48.5L72.34,49.65L67.51,45.88L66.41,42.87L64.66,41.57L57.68,42.54L54.63,41.94L52.39,44.01L52.39,44.01L51.05,42.86L52.28,40.45L51.14,36.11L53.41,32.2L53.03,30.73L55.21,27.9L54.06,26.81L52.37,28.67L51.38,27.75L53.83,24.46L53.44,21.65L54.99,18.26L53.52,15.1L53.8,5.66L53.8,5.66L54.44,3.71L56.24,2.68L56.19,1.3L58.01,0.66L63.53,2.51L63.5,1.29z"
android:strokeAlpha="1"
android:strokeColor="#FFFFFF"
android:strokeWidth="0.5" />
</vector>
path_three:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="800dp"
android:height="340dp"
android:viewportHeight="340"
android:viewportWidth="800">
<path
android:fillAlpha="1"
android:fillColor="#ea912d"
android:pathData="M149.16,48.24l13.17,3.21l0.97,-0.56l9.4,2.24l3.93,-0.05l0,0l0.09,2.6l-2.37,3.93l-1.63,0.55l-4.18,-0.92l-2.36,3.82l-3.88,-1l-3.13,0.58l-7.01,8.76l0,0l-1.03,-0.72l-2.56,0.6l1.22,-2.52l-5.9,-2.58l-1.44,-2.14L138.81,62l-0.64,-2.35l1.87,-1.48l0.64,-2.98l1.15,-0.78L140.88,53l0.69,-1.95l3.24,-2.5L149.16,48.24zM103.83,29.47l3.97,4.12l14.47,7.7l2.63,0.46l11.03,5.02l5.3,0.2l1.37,0.79l-0.02,1.47l-3.03,3.02l1.39,1.77l-3.64,6.48l-5.6,1.74l-0.73,0.96l-2.9,-1.3l-5.83,1.08l-1.03,-0.66l-0.32,-2.42l-0.93,-0.04l-1,1.8l-5.09,-3.12l-7.7,-1.98l-6.57,1.16l-3.11,1.77l0,0l-0.9,-1.97l0.17,-2.87l1.74,-3.51l-0.02,-2.43l2.39,-4.07L103.01,29l0,0L103.83,29.47z"
android:strokeAlpha="1"
android:strokeColor="#FFFFFF"
android:strokeWidth="0.5" />
</vector>
所有这些在一起:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="800dp"
android:height="340dp"
android:viewportHeight="340"
android:viewportWidth="800">
<path
android:fillAlpha="1"
android:fillColor="#da241c"
android:pathData="M52.39,44.01L54.63,41.94L57.68,42.54L64.66,41.57L66.41,42.87L67.51,45.88L72.34,49.65L75.51,48.5L78.38,45.54L80.04,39.15L82.2,37.29L88.55,34.96L92.09,34.57L100.5,29.58L100.87,28.25L102.52,28.39L102.52,28.39L103.01,29L103.01,29L99.86,44.65L97.47,48.72L97.49,51.15L95.74,54.66L95.58,57.53L96.47,59.49L96.47,59.49L94.92,62.8L91.57,62.71L86.49,60.02L76.48,62.25L74.69,65.68L74.09,69.27L69.49,73.59L67.58,77.44L62.61,81.12L57.04,82.69L54.94,84.99L52.22,85.67L52.22,85.67L52.17,82.72L55.49,74.92L52.38,73.87L46.42,74.15L46.42,74.15L42.46,68.99L43.56,60.73L41.5,58.83L42.36,57.78L46.69,57.12L50.78,53.06L53.17,48.89z"
android:strokeAlpha="1"
android:strokeColor="#FFFFFF"
android:strokeWidth="0.5" />
<path
android:fillAlpha="1"
android:fillColor="#da241c"
android:pathData="M65.51,0.31L67.29,0.43L69.07,2.54L70.31,2.65L71.46,5.52L74.69,8.09L76.36,8.08L78.5,11.11L79.06,9.29L80.72,9.11L81.02,8.09L83.07,8.3L84.16,7.07L89.81,8.73L89.13,6.6L90.46,5.69L90.65,6.31L90.81,5.52L92.95,7.36L95.64,6.4L97.64,6.94L98.86,12.3L96.42,12.11L95.82,15.36L98.39,21.01L100.86,24.08L100.16,24.76L100.66,26.19L102.52,28.39L102.52,28.39L100.87,28.25L100.5,29.58L92.09,34.57L88.55,34.96L82.2,37.29L80.04,39.15L78.38,45.54L75.51,48.5L72.34,49.65L67.51,45.88L66.41,42.87L64.66,41.57L57.68,42.54L54.63,41.94L52.39,44.01L52.39,44.01L51.05,42.86L52.28,40.45L51.14,36.11L53.41,32.2L53.03,30.73L55.21,27.9L54.06,26.81L52.37,28.67L51.38,27.75L53.83,24.46L53.44,21.65L54.99,18.26L53.52,15.1L53.8,5.66L53.8,5.66L54.44,3.71L56.24,2.68L56.19,1.3L58.01,0.66L63.53,2.51L63.5,1.29z"
android:strokeAlpha="1"
android:strokeColor="#FFFFFF"
android:strokeWidth="0.5" />
<path
android:fillAlpha="1"
android:fillColor="#ea912d"
android:pathData="M149.16,48.24l13.17,3.21l0.97,-0.56l9.4,2.24l3.93,-0.05l0,0l0.09,2.6l-2.37,3.93l-1.63,0.55l-4.18,-0.92l-2.36,3.82l-3.88,-1l-3.13,0.58l-7.01,8.76l0,0l-1.03,-0.72l-2.56,0.6l1.22,-2.52l-5.9,-2.58l-1.44,-2.14L138.81,62l-0.64,-2.35l1.87,-1.48l0.64,-2.98l1.15,-0.78L140.88,53l0.69,-1.95l3.24,-2.5L149.16,48.24zM103.83,29.47l3.97,4.12l14.47,7.7l2.63,0.46l11.03,5.02l5.3,0.2l1.37,0.79l-0.02,1.47l-3.03,3.02l1.39,1.77l-3.64,6.48l-5.6,1.74l-0.73,0.96l-2.9,-1.3l-5.83,1.08l-1.03,-0.66l-0.32,-2.42l-0.93,-0.04l-1,1.8l-5.09,-3.12l-7.7,-1.98l-6.57,1.16l-3.11,1.77l0,0l-0.9,-1.97l0.17,-2.87l1.74,-3.51l-0.02,-2.43l2.39,-4.07L103.01,29l0,0L103.83,29.47z"
android:strokeAlpha="1"
android:strokeColor="#FFFFFF"
android:strokeWidth="0.5" />
</vector>
答案 0 :(得分:2)
您可以使用RichPath库,它具有集成的OnClickListener,该库传递被单击的路径元素。 GitHub链接:https://github.com/tarek360/RichPath
将SVG定义为VectorDrawable并将其添加到XML
<com.richpath.RichPathView
android:id="@+id/ic_notifications"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:vector="@drawable/ic_notifications" />
并在代码中设置setOnPathClickListener:
richPathView.setOnPathClickListener(new RichPath.OnPathClickListener() {
@Override
public void onClick(RichPath richPath) {
if (richPath.getName().equals("path_name")) {
//TODO do an action when a specific path is clicked.
}
}
});
答案 1 :(得分:0)
据我所知,使用VectorDrawables无法达到你想要的效果。我想你可能不得不将SVG加载到WebView中。
但是,您不必使用任何JavaScript。 WebView小部件有一种拦截链接请求的方法。请参阅WebView文档中的Handling Page Navigation。
您只需要使用<path>
链接元素包围<a>
个元素。
<svg ...etc...>
<a xlink:href="SOME_URL">
<path d="..."/>
</a>
....
</svg>
然后在shouldOverrideUrlLoading()
方法中拦截&#34; SOME_URL&#34;,无论它是什么。
答案 2 :(得分:0)
如果将所有路径分成不同的ImageView-s,则可以像这样覆盖IV的所有onTouchListener:
firstImg.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
Bitmap bmp = Bitmap.createBitmap(v.getDrawingCache());
int color = bmp.getPixel((int) event.getX(), (int) event.getY());
if (color == Color.TRANSPARENT)
return false;
else {
// here you can handle your click event
return true;
}
}
});
但是要小心,这种方法会占用大量资源,因为每个触摸事件都会经过多个onTouch侦听器。