fabric.js分组group后文本无法编辑问题

Question

fabric.js中文本和其他元素group组合之后 文本不能选中编辑

Answer 1

在fabric.js中，当一个文本元素和其他元素组合成一个group之后，文本元素默认是不可编辑的。这是因为group元素的默认属性是selectable: false，这会导致group中的所有元素都不可选中和编辑。

要解决这个问题，可以通过设置group元素的selectable属性为true，然后再将文本元素的selectable属性设置为true，这样就可以让文本元素在group中可选中和编辑了。示例代码如下：

var text = new fabric.Text('Hello World', {
  left: 100,
  top: 100,
  selectable: true // 设置文本元素可选中
});

var rect = new fabric.Rect({
  left: 50,
  top: 50,
  width: 100,
  height: 100
});

var group = new fabric.Group([rect, text], {
  selectable: true // 设置group元素可选中
});

canvas.add(group);

这样，当你选中group元素时，文本元素也会被选中，并且可以进行编辑。