2024-07-02 22:31:23 296 0

前端

fabric.js在选中多个object之后，如果执行复制，代码一般这样写：

var all=canvas.getActiveObjects();
                if (all.length) { // 如果有选中的物体
                    var allCopy=[];
                    all.forEach(function(object) { // 遍历选中的物体数组
                        var clonedObject = fabric.util.object.clone(object); // 复制元素

                        clonedObject.left  =  object.left +10; // 水平方向上偏移 10 个像素
                        clonedObject.top  =  object.top +10; // 垂直方向上偏移 10 个像素

                        allCopy.push(clonedObject);
                    });
                    allCopy.forEach(item=>{
                        canvas.add(item);
                    })

                    canvas.discardActiveObject().renderAll(); // 更新画布并取消选中状态
                }else{
                    alert('请选择一个产品')
                }

但是有一个问题，就是算出来的高度会变成负数。

经过计算，这个top与left是相对选中的所有object的中心点来计算的。

于是修改：

var all=canvas.getActiveObjects();
                if (all.length) { // 如果有选中的物体
                    var allCopy=[];
                    all.forEach(function(object) { // 遍历选中的物体数组
                        var clonedObject = fabric.util.object.clone(object); // 复制元素

                        clonedObject.left  = object.group.left+object.left+(object.group.width/2)+10; // 水平方向上偏移 10 个像素
                        clonedObject.top  = object.group.top+object.top+(object.group.height/2)+10; // 垂直方向上偏移 10 个像素

                        allCopy.push(clonedObject);
                    });
                    allCopy.forEach(item=>{
                        canvas.add(item);
                    })

                    canvas.discardActiveObject().renderAll(); // 更新画布并取消选中状态
                }else{
                    alert('请选择一个产品')
                }

同时产生一个问题，复制出来的元素也是相对整体的位置，只有shift+左键选择之后才可以到达预期的位置。

 

最终代码如下，模拟选中一次。

var all=canvas.getActiveObjects();
                if (all.length) { // 如果有选中的物体
                    var allCopy=[];
                    all.forEach(function(object) { // 遍历选中的物体数组
                        var clonedObject = fabric.util.object.clone(object); // 复制元素

                        clonedObject.left  = object.group.left+object.left+(object.group.width/2)+10; // 水平方向上偏移 10 个像素
                        clonedObject.top  = object.group.top+object.top+(object.group.height/2)+10; // 垂直方向上偏移 10 个像素

                        allCopy.push(clonedObject);
                    });
                    allCopy.forEach(item=>{
                        canvas.add(item);
                    })
                    const activeSelection = new fabric.ActiveSelection(allCopy, {
                        canvas: canvas
                    });
                    canvas.setActiveObject(activeSelection);
                    canvas.discardActiveObject().renderAll(); // 更新画布并取消选中状态
                }else{
                    alert('请选择一个产品')
                }