我们正在开发一个基于 SVG 输入显示人体的应用程序。这个人体分为几个区域,比如头部、左臂、右臂、腹部等。
我们想要在用户点击例如一只 ARM 时突出显示图像的一个区域。在 Flutter 中实现这样的事情的最佳方法是什么?
我们尝试将 Flare 用于 Flutter,但此库不提供与正在显示的人体的直接交互。
有没有更简单的方法:
- 基于 SVG 渲染 body (艺术作品可能会在未来的发展中改变);
- 检测点击,例如
手势检测器
; - 根据点击坐标找到点击区域;
请注意,由于部分图像重叠,简单的框将不起作用。大家可以看到我们要达到的效果,我这里点击了一只 ARM 。在它周围绘制一些可点击的框,效果不佳。
提前致谢。
最佳答案
我通过使用 built_path
库使其工作,该库将 SVG 路径预编译为 Path
对象。然后我们将它包装到一个 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
关于svg - 在 Flutter 中绘制 SVG 并与之交互,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57489968/