fabric.js学习使用(一)

为什么使用fabric.js

作为canvas的第三方封装库，fabric相对原生canvas api 使用方便，在绘制图形和加载图片时都是以对象的形式操作，相比于其他的第三方库，fabric.js功能更加丰富

 // 初始化fabric对象
 let canvas = new fabric.Canvas(canvasID,{
     width: 200,
     height: 200
 })
 
 // 绘制一个圆
 let circle = new fabric.Circle({
     radius: 10,
     fill: "red"
 })
 
 canvas.add(circle);
 

fabric.js 特点

使用缓存机制

在初始化一个canvas对象时，fabric会讲canvas节点转变成两个canvas,一个upper-canvas负责绘制作为缓存，lower-canvas负责显示，使用 drawImage将upper-canvas画到lower-canvas。

序列化和反序列化

使用JSON.stringify(canvas)可以将canvas以及canvas上的对象序列化，canvas.loadFromJSON实现反序列化。在实际使用，可以保存canvas绘制的图形，在需要时在再次载入到canvas上

状态变化

• 任何canvas上的图形对象，都保存着一个状态矩阵，该矩阵通过object.calcTransformMatrix()获得，通过该矩阵在使用fabric工具函数fabric.util.qrDecompose(transformMatix)对矩阵进行qr分解，就可以求得该图形对象此时的状态（相对于初始状态缩放/旋转/平移）
• 同样图形对象想做任何复杂的状态变化(混合在一起的平移旋转缩放)，可根据变化矩阵的qr分解结果求出scale，rotate等参数，然后在set方法重新设置图形对象的scale, rotate等属性
• canvas对象也有状态矩阵，作为其属性viewportTransform, 相当于原生canvas上下文的transform矩阵，改变viewportTransform可以实现canvas层的状态变化（平移旋转缩放）