在颤振中绘制SVG并与之交互

我们正在开发一个基于SVG输入显示人体的应用程序。人体分为几个区域，比如头部、左臂、右臂、腹部等

我们希望在用户单击（例如一只手臂）时突出显示图像的一个区域。在Flutter中实现这样一个目标的最佳方法是什么

我们尝试使用Flare进行颤振，但该librart不能提供与显示的人体的直接交互

有没有更简单的方法：

• 基于SVG渲染主体（艺术品在未来的开发中可能会发生变化）
• 检测点击，例如

  手势检测器

• 根据单击的坐标查找按下的区域

请注意，由于图像的某些部分重叠，因此简单的框不起作用。你可以看到我们想要达到的效果，我点击了这里的一只手臂。在其周围绘制一些可单击的框，将无法正常工作

提前谢谢

---

我通过使用

内置路径

库将SVG路径预编译为

路径

对象，使其工作。然后，我们将其包装到一个

ClipPath

小部件中，如下所示：

return GestureDetector(
    onTap: () => _bodyPartTapped(part),
    child: ClipPath(
        child: Stack(children: <Widget>[
          Container(
              color: pressedBodyPart == part
                  ? Colors.blue
                  : Colors.transparent),
          CustomPaint(painter: PathPainter(path))
        ]),
        clipper: PathClipper(path)));

返回手势检测器(
onTap:（）=>\u车身零件分接（零件），
孩子：克利帕斯(
子：堆栈（子：[
容器(
颜色：pressedBodyPart==零件
颜色：蓝色
：颜色。透明），
自定义绘制（绘制者：路径绘制者（路径））
]),
裁剪器：路径裁剪器（路径））；

如果按压身体部位，它会将身体部位染成蓝色，这样做非常好

---

我创建了一个完整的示例，可以在这里找到：

Hi Giovanni，我也有基于svg单击的类似问题。我们该怎么做1。钩住SVG上的单击操作，并获取被单击元素的“id”。2.更改代码中SVG元素的颜色。@MadhusudhanSahni，看看我的示例：）是的，阅读自述文件。您需要运行

flatterpackages pub run build\u runner build

来生成文件。使用flatter stable分支。主分会目前不与图书馆合作。我希望我能多次投票！谢谢你，Giovanni，你不仅发布了答案，还发布了一个很棒的演示。太多的人愿意寻求帮助，但如果他们自己解决了问题，他们不认为发布一个可以帮助他人的答案，这是一个令人耳目一新的变化。非常感谢。