fabric canvas 清空并重置画布

fabric.js是一个强大而简约的依赖HTML5上的 canvas的javascript库,Fabric在canvas元素顶部提供了交互式对象模型,它还具有SVG到画布(和画布到SVG)解析器,官网上提供了丰富的案例,可照葫芦画瓢,足够满足大部分的开发场景。

最近在开发工业互联网的客户端应用,有个场景需要用到canvas画图功能,大致描述就是需要先加载八张图片,然后在图片上根据坐标画出标注的信息,但是在你需要切换数据源的时候,重新绘制,就需要清空画布然后对新的数据源进行绘图,于是就有了下面的经验总结

在使用fabric Canvas绘制图像的时候,常常需要更新画布的内容,于是需要清空之前绘制的内容,并使画布回到原始的状态(如果你使用了拖拽或者放大的功能),只需要执行

canvas.clear(); // 清空画布

如果你画布上的某个元素处于选中状态,则需要

canvas.remove(canvas.getActiveObject());

来移除该元素,最后需要做的就是将画布的视窗回到初始化状态

canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);

其实通过zoomToPoint以鼠标中心缩放画布是通过重新计算视口然后transform变换来达到的,而以上矩阵则是视口矩阵的初始值。

你可能感兴趣的:(canvas,css,推荐系统,webgl,编程语言)