Fabricjs是一个开源的基于canvas的web交互的js库,开源协议MIT,并有很多贡献者。
Fabric 提供了canvas 渲染的对象模型，也能对SVG进行了很好的解析和交互，并且可以当作对于其他类似需求的必不可少的工具。它基于原生方法提供了简单并且强大的对象模型.也考虑到了canvas的状态和渲染，直接让我们对对象进行操作即可。
请在任意搜索引擎或者GitHub搜索并下载FabricJS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../fabric.js"></script>
</head>
<style>
canvas {
border: 1px rgb(0, 0, 0) solid;
}
</style>
<body>
<canvas id="c" width="800" height="800"></canvas>
</body>
<script>
var canvas = new fabric.Canvas("c");
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: "red",
width: 100,
height: 100
})
var circle = new fabric.Circle({
radius: 50,
fill: "green",
left: 200,
top: 200,
height: 200,
})
var triangle = new fabric.Triangle({
width: 80,
height: 100,
fill: "pink",
left: 300,
top: 300
})
canvas.add(rect); //正方形
canvas.add(circle); //圆形
canvas.add(triangle); //三角形
</script>
</html>绘制图形
fabric.Rect({}) 方形
left:0, // 距离画布左侧的距离
top:0, // 距离画布上边的距离
fill:'oink', // 背景颜色
width:10, // 宽度
height:10 // 高度
更多属性不一一赘述
fabric.Circle({}) 圆形
fabric.Triangle({}) 三角形
fabric.Pat({M x y L x1 y1 L x2 y2 z}) 多边形
fabric
Image() 通过元素插入图片
fromURL() 通过URL插入图片
事件
在fabric中，提供了很多不同的事件
mouse（鼠标事件）
move：按下且移动
down：按下时
up：按下抬起时
dblclick：双击时
mouseout：离开元素时
mousewheel：滚轮事件
selection
created 初次选中图层
updated 图层选择变化
cleared 清空图层选中
after- render画布重绘后
object（对象）
selected：被选中
deselected：取消选中
moving：移动
rotating：旋转
added：添加
removed：移除
modified：调整
set与get
obj.set()通常设置属性的方式有两种，第一种是在绘制的时候添加进去。
另一种是通过set方法设置
例：obj.set({color:''})
注意：需canvas.add(obj)刷新页面
obj.get()
有set方法自然就有get方法
例：obj.getXXX 获取相应属性的属性值
组别
fabric.Group([x,y],{})
Group属性可以将x与y两个fabric实例组合成一个组别，在页面上显示出来
序列化和反序列化
toJSON（序列化）
loadFromJSON（反序列化）
注意事项
obj.renderAll()所有图层的操作之后，都需要调用这个方法刷新
obj.add()将场景加入画布中
操作案例
图层移动
// 上移图层
obj.bringForward();
// 下移图层
obj.sendBackwards();
// 使用canvas对象的moveTo方法，移至图层到指定位置
card.moveTo(obj, index);
// 旋转图层
obj.rotate(angle)
// 翻转图层,沿着X轴或者Y轴翻转
obj.set({ scaleX/Y: -this.selectedObj.scaleX/Y,})
// 删除图层
obj.remove()在进行相应操作后都需要canvas.renderAll()重新刷新画布，否则操作不生效
查询组件
canvas.item(index:number)
查找第index个添加到canvas的组件
