fabric.js 起步CDN引入与npm安装，对比原生canvas异同？

起步

CDN引入：推荐使用引入，提供包括等在内的众多库的引入服务

npm安装：npm --save

一个简单的 demo

通过fabric.Canvas获取到canvas元素，并可以对canvas进行相应的设置,既可以通过获取已存在的canvas元素，fabric也支持创建canvas元素，同样也能对其进行相应操作

之前有一个需求是点鼠标左键并进行拖动，要实现实时在上进行画图

于是分别用元生和制作了该功能，接下来我们对比下两者的异同

原生

.

通过对比我们可以发现，跟原生写法比起来fabric写法更加直观也更加简洁设置相关属性也比原生的更加方便，并且在画线的过程中也显得更加的流程

API介绍

.Rect({}) 方形

- left:0, // 距离画布左侧的距离

- top:0, // 距离画布上边的距离

- fill:'oink', // 背景颜色

- width:10, // 宽度

- :10 // 高度

- 更多属性不一一赘述

.({}) 圆形

- 同方形

.({}) 三角形

- 同方形

.Pat({M x y L x1 y1 L x2 y2 z}) 多边形

- M表示起点，从坐标为x、y点起步，画到L x1、y1点，然后在画到L x2、y2点，最后z表示闭合改图形

- Image() 通过元素插入图片

- () 通过URL插入图片

在中，提供了很多不同的事件，下面介绍一部分常见的事件

更多更具体的事件可以参考

mouse（鼠标事件）
- move：按下且移动
- down：按下时
- up：按下抬起时
- dblclick：双击时
- mouseout：离开元素时
- mousewheel：滚轮事件
selection
- created 初次选中图层
- updated 图层选择变化
- cleared 清空图层选中
after
- render画布重绘后
object（对象）
- selected：被选中
- deselected：取消选中
- moving：移动
- rotating：旋转
- added：添加
- removed：移除
- modified：调整

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的组件

总结

通过总结和使用体验下来，的功能显得十分的强大，可以实现多样的效果，但由于时间局限，只是稍微整理了一下，但是还有许多的功能没有使用到，这部分的内容就需要在后续的开发过程中继续深入挖掘了，或者通过查看文档来加深了解，不过个人感觉官网文档并不显得那么友好，还没有官网demo显得友好

图层 通过 画布 canvas 元素 进行