Fabricjs做组态和流程图-认识Fabricjs（1）
在⼯业4.0和IOT的驱动下，越来越多的设备开始接⼊互联⽹。对于web和移动端的流⾏很多企业开始对设备的监控从桌⾯端⾛到了移动端和web端。虽然⽬前还是有不少漂亮的UI 是实现组态设计，但是还是如之前的⽼式思维⼀样，很少有开源的web 来满⾜各个需求。现在由于公司需要，开始研究组态设计并选定了这个FabricJS 作为 web 展⽰的组态设计！
是⼀个开源的基于canvas的web交互的js库，开源协议MIT，并有很多贡献者。英⽂⽆障碍者--->
Fabric 提供了canvas 渲染的对象模型，也能对SVG进⾏了很好的解析和交互，并且可以当作对于其他类似需求的必不可少的⼯具。它基于原⽣⽅法提供了简单并且强⼤的对象模型.也考虑到了canvas的状态和渲染，直接让我们对对象进⾏操作即可。后⾯的⽂章⼤部分是摘抄⾃官⽹教程，博主是想⼀边学，⼀边记。所以只是稍微梳理下并做了下翻译。
⽐如我们想画⼀个红⾊矩形，来实现同样的效果，⼀下是⽤原⽣canvas和Fabric的对⽐：
将这个矩形旋转45度：
⽤原⽣的canvas就需要:
var canvasEl = ElementById('c');
var ctx = Context('2d');
ctx.fillStyle = 'red';
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);
我们需要计算出在canvas位图中旋转的距离和画线的起始位置，然后再将这个举⾏画出来原⽣的是直接作⽤于整个canvas,⽽Fabric 是实例化⼀个对象，并对这个对象的属性和事件进⾏操作再加⼊到canvas 中。当我们想对这个举⾏进⾏移动的时候，我们⽤原⽣canvas API是需要重新清空canvas 再进⾏重绘，⽽Fabric直接改变该对象的属性位置⽽进⾏渲染！（）
看 canvas API
var canvasEl = ElementById('c');
.
..
ctx.strokRect(100, 100, 20, 20);
...
// erase entire canvas area
ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
ctx.fillRect(20, 50, 20, 20);
⽽⽤Fabric
var canvas = new fabric.Canvas('c');
...
canvas.add(rect);
...
rect.set({ left: 20, top: 50 });
Fabric 的对象
Fabric提供了7中基本的对象类，如果只是单纯的画这些图形的话，会节省我们很多的时间：
fabric.Circle //圆形
fabric.Ellipse //椭圆
fabric.Line //线
fabric.Polygon //多边形
fabric.Polyline //交叉线折线
fabric.Rect //矩形
fabric.Triangle//三⾓形
这些实例都继承fabric.Object，如果你想画⼀些图形，并且需要⼀些公共⽅法。这时候你就可以在fabric.Object上定义⼀个⽅法，来让⼦类继续。
⽐如我们定⼀个⽅法getAngleInRadians ⽅法在fabric.Object对象上：
fabric.AngleInRadians = function() {
('angle') / 180 * Math.PI;
};
var rect = new fabric.Rect({ angle: 45 });
var circle = new fabric.Circle({ angle: 30, radius: 10 });
circle instanceof fabric.Circle; // true
circle instanceof fabric.Object; // true
你就会发现这些对象都可以使⽤了。
Canvas
如果我们想对canvas操作，则会使⽤以下⽅式：
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect();
canvas.add(rect); // add object
canvas.item(0); // reference fabric.Rect added earlier (first object)
var canvas = new fabric.Canvas('c', {
backgroundColor: 'rgb(100,100,200)',
selectionColor: 'blue',
selectionLineWidth: 2
// ...
});
// or
var canvas = new fabric.Canvas('c');
canvas.setBackgroundImage('...');
// ...
Interactivity（互动）
重点来了，交互-对象模型存在允许编程访问和操纵画布上的对象。但是在⽤户层⾯是通过⿏标来操作
这个对象的，只要你是通过fabric.Canvas('...')初始化对象的，它是可以被选择，拖拽，放⼤缩⼩和旋转，甚⾄可以分组。如果你想禁⽤某个交互功能，你只需要配置成boolen传递即可：
var canvas = new fabric.Canvas('c');
...
canvas.selection = false; // disable group selection
rect.set('selectable', false); // make object unselectable
如果你不想让这个对象有任何的操作，你可以使⽤fabric.StaticCanvas对象
var staticCanvas = new fabric.StaticCanvas('c');
staticCanvas.add(
new fabric.Rect({
svg canvaswidth: 10, height: 20,
left: 100, top: 100,
fill: 'yellow',
angle: 30
}));
Images（图⽚）
对图⽚的操作也是同样的
//(html)
<canvas id="c"></canvas>
<img src="my_image.png" id="my-image">
//(js)
var canvas = new fabric.Canvas('c');
var imgElement = ElementById('my-image');
var imgInstance = new fabric.Image(imgElement, {
left: 100,
top: 100,
angle: 30,
opacity: 0.85
});
canvas.add(imgInstance);
也可以直接使⽤图⽚路径使⽤fabric.Image.fromURL来渲染：
fabric.Image.fromURL('my_image.png', function(oImg) {
// scale image down, and flip it, before adding it onto canvas
oImg.scale(0.5).set('flipX, true);
canvas.add(oImg);
});
Paths（路经）
如果我们要画更复杂的图形，则需要使⽤路经来画
...
var path = new fabric.Path('M 0 0 L 300 100 L 200 300 z');
...
path.set({ fill: 'red', stroke: 'green', opacity: 0.5 });
canvas.add(path);
...
var path = new fabric.Path('M121.32,0L44.58,0C36.67,0,29.5,3.22,24.31,8.41\
c-5.19,5.19-8.41,12.37-8.41,20.28c0,15.82,12.87,28.69,28.69,28.69c0,0,4.4,\
0,7.48,0C36.66,72.78,8.4,101.04,8.4,101.04C2.98,106.45,0,113.66,0,121.32\
c0,7.66,2.98,14.87,8.4,20.29l0,0c5.42,5.42,12.62,8.4,20.28,8.4c7.66,0,14.87\
-2.98,20.29-8.4c0,0,28.26-28.25,43.66-43.66c0,3.08,0,7.48,0,7.48c0,15.82,\
12.87,28.69,28.69,28.69c7.66,0,14.87-2.99,20.29-8.4c5.42-5.42,8.4-12.62,8.4\
-20.28l0-76.74c0-7.66-2.98-14.87-8.4-20.29C136.19,2.98,128.98,0,121.32,0z');
canvas.add(path.set({ left: 100, top: 200 }));
结语
这是介绍的对fabric⼀些基本的实例对象，还有⼀些更复杂的动画，⽂本，SVG的解析，渲染，序列化，事件，图⽚过滤等等。。。
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论