svg - 在 Flutter 中绘制 SVG 并与之交互
问题描述
我们正在开发一个基于 SVG 输入显示人体的应用程序。这个人体分为几个区域,想想头、左臂、右臂、腹部等。
我们希望在用户单击例如一只手臂时突出显示图像的一个区域。在 Flutter 中实现这样的事情的最佳方法是什么?
我们尝试将 Flare 用于 Flutter,但这个库不提供与所显示的人体的直接交互。
有没有更简单的方法:
- 基于 SVG 渲染身体(未来的作品可能会改变);
- 检测点击,例如
GestureDetector
; - 根据点击的坐标查找按下的区域;
请注意,简单的框将不起作用,因为图像的部分重叠。可以看到我们想要达到的效果,我这里点了一只手臂。在它周围画一些可点击的框,效果不好。
提前致谢。
解决方案
我通过使用将SVG 路径预编译为对象的built_path
库使其工作。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)));
如果按下它,它会将身体部位染成蓝色,效果很好。
我创建了一个完整的示例,可以在这里找到:https ://github.com/gi097/flutter_clickable_regions
推荐阅读
- angularjs - zingchart 热图未在 y 轴上显示所有时间
- c# - iTween MoveTo 并同时设置新的父级
- apache-nifi - 用于数据屏蔽的 Apache Nifi
- performance - 为什么在“Hackerrank”网站上执行代码所需的时间差别很大?
- mysql - 根据给定表中的外键查找多个表中的行数
- git - 在日志中重述提交
- postgresql - 优化包含测试数据的 dockerized postgres 数据库的(磁盘/内存)
- python-3.x - python将文件下载到内存中并处理断开的链接
- formula - 使用公式点击按钮获取价格
- oracle - 如何创建将记录表创建的 Oracle 事件触发器