【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);
相关推荐
牧羊狼的狼3 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手5 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
luckys.one5 小时前
第9篇:Freqtrade量化交易之config.json 基础入门与初始化
javascript·数据库·python·mysql·算法·json·区块链
魔云连洲5 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell5 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
weixin_437830947 小时前
使用冰狐智能辅助实现图形列表自动点击:OCR与HID技术详解
开发语言·javascript·ocr
超级无敌攻城狮7 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel7 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip8 小时前
JavaScript事件流
前端·javascript
小菜全8 小时前
基于若依框架Vue+TS导出PDF文件的方法
javascript·vue.js·前端框架·json