如何分别为每个路径元素定义点击事件 [英] How to define click event separately for each path element
问题描述
我正在使用Android上的SVG文件. Android Studio将SVG文件转换为包含矢量和路径元素的XML文件.一个XML文件可以具有多个路径"元素.问题就从这里开始.我想为每个路径元素提供无需使用webview即可单独单击的功能. (JavaScript是风险的原因！)有没有办法做到这一点?
I am working with SVG files on Android. Android Studio converts SVG files into XML files containing vector and path elements. An XML file can have multiple "path" elements. The problem starts right here. I want to give each path element the ability to be individually clicked without using webview. (Cause of javascript is risky!) Is there a way to do that?
我不能使用单击的像素颜色.因为它们是非常可变的. 我可以将每个路径元素分离到不同的XML文件.但是，这条路径也会记住它们的位置.当我想将每个XML文件添加到FrameLayout时，它们会将矩形边缘扩展到电话边缘.即使它们在width和height属性中具有wrap_content.因此，onClick事件被阻止. onClick事件仅起作用之一.您可以检查照片中的蓝色边缘.每个图像视图的蓝色边缘相同:
I cant use clicked pixels colors. Cause they are very variable. I can seperate each path elements to different XML files. But this paths also keep remember of where they are located. And when I wanted to add each XML files into FrameLayout, they are expanding their rectangle edge untill to the phone edge. Even if they have wrap_content in width and height properties.. So onClick events blocked. onClick events works just one. You can check blue edge in the photo. This blue edge same for each imageviews :
<?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:
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>
推荐答案
您可以使用RichPath库，它具有一个集成的OnClickListener，它可以传递单击的路径元素. GitHub链接: https://github.com/tarek360/RichPath
You can use RichPath library, it has an integrated OnClickListener which passes clicked path element. GitHub link: https://github.com/tarek360/RichPath
将SVG定义为VectorDrawable并将其添加到XML
Define SVG as VectorDrawable and add it to 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:
And set setOnPathClickListener in code:
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.
}
}
});
这篇关于如何分别为每个路径元素定义点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
