在 Flutter 中绘制 SVG 并与之交互

Question

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

我们想要在用户点击例如一只手臂时突出显示图像的一个区域。在 Flutter 中实现这样的事情的最佳方法是什么？

我们尝试使用 Flare for Flutter，但是这个库不提供与正在显示的人体的直接交互。

有没有更简单的方法：

基于 SVG 渲染主体（艺术作品可能会在未来的发展中改变）；
检测点击，例如GestureDetector;
根据点击的坐标找到按下的区域；

请注意，由于部分图像重叠，简单的框将不起作用。大家可以看到我们要达到的效果，我这里点击了一只手臂。在它周围绘制一些可点击的框，效果不佳。

提前致谢。

Answer 1

我通过使用 built_path 库使其工作，该库将 SVG 路径预编译为 Path objects。然后我们将它包装成一个 ClipPath Widget，如下所示：

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)));

如果按下它，body 部分会变成蓝色，效果很好。

我创建了一个完整的示例，可以在此处找到：https://github.com/gi097/flutter_clickable_regions

在 Flutter 中绘制 SVG 并与之交互

Draw and interact with SVG in Flutter

svg

flare

dart

flutter