在Flutter中绘制并与SVG交互

一尘不染

在Flutter中绘制并与SVG交互

flutter

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

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

我们尝试将Flare用于Flutter，但此库没有提供与所显示人体的直接交互。

有没有更简单的方法来：

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

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

提前致谢。

阅读 598

2020-08-13

共1个答案

一尘不染

我使用built_path库将其工作，该库将SVG路径预编译为Path对象。然后，将其包装到ClipPathWidget中，如下所示：

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

如果按下该按钮，它将使身体部位着色为蓝色，效果很好。

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

2020-08-13