Question

我的Fabric应用程序需要一项功能，该功能允许用户编辑组内的文本框。我几乎可以正常工作了。就目前而言，这就是我的应用程序的工作方式：

点击一个组
检查是否单击文本框。如果是...
取消分组分组
将焦点设置在文本框中，以便用户可以进行编辑。
在“编辑：退出”上，将对象重新分组

这里是我的代码的小提琴： https://jsfiddle.net/1dr8jn26/4/

执行以下操作以复制我的问题：

使用顶部的按钮添加2个输入框
使用顶部的按钮对输入框进行分组
在创建的组中的输入框之一上单击一次
点击组外的画布
单击同一输入框
再次单击组外的画布
重复5和6

您会注意到，该小组在页面的一侧创建了自己的副本。我自己发现的东西：

“ object.on（'editing：exited ...是不断出现的问题。
如果您单击一个输入框而不是另一个输入框，则“复制计数器”将重置。
当重复项出现时，如果单击其中一些，它们就会消失。

对于编程我还是一个相对较新的人，所以我相信这对于这里的经验丰富的编码人员来说是显而易见的。任何帮助，将不胜感激！

canvas.on('mouse:down', function(options) {
if (options.target) {
    var thisTarget = options.target; 
    var mousePos = canvas.getPointer(options.e);
    if (thisTarget.isType('group')) {
       var groupPos = {
            x: thisTarget.left,
            y: thisTarget.top
        }
var currentGroup = [];
var groupItems = []
groupItems = thisTarget._objects;
thisTarget.forEachObject(function(object,i) {
currentGroup[i] = object;
currentGroup.push(object);
})
        thisTarget.forEachObject(function(object,i) {
         if(object.type == "textbox"){            
 console.log("Start for statement that finds the x and y for each 
object")            
var matrix = thisTarget.calcTransformMatrix()
var newPoint = fabric.util.transformPoint({y: object.top, x: 
object.left}, matrix)
            var objectPos = {
                xStart: newPoint.x,
                xEnd: newPoint.x + object.width,
                yStart: newPoint.y,
                yEnd: newPoint.y + object.height
            }
            if (mousePos.x >= objectPos.xStart && mousePos.x <= 
(objectPos.xEnd)) {
                if (mousePos.y >= objectPos.yStart && mousePos.y <= 
objectPos.yEnd) {
function ungroup (group) {
groupItems = group._objects;
group._restoreObjectsState();
canvas.remove(group);
for (var i = 0; i < groupItems.length; i++) {
    canvas.add(groupItems[i]);
}
canvas.renderAll();
};
ungroup(thisTarget)
canvas.setActiveObject(object);
object.enterEditing();
object.selectAll();
object.on('editing:exited', function (options) {
var items = [];
groupItems.forEach(function (obj) {
    items.push(obj);
    canvas.remove(obj);
});
console.log(JSON.stringify(groupItems))
var grp = new fabric.Group(items, {});
canvas.add(grp);   
                  });
                }
            }
        }
        });   
      }    
   }
});

-克里斯

Answer 1

一直在查看代码，我想我找到了解决方案。该组在组groupItems中添加了两次。在开始时一次，在取消项目分组时第二次。

在您的小提琴中使用了下面的代码，并且可以正常工作...

canvas.on('mouse:down', function(options) {
var groupItems;
if (options.target) {
    var thisTarget = options.target; 
    var mousePos = canvas.getPointer(options.e);
    var editTextbox = false;
    var editObject;

    if (thisTarget.isType('group')) {
        var groupPos = {
            x: thisTarget.left,
            y: thisTarget.top
        }

        thisTarget.forEachObject(function(object,i) {
            if(object.type == "textbox"){           
                var matrix = thisTarget.calcTransformMatrix();
                var newPoint = fabric.util.transformPoint({y: object.top, x: object.left}, matrix);
                var objectPos = {
                    xStart: newPoint.x - (object.width * object.scaleX) / 2,//When OriginX and OriginY are centered, otherwise xStart: newpoint.x - object.width * object.scaleX etc...
                    xEnd: newPoint.x + (object.width * object.scaleX) / 2,
                    yStart: newPoint.y - (object.height * object.scaleY) / 2,
                    yEnd: newPoint.y + (object.height * object.scaleY) / 2
                }

                if ((mousePos.x >= objectPos.xStart && mousePos.x <= objectPos.xEnd) && (mousePos.y >= objectPos.yStart && mousePos.y <= objectPos.yEnd)) {
                    function ungroup (group) {
                        groupItems = group._objects;
                        group._restoreObjectsState();
                        canvas.remove(group);
                        for (var i = 0; i < groupItems.length; i++) {
                            if(groupItems[i] != "textbox"){
                                groupItems[i].selectable = false;
                            }                               
                            canvas.add(groupItems[i]);
                        }
                        canvas.renderAll();
                    };

                    ungroup(thisTarget);
                    canvas.setActiveObject(object);

                    object.enterEditing();
                    object.selectAll();

                    editObject = object;
                    var exitEditing = true;

                    editObject.on('editing:exited', function (options) {
                        if(exitEditing){
                            var items = [];
                            groupItems.forEach(function (obj) {
                                items.push(obj);
                                canvas.remove(obj);
                            });

                            var grp
                            grp = new fabric.Group(items, {});
                            canvas.add(grp);
                            exitEditing = false;
                        }
                    });
                }
            }
        });
    }    
}
});

这是小提琴：https://jsfiddle.net/u3Lfnja2/1/

如何在Fabric.js中的组中编辑文本框

1 个答案: