相关文章推荐
坚强的遥控器  ·  黑土无言_百度百科·  9 月前    · 
从未表白的椰子  ·  广东省气象局·  1 年前    · 
刚分手的钱包  ·  Tsutchie Feat. ...·  1 年前    · 

最近有个需求是要做一个画布,可以上传图片,图标(箭头等),以及编辑文本框。一开始想着找个现成的库直接用,不过由于用的是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, // 起始点坐标
            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的文档还有很多很多。简直是浩如烟海,还有很多新奇的功能没有用到,也没有深入了解过。