删除Fabric.js画布上的多个对象 [英] Removing multiple objects on Fabric.js canvas

问题描述

努力从布料画布中删除多个对象。一切似乎都处于正常工作状态，但是当代码运行时，它不会从画布中删除多个选定的对象。

Struggling to remove multiple objects from the fabric canvas. Everything seems to be in working order but when the code runs it does not remove the multiple selected objects from the canvas.

    service.deleteSelectedObject = function () {
        var selectedObject = service.canvas.getActiveObject();
        var selectedMultipleObjects = service.canvas.getActiveGroup();
        var data = {};

        // get object id
        // get selected objects from canvas

        if (selectedObject) {
            data = {
                type: 'whiteboard::delete',
                id: selectedObject.id
            };

            delete service.objectMap[selectedObject.id];
            service.canvas.remove(selectedObject);
        } else {
            data = {
                type: 'whiteboard::delete',
                object: selectedMultipleObjects
            };
            console.log(selectedMultipleObjects);
            selectedMultipleObjects._objects.forEach(function (object, key) {
                console.log(object);
                service.canvas.remove(object);
            });
        }

        signalService.sendMessage(service.recipient, data);
    };

我应该指出所有这些控制台日志确实传递了应有的内容。除了在else语句中出现问题之外，此代码的第一部分将如何工作

I should point out that all of these console logs do pass what they should. As well as the problem is occuring in the else statement the first part of this code works how it should

如果您需要任何进一步的信息，请告诉我。

please let me know if you need any further information.

推荐答案

活动组的对象确实在画布上，但是从画布中删除它们不会将它们从渲染管道中移除在活动组中。

Object of active group are indeed on the canvas but removing them from canvas will not remove them from the rendering pipeline if they are in active group.

当fabricjs绘制所有内容时，它会检查画布上的对象和activeGroup的存在。如果存在activeGroup，它的对象将在以后呈现，无论它们是否在画布上。

When fabricjs draws everything, it checks for object on canvas and presence of activeGroup. If activeGroup is present, its objects get rendered later, regardless they are on canvas or not.

所以你实际上是从画布中删除对象，但是直到你清除选择活动组，对象仍然存在。
正确的过程是从画布和activeGroup中删除对象。

So you are effectively removing the objects from the canvas, but untill you clear the selection of the active group, the objects are still there. Correct procedure is removing the object from the canvas and from the activeGroup.

检查片段，用鼠标选择所有对象，然后按下全部删除按钮。

check the snippet, select all objects with mouse and the press remove all button.

var canvas = new fabric.Canvas('canvas');
var r1 = new fabric.Rect({width:50,height:50});
var r2 = new fabric.Rect({width:50,height:50,top:110, left:110});
var r3 = new fabric.Rect({width:50,height:50,top:60, left:60});
canvas.add(r1,r2,r3);

function removeAll() {
var o = canvas.getActiveGroup();
o._objects.forEach(function (object, key) {
canvas.remove(object);
o.removeWithUpdate(object);
});
canvas.discardActiveGroup();
canvas.renderAll();
}

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.13/fabric.min.js" ></script>
<input type="button" onClick="removeAll()" value="remove"/>
        <canvas id="canvas" width=400 height=400 style="height:500px;width:500px;"></canvas>

这篇关于删除Fabric.js画布上的多个对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！