博客

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变换来达到的，而以上矩阵则是视口矩阵的初始值。