一，fabric对象的理解

原生的canvas画图操作太过繁琐，fabric.js在原生canvas方法之上封装了一层，提供更为简单但功能强大的对象模型。它负责画布的状态和渲染，并让我们直接使用“对象”。

使用abric需要先理解它对象的概念。画布是一个对象，上面的各个图案也是对象。而原生的canvas则没有这么多对象。可以看下文对比，理解一下。

1，使用原生canvas和fabric创建图形对比

当我们使用canvas画图的操作：

<template>
  <div class="app">
    <canvas id="canvas" width="300" height="200"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    var canvasEl = document.getElementById("canvas");
    canvasEl.style.background = 'grey'
    var ctx = canvasEl.getContext("2d");
    ctx.fillStyle = 'red';
    ctx.fillRect(100,100,20,20);
  },
};
</script>

看起来和原生js差不多，繁琐低效。再看fabric:

<template>
  <div class="app">
    <canvas id="canvas" width="300" height="200"></canvas>
  </div>
</template>

<script>
import {fabric} from "fabric"
export default {
  mounted(){
    var canvas = new fabric.Canvas("canvas",{backgroundColor:"grey"});
    var rect = new fabric.Rect({
      left:100,
      top:100,
      fill:"red",
      width:20,
      height:20,
    });
    canvas.add(rect);
  }
}
</script>

使用原生方法，我们可以在上下文ctx(一个表示整个画布位图的对象)上操作。在Fabric中，我们对对象进行操作——实例化它们，更改其属性并将其添加到画布。这些对象是Fabric土地上的一等公民。

2，使用原生canvas和fabric修改图形对比

按照1中的说法，原生canvas中我们只能获取到表示整个画布位图的ctx对象。那如果要移动画布中的图案呢？

原生canvas需要先清除画布上的内容，然后再在目标位置画出新内容。

mounted() {
    var canvasEl = document.getElementById("canvas");
    canvasEl.style.background = 'grey'
    var ctx = canvasEl.getContext("2d");
    ctx.fillStyle = 'red';
	ctx.fillRect(100,100,20,20);
    //位移
    ctx.clearRect(0,0,canvasEl.width,canvasEl.height);//整个画布内容擦除
    ctx.fillRect(20,50,20,20);//新位置绘图
  },

而使用fabric呢？

mounted(){
    var canvas = new fabric.Canvas("canvas",{backgroundColor:"grey"});
    var rect = new fabric.Rect({
      left:100,
      top:100,
      fill:"red",
      width:20,
      height:20,
    });
    canvas.add(rect);//在画布对象上添加这个矩形
	// 位移
    rect.set({left:20,top:50});//修改举行对象的位置属性
    canvas.renderAll()//修改完之后重新渲染
  }

画布上创建的矩形rect本身是一个对象，我们只要修改它的位置属性，就可以实现位置的移动了。理解了fabric的对象的概念，就可以开始使用了。

二，安装

npm i fabric --save

三，画布对象

<canvas width="400" height="400" id="canvas" style="border: 1px solid #ccc;"></canvas>

import { fabric } from 'fabric'

const canvas=new fabric.Canvas("canvas", {
      backgroundColor: "pink",
      selectionColor: "blue",
      selectionLineWidth: 2,
      // ...
    }); // 这里传入的是canvas的id：c,第二个参数是对象，里面可以设置画布的一些属性
//获取canvas上的所有对象
canvas.getObjects(); 
//在画布上添加指定的对象
canvas.add(rect); 
//删除指定的对象
canvas.remove(rect); 
}

参数的设置可以查看官网对应的api:JSDoc: Class: Canvas (fabricjs.com)

四，创建基础对象

1，Fabric.js 基础对象

在 Fabric.js 中有以下七种预定义的基础对象。

fabric.Rect 矩形
fabric.Circle 圆形
fabric.Triangle 三角形
fabric.Ellipse 椭圆
fabric.Line 线型
fabric.Polyline 折线
fabric.Polygon 多边形

为了方便起见，我把这七种都写出来了：

    //新建画布对象
    const canvas = new fabric.Canvas("canvas", {
      backgroundColor: "pink",
      selectionColor: "blue",
      selectionLineWidth: 2,
    });
    //矩形
    const rect = new fabric.Rect({
      left: 10,
      top: 10,
      width: 30,
      height: 30,
      fill: "yellow",
    });
    //圆形
    const circle = new fabric.Circle({
      left: 50,
      top: 10,
      radius: 15,
      fill: "green",
    });
    //三角形
    const triangle = new fabric.Triangle({
      left: 90,
      top: 10,
      width: 30,
      height: 30,
      fill: "blue",
    });
    //椭圆
    const ellipse = new fabric.Ellipse({
      left: 130,
      top: 10,
      rx: 10, //短轴
      ry: 15, //长轴
      fill: "red", //填充颜色
      stroke: "rgba(0, 0, 0, 1)", //边框颜色
    });
    //直线
    const line = new fabric.Line([170, 25, 200, 25], {
      //该数组四个值【起点x,起点y,终点x,终点y】
      fill: "#5E2300", //填充颜色
      stroke: "#5E2300", //笔触颜色
    });
    //折线
    const polyline = new fabric.Polyline(
      [
        {
          x: 200,
          y: 10,
        },
        {
          x: 250,
          y: 50,
        },
        {
          x: 250,
          y: 180,
        },
      ],
      {
        fill: "transparent",
        stroke: "red", //笔触颜色
        strokeWidth: 2,
      }
    );
    // 多边形
    const polygon = new fabric.Polygon(
      [
        {
          x: 200,
          y: 10,
        },
        {
          x: 250,
          y: 50,
        },
        {
          x: 250,
          y: 180,
        },
      ],
      {
        left: 100,
        top: 50,
        fill: "red",
        strokeWidth: 4,
        stroke: "green",
      }
    );
    canvas.add(rect, circle, triangle, ellipse, line, polyline, polygon); //它可以添加一个，也可以一次性添加多个

实现的效果：

2，基础对象的常见属性

上文创建了其中基础对象，他们有一些属性参数，如下所示：

fill: "#5E2300", //填充颜色
stroke: "#5E2300", //笔触颜色
scaleX: 4,//x轴放大倍数
scaleY: 4,//y轴放大倍速
strokeWidth: 4, //笔触宽度
selectable: true, //是否可被选中
transparentCorners: false, //选中后的控制手柄的是否透明
cornerColor: "blue", //选中后的控制手柄颜色
hasControls: true, //选中时是否可以放大缩小
hasRotatingPoint: true, //选中时是否可以旋转
hasBorders: true, //选中时是否有边框
lockMovementX: true, //X轴是否可被移动(true为不可，因为前缀是lock)
lockMovementY: true, //Y轴是否可被移动(true为不可，因为前缀是lock)

更多的属性，可以查看对应文档：JSDoc: Home (fabricjs.com)

五，操作对象

上文我们只是创建了对象，在某个时候，我们可能会想要修改那些对象。

也许某些动作将需要触发状态改变，或者播放某种形式的动画。或者，我们可能想更改某些鼠标交互时的对象属性（颜色，不透明度，大小，位置）。

Fabric和vue一样，数据驱动视图，我们只要变更对应对象的属性值，就可以驱动视图发生相应的变化。

而这些可供修改的属性，都与定位有关——left、top；尺寸——width、height；渲染——fill、opacity、stroke、strokeWidth；缩放和旋转——scaleX、scaleY、angle；甚至与翻转相关的内容——flipX、flipY和倾斜的skewX、skewY。

1，读取对象属性

obj.get('属性名')

例如，获取距离左侧的宽度：

    //新建画布对象
    const canvas = new fabric.Canvas("canvas", {
      backgroundColor: "pink",
      selectionColor: "blue",
      selectionLineWidth: 2,
    });
    // 多边形
    const polygon = new fabric.Polygon(
      [
        {
          x: 100,
          y: 10,
        },
        {
          x: 250,
          y: 10,
        },
        {
          x: 250,
          y: 180,
        },
        {
          x: 150,
          y: 180,
        },
      ],
      {
        left: 100,
        top: 50,
        fill: "red",
        strokeWidth: 4,
        stroke: "green",
        perPixelTargetFind: true,
      }
    );
    canvas.add(polygon);
    console.log("获取距离左侧距离", polygon.get("left"));

2，设置对象属性

obj.set("属性名",新的属性值)

这个set还支持链式调用，并且，在canvas.add(polygon);之前或者之后调用，都是可以的：

polygon.set("fill", "blue").set("stroke", "red");//将上文的多边形填充和边框颜色变更

或者obj.set传入属性对象也是可以的

obj.set({属性名：属性值})

3，自定义原型对象属性方法

在fabric中的大多数对象都从根fabric.Object继承。 fabric.Object几乎代表一个二维形状，位于二维画布平面中。它是一个具有left / top和width / height属性以及一系列其他图形特征的实体。我们在对象上看到的那些属性（fill、stroke、angle、opacity、flip *等）对于所有从fabric.Object继承的Fabric对象都是共有的。 这种继承使我们可以在fabric.Object上定义方法，并在所有子“类”之间共享它们。例如，如果要在所有对象上都具有getWidth方法，则只需在fabric.Object.prototype上创建它：

fabric.Object.prototype.getWidth = function () {
      return this.get("width");
};
    //新建画布对象
    const canvas = new fabric.Canvas("canvas", {
      backgroundColor: "pink",
      selectionColor: "blue",
      selectionLineWidth: 2,
    });
    // 多边形
    const polygon = new fabric.Polygon(
      [
        {
          x: 100,
          y: 10,
        },
        {
          x: 250,
          y: 10,
        },
        {
          x: 250,
          y: 180,
        },
        {
          x: 150,
          y: 180,
        },
      ],
      {
        left: 100,
        top: 50,
        fill: "red",
        strokeWidth: 4,
        stroke: "green",
        perPixelTargetFind: true,
      }
    );
    canvas.add(polygon);
    console.log("获取宽度", polygon.getWidth());

六，Image对象

图像对象和基础对象又有所不同，因为它需要开发者额外导入图像资源。

这里需要区分两种情况。

1，document上有已经渲染的图像

这种写法需要等图像已经渲染出来了，才能创建fabric对象。所以我把创建canvas放在image的load方法内部了。

<template>
  <div id="app">
    <!-- 1、创建 canvas 元素 -->
    <canvas
      width="400"
      height="400"
      id="canvas"
      style="border: 1px solid #ccc"
    ></canvas>
    <img
      src="./hq-wmyd.png"
      alt="picture"
      id="img"
      width="100"
      height="auto"
      @load="imageLoad"
    />
  </div>
</template>

<script>
//引入fabric
import { fabric } from "fabric";
export default {
  name: "App",
  components: {},
  mounted() {},
  data() {
    return {};
  },
  methods: {
    imageLoad() {
      const canvas = new fabric.Canvas("canvas");
      canvas.setBackgroundColor("rgb(100,200,200)");
      const imgElement = document.getElementById("img");
      const imgInstance = new fabric.Image(imgElement, {
        left: 100,
        top: 100,
        angle: 45,
        opacity: 0.6,
      });
      console.log(imgInstance);
      canvas.add(imgInstance);
    },
  },
};
</script>

<style scoped lang="scss"></style>

2，采用图片地址的方式

const canvas = new fabric.Canvas("canvas");
canvas.setBackgroundColor("rgb(100,200,200)");
fabric.Image.fromURL(
   "https://i.niupic.com/images/2022/10/15/a9pJ.png",
    (oImg) => {
     canvas.add(oImg);
    }
);

实现的效果均是如下：

七，路径对象path

上文我们已经能够绘制基本的图案了。

如果想要画出更复杂的图案，则需要引入path。

Fabric中的路径非常类似于SVG <path>元素。它们使用相同的命令集。Fabric中的路径代表可以用其他方式填充，描边和修改的形状轮廓。路径由一系列命令组成，这些命令实际上模仿了笔从一个点到另一个点的过程。借助“移动”，“线”，“曲线”或“弧”等命令，路径可以形成难以置信的复杂形状。

    const canvas = new fabric.Canvas("canvas");
    canvas.setBackgroundColor("rgb(100,200,200)");
    const path = new fabric.Path(
      `M8870 5431 c-20 -11 -46 -38 -60 -63 l-25 -43 -5 -1985 c-5 -1969 -5
-1985 15 -2029 36 -80 41 -81 412 -81 l323 0 29 57 c98 194 293 384 499 487
81 41 217 83 326 102 147 25 406 16 538 -19 301 -79 541 -276 674 -553 l45
-94 421 0 421 0 63 31 c88 43 186 135 221 207 l28 57 3 728 3 728 -35 104
c-45 134 -88 218 -199 390 -191 296 -1019 1641 -1061 1723 -76 150 -232 238
-466 262 -64 6 -479 10 -1119 10 -970 -1 -1018 -2 -1051 -19z m1991 -291 c171
-17 279 -58 309 -117 8 -15 62 -107 119 -203 281 -475 476 -823 537 -961 26
-58 39 -103 42 -146 4 -58 2 -64 -25 -92 -16 -16 -47 -34 -69 -40 -55 -15
-2238 -15 -2299 0 -52 13 -119 67 -144 118 -40 79 -43 122 -39 731 3 577 3
586 25 632 13 29 35 55 55 68 32 19 48 20 709 20 393 0 720 -4 780 -10z m1605
-3111 c49 -45 54 -72 54 -294 0 -236 -7 -266 -64 -290 -71 -30 -157 -13 -206
39 -24 26 -25 34 -28 173 -7 312 33 409 166 400 38 -3 59 -10 78 -28z`
    );
    let commonObj = {
      left: 10,
      top: 10,
      fill: "#5E2300",
      scaleX: 0.01,
      scaleY: 0.01,
    };
    canvas.add(path.set(commonObj));

创建路径的流程是：实例化fabric.Path对象，并向其传递一串路径指令。虽然看起来很神秘，但实际上很容易理解。 “ M”表示“移动”命令，并指示隐形笔移动到第一点。 “ L”代表“线”，使笔画一条线到下一点。然后，另一个“ c”创建一条到另一点的贝塞尔曲线。最后，“ z”告诉强制绘图笔关闭路径并最终确定形状。

由于fabric.Path就像Fabric中的任何其他对象一样，我们也能够更改其某些属性。

可以看到，路径是很多的点数据，所以通常我们很少会手动创建Path实例，而是使用Fabric的内置SVG解析器来获取路径。

上面代码实现的效果：

八，文本对象

fabric提供的文本对象支持多行输入、文字对齐方式选择、文字背景设置、文本修饰、文本行高、设置字间距、修改样式、富文本（支持标签）、在 canvas 进行输入编辑。 常用的创建文本的方法如下，第一个参数是文本内容,第二个则是文本的属性对象：

    const canvas = new fabric.Canvas("canvas");
    canvas.setBackgroundColor("rgb(100,200,200)");
    const txt = new fabric.Text('test', {
      left: 140, // 位置
      top: 140,
      shadow: 'rgba(0,0,0,0.3) 15px 15px 15px', // 阴影
      fontFamily: 'Hoefler Text', // 字体
      stroke: '#ff1318', // 画笔颜色
      strokeWidth: 2, // 画笔粗度
      fill: '#0f0', //填充颜色
      fontSize: 60, // 字体大小
    });
    canvas.add(txt);

实现的效果：

九，组的概念

上文讲的都是单个元素的创建和操作，除此之外，fabric也提供了将创建的对象进行组合的方法 group ，将几个对象进行组合成为一个新的对象之后进行操作：

    const canvas = new fabric.Canvas("canvas");
    canvas.setBackgroundColor("rgb(100,200,200)");
    const rect = new fabric.Rect({
        //自己对象的属性可以单独设置
      width: 30,
      height: 30,
      fill: "yellow",
    });
    const ellipse = new fabric.Ellipse({
      rx: 10, //短轴
      ry: 15, //长轴
      fill: "red", //填充颜色
      stroke: "rgba(0, 0, 0, 1)", //边框颜色
    });
    const group = new fabric.Group([ rect, ellipse ], {
        //公用的属性可以设置到这里来
        left: 0,
        top: 0,
    });
    canvas.add(group);

实现的效果如下图：

而如果需要设置对象在组合中的位置，可以在创建对象的时候设置位置：

    const rect = new fabric.Rect({
+      left: 15,
+      top: 10,//这里设置位置，是以groups的左上角为基准的相对坐标值
      width: 30,
      height: 30,
      fill: "yellow",
    });