fabricjs 插件使用

叼着奶瓶打代码

已于 2023-05-30 16:53:58 修改

阅读量763

点赞数 2

文章标签：前端 javascript fabric

于 2023-05-30 16:46:19 首次发布

本文链接：https://blog.csdn.net/mcsddnn/article/details/130950044

版权

创建画布

      this.canvas = new fabric.Canvas("canvas", {
        fireRightClick: true, // 启用右键，button的数字为3
        stopContextMenu: true, // 禁止默认右键菜单
        includeDefaultValues: false, // 精简json
        preserveObjectStacking: true, // 元素对象被选中时保持在当前z轴，不会跳到最顶层
        renderOnAddRemove: true,  // true 删除元素时实时刷新画布
      });
      this.$store.dispatch("Set_Canvas", this.canvas);
      // canvas.scale(0.5);
      // 修改控制点的形状，默认为`rect`矩形，可选的值还有`circle`圆形
      fabric.Object.prototype.cornerStyle = "circle";
      // 修改控制点的填充色为白色
      fabric.Object.prototype.cornerColor = "white";
      // 修改控制点的大小为10px
      fabric.Object.prototype.cornerSize = 10;
      // 设置控制点不透明，即可以盖住其下的控制线
      fabric.Object.prototype.transparentCorners = false;
      // 修改控制点的边框颜色为`gray`灰色
      fabric.Object.prototype.cornerStrokeColor = "gray";

      // 单独修改旋转控制点距离主体的纵向距离为-20px
      fabric.Object.prototype.controls.mtr.offsetY = -20;
      // 单独修改旋转控制点，光标移动到该点上时的样式为`pointer`，一个手的形状
      fabric.Object.prototype.controls.mtr.cursorStyle = "pointer";
      // 控制点方位是否展示
      fabric.Object.prototype.setControlsVisibility({
        tl: false, // 左上
        mt: false, // 中上
        tr: false, // 右上
        ml: false, // 左中
        mr: false, // 右中
        bl: false, // 左下
        mb: false, // 中下
        mr: false, // 右下
        mtr: false, // 旋转点
      });

添加图片元素

        fabric.Image.fromURL(
          ‘图片地址’,
          (img) => {
            img.scaleToHeight(canvas.getHeight(), true); // 缩放到指定尺寸
            img.set({。
              elementName: "LOGO",   // 设置自定义属性
              angle: 0,              // 旋转的角度
              scaleX: canvas.width ,  // 放大缩小x轴
              scaleY: canvas.width ,  // 放大缩小Y轴
              originX: "left", // 旋转的中心点设置 left center right                  
              originY: "top",  // 旋转的中心点设置 top center bottom
              selectable: false, // 是否可选当前元素    
              statefullCache: true,  // 当“true”时，将检查对象属性是否存在缓存无效。
            });
            canvas.centerObjectH(img); // 元素水平居中
            canvas.centerObjectV(img); // 元素垂直居中
            img.setControlsVisibility({  // 设置元素的控制点
              mt: false, // middle top disable
              mb: false, // midle bottom
              ml: false, // middle left
              mr: false, // I think you get it
              mtr: false,
            });
            // 添加事件
            canvas.add(img);   // 将图片添加进canvas
          },
          {
            crossOrigin: "anonymous",   // 处理图片跨域的情况，这里是为了后续截取canvas为封面的情况
          }
        );

替换image

首先先获取 canvas 的所有元素

canvas.getObjects()

   ’当前要修改的元素的object‘.setSrc(
        ’新的图片地址‘,
        (img) => {
          img.set({
            // 要修改的属性
          });
          this.canvas.renderAll(); // 此方法刷新画布
        },
        {
          crossOrigin: "anonymous",
        }
      );

添加画布背景

替换也同时调用此方法也可以


        fabric.Image.fromURL(
          ‘背景图片地址’,
          (img) => {
            img.set({
              elementName: "background",  // 自定义属性名
              angle: 0,
              scaleX: canvas.width / img.width,
              scaleY: canvas.height / img.height,
              originX: "left",
              originY: "top",
              statefullCache: true,
              moveTo: 0,  // 自定义图片层级
            });

            img.setControlsVisibility({
              mt: false, // middle top disable
              mb: false, // midle bottom
              ml: false, // middle left
              mr: false, // I think you get it
            });
            // 添加背景到画布
            canvas.setBackgroundImage(img); 
            canvas.renderAll();  // 添加记得刷新！！！！
          },
          {
            crossOrigin: "anonymous",
          }
        );

刷新画布的方法

// renderAll 同步更新画布

// requestRenderAll 一段时间内多次更新画布，异步操作

Fabric.js 常用的方法&事件

getObjects() 获取 canvas 画布的所有对象
setActiveObject() 设置 canvas 画布选中元素
getActiveObject() 获取 canvas 画布选中元素
discardActiveObject() 取消 canvas 画布中所有对象的选中状态

Fabric.js 事件

selection:updated 画布选择变化
selection:created 初次选中画布
selection:cleared 清空画布选中
mouse:down 鼠标按下
mouse:up 鼠标抬起
mouse:move 鼠标移动
mouse:dblclick 鼠标双击
object:added 添加图层
object:modified 编辑图层
object:removed 移除图层
object:moving 对象移动
object:added 对象被加入
object:removed 对象被移除

鼠标相关

mouseup 鼠标抬起
mousedown 鼠标按下
mousemove 鼠标移动
mouseup:before 鼠标抬起前
mousedown:before 鼠标按下前
mousemove:before 鼠标移动前
mousedblclick 鼠标双击
mousewheel 鼠标滚动
mouseover 鼠标移入
mouseout 鼠标移除

Fabric.js 常用的方法&事件

     this.canvas.on("mouse:down", (opt) => {
        this.canvasOnMouseDown(opt, this.canvas);  // 画布上的点击事件（包括右键）
      });
      this.canvas.on("object:moving", (e) => {
        this.imgMoving(e); // 限制画布元素的移动
        // 此为实例。 限制直接修改object top，left 值即可 
        // top
        if (object.top > initTop + initHeight - 20) {
          object.top = initTop + initHeight - 20;
        } else if (object.top < initTop - initHeight + 20) {
          object.top = initTop - initHeight + 20;
        }
        // left
        if (object.left > initLeft + initWidth - 20) {
          object.left = initLeft + initWidth - 20;
        } else if (object.left < initLeft - initWidth + 20) {
          object.left = initLeft - initWidth + 20;
        }

      });
      this.canvas.on("mouse:out", (e) => {
        if (!e.target) {}  // 鼠标移除画布的事件
      });

图层的移动

图层的移动实际上是对Fabric.js的元素对象数组的index进行操作

首先先获取当前元素的object

1. 移动至顶层

        canvas.sendBackwards(object)

        object.bringToFront()

2. 移动至底层

        canvas.sendToBack(object)

        object.sendToBack()

3. 上移一层

        canvas.bringForward(object)

        object.bringForward()

4. 下移一层

        canvas.sendBackwards(object)

        object.sendBackwards()

5. 移动至第几层

// moveTo("操作的对象"，移动到第几层)

        canvas.moveTo(object)

        object.moveTo()

Fabric.js 删除元素

Fabric.js 提供了2个方法删除对象。

canvas.remove(...object) // 直接删除
canvas.fxRemove(object, callbacksopt) // 动画删除

canvas.fxRemove(object, {
  onChange() {
	console.log('在动画的每一帧调用')
  },
  onComplete() {
	console.log('删除成功后调用')
  }
})
canvas.FX_DURATION = 500 // 500是动画默认值
在canvas.renderOnAddRemove为 true 的情况下，使用 canvas.remove 删除元素后，画布会自动刷新。

canvas.renderOnAddRemove默认值是 true

如果 canvas.renderOnAddRemove = false ，使用 canvas.remove 后，元素是删除了，但画布上还能看到元素。