fabric.js实战
站长
· 阅读数 7
数据采集
业务：
- 轨迹手写、抄写
- 雷达采集
轨迹手写、抄写
需求
- 可配置画笔颜色、粗细
- 可通过手势生成实际轨迹
- 可通过手势来圈选轨迹
- 可撤销、删除轨迹
- 可操作轨迹
- 可缩放、拖动
- 背景网格，且背景网格可缩放和拖动
- 参考图片可缩放、偏移
- 手势处理系统，单指绘制、双指缩放、三指拖动
技术选型
因为涉及到轨迹、操作轨迹两点，
svg无法满足大量且复杂的轨迹，canvas没法操作轨迹，所以从 fabricjs/konva 中选型，
因 fabricjs 使用人数更多，所以采取了其作为技术选型。
fabric 原理
- 通过其内置的几何对象来创建图形
- 维护一个对象树
- 将对象树通过 canvas-api 绘制在实际的 canvas 上
因此，fabric 能做非常多的优化手段
- 已渲染的节点可通过
子canvas做缓存 - 对比新旧对象树能做差值更新
- 虚拟画布，类似于虚拟滚动，只渲染可视化的区域
模块
- header：与业务相关
- toolBar：工具栏
- sidebar：与业务相关
- canvas：绘制画板
性能问题
- 圈选是实时的，即判断一个多边形是否相交于或包含于一条复杂轨迹，因为使用了射线法，当遇到大量轨迹的时候，可能会卡顿。目前做了多重优化手段，比如函数节流、先稀疏复杂轨迹的点、然后判断图形的占位区域是否相交、然后判断图形的线段之间是否相交、然后判断是否包含关系。
- 轨迹的实时生成，在一长串touchmove事件中，使用一个初始化的polyline，后续更改其点集，这样只需要实例化一个对象，性能高。
- touchmove回调里执行复杂的逻辑，这会阻塞touchmove的触发频率，我们将touchmove里的回调通过settimeout放到异步队列中，这样就剥离了touchmove
事件层和 回调函数处理层，这样touchmove的触发频率就不会被影响