Fabricjs做组态和流程图-认识Fabricjs（1）

在工业4.0和IOT的驱动下，越来越多的设备开始接入互联网。对于web和移动端的流行 很多企业开始对设备的监控 从桌面端走到了移动端和web端。虽然目前还是有不少漂亮的UI 是实现组态设计，但是 还是如之前的老式思维一样，很少有开源的web 来满足各个需求。现在由于公司需要，开始研究组态设计并选定了这个FabricJS 作为 web 展示的组态设计！

Fabricjs是一个开源的基于canvas的web交互的js库,开源协议MIT,并有很多贡献者。英文无障碍者--->http://fabricjs.com

Fabric 提供了canvas 渲染的对象模型，也能对SVG进行了很好的解析和交互，并且可以当作对于其他类似需求的必不可少的工具。它基于原生方法提供了简单并且强大的对象模型.也考虑到了canvas的状态和渲染，直接让我们对对象进行操作即可。后面的文章大部分是摘抄自官网教程，博主是想一边学，一边记。所以只是稍微梳理下并做了下翻译。

比如我们想画一个红色矩形，来实现同样的效果，一下是用原生canvas和Fabric的对比：

将这个矩形旋转45度：

用原生的canvas就需要:

var canvasEl = document.getElementById('c');
var ctx = canvasEl.getContext('2d');
ctx.fillStyle = 'red';

ctx.translate(100, 100);
ctx.rotate(Math.PI / 180 * 45);
ctx.fillRect(-10, -10, 20, 20);

 

用Fabric就只需要增加一个属性就可以了：

var canvas = new fabric.Canvas('c');

// create a rectangle with angle=45
var rect = new fabric.Rect({
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20,
  angle: 45  //旋转45堵
});

canvas.add(rect);

 

我们