Question

大家好，非常感谢你的帮助。

我是fabric.js的新手，我有一个基本的问题。

我在一个函数中创建了一组3个对象。
我想在另一个函数中更改该组对象的属性。

更一般地说，如果有人可以向我解释如何访问群组中的其他对象，那将会非常有用吗？

我不知道该怎么做。

function groupit() //Works {
  var circle1 = new fabric.Circle({
    radius: 50,
    fill: 'red',
    left: 0
  });
  var circle2 = new fabric.Circle({
    radius: 50,
    fill: 'green',
    left: 100
  });
  var circle3 = new fabric.Circle({
    radius: 50,
    fill: 'blue',
    left: 200
  });
  var group = new fabric.Group([ circle1, circle2, circle3 ], {
    left: 200,
    top: 100
  });
  canvas.add(group);
}

function groupchg() //Does not work {
  canvas.setActiveGroup(group);
  group.add(new fabric.Rect({
    left: 100,
    top: 100,
    originX: 'center',
    originY: 'center'
  }));
}

Answer 1

因为您在canvas.setActiveGroup(group);中呼叫function groupchg()，而属性group可能为空。如果从group中定义function groupit()属性，则可以修复。

Answer 2

好的找到解决方案。

要访问组的特定对象，请使用以下代码：

function groupchg() {

//console.log(canvas.getActiveGroup());
canvas.setActiveObject(canvas._objects[0]._objects[1]);
var activeObj = canvas.getActiveObject();
activeObj.setFill('red');
activeObj.set({left: 30,top:150});
canvas.renderAll();
}

Fabric.js访问函数中的组

2 个答案: