Fabric.js - 分组的iText不可编辑

Question

标题说明了所有.当a fabric.IText是a 的一部分时fabric.Group,它不再像可编辑文本那样做出反应.

这是一个用例:http://jsfiddle.net/vAjYd/

有没有办法解决这个问题？否则我必须写上我的小组.

顺便说一句:A fabric.Group有许多优点,但是禁用事件使得无法用于UI元素(即这个用例或按钮组作为文本和组的组).

Answer 1

我可能来不及回答这个问题,但是你们当中很多人都希望我能够找到这个答案.你可以找到一个完美的iText解决方案,用户可以编辑iText的文本,这是fabric.group 工作解决方案的一部分.

接下来的方法是:

1. 当用户双击所需的组时,我们将所有元素取消组合
2. 将重点放在iText元素上
3. 进入iText的编辑模式并选择所有文本,以便用户可以直接开始编辑..

4. 用户退出编辑模式后,元素将再次组合在一起.

   // ungroup objects in group
   var items
   var ungroup = function (group) {
       items = group._objects;
       group._restoreObjectsState();
       canvas.remove(group);
       for (var i = 0; i < items.length; i++) {
           canvas.add(items[i]);
       }
       // if you have disabled render on addition
       canvas.renderAll();
   };
   
   // Re-group when text editing finishes
   var dimensionText = new fabric.IText("Dimension Text", {
       fontFamily: 'Comic Sans',
       fontSize: 14,
       stroke: '#000',
       strokeWidth: 1,
       fill: "#000",
       left: 170,
       top: 60
   });
   dimensionText.on('editing:exited', function () {
       var items = [];
       canvas.forEachObject(function (obj) {
           items.push(obj);
           canvas.remove(obj);
       });
       var grp = new fabric.Group(items.reverse(), {});
       canvas.add(grp);
       grp.on('mousedown', fabricDblClick(grp, function (obj) {
           ungroup(grp);
           canvas.setActiveObject(dimensionText);
           dimensionText.enterEditing();
           dimensionText.selectAll();
       }));
   });
   

Answer 2

目前，IText 无法处理事件，因为如果事件包含在组中，则事件不会传递给它。我认为这也是处理这个问题的首选方法，因为它会让用户感到困惑 - 如果他开始编辑多个文本怎么办。这最终可能会陷入混乱。也许您可以稍微修改一下脚本来解决这个问题。