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

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

在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元素时，文本元素也会被选中，并且可以进行编辑。

组合的时候给所有的的文本框添加监听点击事件
组合selectable: true
文本框editable: true
解组的时候别忘了移除文本框的监听事件

事件

fun (options) {
let tb = options.subTargets[0]
      let group = options.target
      var mCanvas = this.canvas.viewportTransform
      let mObject = tb.calcTransformMatrix()
      let mTotal = fabric.util.multiplyTransformMatrices(mCanvas, mObject)
      let trans = fabric.util.qrDecompose(mTotal)
      // 克隆一个到点击的文本框位置
      let tempText = new fabric.util.object.clone(tb)
      let that = this
      tempText.on('editing:exited', () => {
        // 编辑结束后删除克隆的 同时把内容赋值给点击的组合中的文本框
        tb.set({
          text: tempText.text,
          visible: true,
        })
        // 计算文本编辑后是否超出组合区域 组合中元素的left以组合中线为0 左负右正
        let isOverFlow = ((group.width / 2 + tb.left) + tb.width) - group.width
        if (isOverFlow > 0) {
          // 超出后更新组合宽度
          group.set({
            width: group.width + isOverFlow
          }).setCoords()
          // 宽度的更新是向左右俩边各添加一半 所以组合中的元素的left需要减去一半
          for (let i = 0; i < group._objects.length; i++) {
            group._objects[i].set({
              left: group._objects[i].left - isOverFlow / 2
            })
          }
        }
        that.canvas.remove(tempText)
        that.canvas.renderAll()
}