14

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

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

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

有没有更简单的方法：

  • 基于 SVG 渲染身体（未来的作品可能会改变）；
  • 检测点击，例如GestureDetector；
  • 根据点击的坐标查找按下的区域；

请注意，简单的框将不起作用，因为图像的部分重叠。可以看到我们想要达到的效果，我这里点了一只手臂。在它周围画一些可点击的框，效果不好。

提前致谢。

艺术品

4

1 回答 1

10

我通过使用将SVG 路径预编译为对象的built_path库使其工作。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

于 2019-08-14T14:10:16.147 回答