用Fabric.js来做一个简易功能的画布

　　最近有个需求是要做一个画布，可以上传图片，图标(箭头等)，以及编辑文本框。一开始想着找个现成的库直接用，不过由于用的是angular7版本，而现有的几个包含这些功能的库都不支持，似乎对vue更友好一点，没办法，只能自己做，好在有个fabric.js库对 canvas有了一个很好的封装，算是不需要再阅读cavans繁杂的文档了。

　　安装

npm i fabric 

　　使用

　　1. 创建画布对象

　　

const canvas = new fabric.Canvas('canvas');

　　此处的 new fabric.Canvas('canvas'); 是传入的 dom的ID名称

　　2. 画基础图形

　　　　1. 三角形

        const triangle = new fabric.Triangle({
          width: 30, // 底边长度
          height: 25, // 底边到对角的距离
          fill: color,
        });

　　　　2. 矩形

        const rect = new fabric.Rect({
          top: 25, // 距离容器顶部 100px
          left: 10,
          fill: color, // 填充 橙色
          width: 10, // 宽度 100px
          height: 80, // 高度 100px
        });

　　　　3. 三角形和矩形组合成一个类似的箭头 

        const triangle = new fabric.Triangle({
          width: 30, // 底边长度
          height: 25, // 底边到对角的距离
          fill: color,
        });

        const rect = new fabric.Rect({
          top: 25, // 距离容器顶部 100px
          left: 10,
          fill: color, // 填充 橙色
          width: 10, // 宽度 100px
          height: 80, // 高度 100px
        });

        // 将矩形添加到画布中
        const group = new fabric.Group([triangle, rect], {
          top: 50, // 整组距离顶部100
          left: 150, // 整组距离左侧100
          angle: 90, // 整组旋转-10deg
        });

　　　　Note: 要通过 this.canvas.add(group) 将画好的图形添加到画布上

　　　　4. 画一个圆

        const circle = new fabric.Circle({
          top: 150,
          left: 150,
          radius: 50, // 圆的半径
          fill: 'transparent',
          stroke: color,
        });
        this.canvas.add(circle);

　　　　需要注意的是 fill是对圆填充颜色，但是如果想让这个圆透明，可以设为'transparent' 这样就可以透明了。

　　　　5.画线段

        const line1 = new fabric.Line(
          [
            50,
            50, // 起始点坐标
            150,
            50, // 结束点坐标
          ],
          {
            stroke: color, // 笔触颜色
          }
        );
        const line2 = new fabric.Line(
          [
            140,
            40, // 起始点坐标
            150,
            50, // 结束点坐标
          ],
          {
            stroke: color, // 笔触颜色
          }
        );
        const line3 = new fabric.Line(
          [
            140,
            60, // 起始点坐标
            150,
            50, // 结束点坐标
          ],
          {
            stroke: color, // 笔触颜色
          }
        );
        const group_new = new fabric.Group([line1, line2, line3], {
          top: 50, // 整组距离顶部100
          left: 150, // 整组距离左侧100
        });
        this.canvas.add(group_new);

　　　　此处是画了三个线段，要注意坐标点是在画布左上角的点。同样也是通过fabric.Group 来将三条线段组合成一个箭头

　　3. 添加文本编辑框

　　　

        this.canvas.add(
          new fabric.Textbox('DoubleClick to Edit...', {
            left: 30,
            top: 30,
            fontSize: 20,
            width: 100,
            fill: color,
          })
        );

 

 

　　3.画布中的监听事件

　　

    this.canvas.on('selection:created', function (e: any) {
      _this.disabledDel = true;
      _this.selectedCanvas = e.selected ? e.selected : [];
    });
    this.canvas.on('selection:updated', function (e: any) {
      _this.disabledDel = true;
      _this.selectedCanvas = e.selected ? e.selected : [];
    });
    this.canvas.on('selection:cleared', function (e: any) {
      _this.disabledDel = false;
    });

　　我们在创建画布对象的时候就可以直接添加监听事件了。

　　如上代码中，created 事件是初次点击画布元素，updated是点击其他画布元素，cleared是删除元素或者点击空白处使当前没有元素被选中

　　这几个事件是为了做 删除选中元素的功能。 

　　通过 this.canvase.remove(obj)  

　　obj 是如上代码事件回调参数的 selected的值 即 e.selected

　　需要注意一点的是： 在具体某个画布元素创建好之后也可以为它们单独去添加监听事件，不过写法有不同，如 canvas的 selected:created 要写成selected了

　　大部分是直接写:后面的就可以了。如 object:scaling是画布canvas的事件，对应具体的元素则是 scaling.

 

　　4. canvas画布中的多个图片对象之间的图层位置变化

　　下移：canvas.sendBackwards(canvas.getActiveObject());
　　上移：canvas.bringForward(canvas.getActiveObject());
　　置顶：canvas.bringToFront(canvas.getActiveObject());
　　置底：canvas.sendToBack(canvas.getActiveObject());

 

 

　　目前我的需要只用到这些方法。fabric.js的文档还有很多很多。简直是浩如烟海，还有很多新奇的功能没有用到，也没有深入了解过。