【fabrc.js】 创建组(fabric.Group)类型的 3 种方式

  • 方法1:先选中已存在画布内多个图形,然后拿到ActiveSelection数据,随后调用 `toGroup()` 即可将选中的图形创建为组对象;
  • 方法2:new fabric.Group() 获取group实例,通过new的时候传入图形参数[o1,o2...],然后将group实例add到画布上;
  • 方法3:在方法2的基础上,group实例也可通过addWithUpdate将图形添加进组里。

上述3种方法使用时对应多种不同的场景,根据当前需求进行选择其中一个方式即可;


方法1:

javascript 复制代码
  const canvas = new fabric.Canvas("c", {
    backgroundColor: "grey",
    width: 1000,
    height: 666,
  });

  const line = new fabric.Line([10, 10, 333, 200], {
    strokeWidth: 1,
    stroke: "yellow",
    id: "linexx",
  });
  const rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 50,
    fill: "pink",
  });


  canvas.add(line);
  canvas.add(rect);

// 然后在画布上通过鼠标多选选中上面的线条和矩形,此时通过canvas.getActiveObject()即可拿到当前激活的图形对象,由于选中了多个,此时拿到的就是activeSelection类型的klass实例数据,然后.toGroup()即可将该两个图形转换为组!
canvas.getActiveObject().toGroup()

方法2 & 3:

javascript 复制代码
  const line = new fabric.Line([10, 10, 333, 200], {
    strokeWidth: 1,
    stroke: "yellow",
  });
  const rect = new fabric.Rect({
    left: 100,
    top: 100,
    width: 100,
    height: 50,
    fill: "pink",
  });

  const group = new fabric.Group([line, rect], {})
  canvas.add(group);

  // 如果画布内的组对象里有某图形A,禁止再将该A图形重复添加进画布!
  // canvas.add(line); // 会导致BUG
    
  // 如果要将某图形添加到已声明的group实例里,则通过 addWithUpdate 方法实现。
  const rect2 = new fabric.Rect({
    left: 300,
    top: 300,
    width: 100,
    height: 50,
    fill: "yellow",
  });
  setTimeout(() => {
    group.addWithUpdate(rect2);
  }, 1000);
相关推荐
灵感__idea5 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡6 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo6 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel6 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld6 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel6 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
繁依Fanyi7 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_456904278 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki8 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构
yinuo8 小时前
UniApp+Vue3多分包引入同一 npm 库被重复打包至 vendor 的问题分析与解决
前端