admin管理员组文章数量:1332706
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);
};
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.
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);
};
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.
Share asked Jan 14, 2016 at 17:33 Max LynnMax Lynn 1,7786 gold badges25 silver badges35 bronze badges2 Answers
Reset to default 4Object 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.
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.
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./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>
After version 2 of fabric.js, there is no getActiveGroup
. To delete multiple objects, you need to use forEachObject
. This example builds on the previous one and can delete single objects or grouped objects.
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 deleteObj(){
var doomedObj = canvas.getActiveObject();
if (doomedObj.type === 'activeSelection') {
// active selection needs a reference to the canvas.
doomedObj.canvas = canvas;
doomedObj.forEachObject(function(obj) {
canvas.remove(obj);
});
}//endif multiple objects
else{
//If single object, then delete it
var activeObject = canvas.getActiveObject();
//How to delete multiple objects?
//if(activeObject !== null && activeObject.type === 'rectangle') {
if(activeObject !== null ) {
canvas.remove(activeObject);
}
}//end else there's a single object
}//end deleteObj
<script src="//cdnjs.cloudflare./ajax/libs/fabric.js/2.4.6/fabric.min.js" ></script>
<input type="button" onClick="deleteObj()" value="remove"/>
<canvas id="canvas" width=400 height=400 style="height:500px;width:500px;"></canvas>
本文标签: javascriptRemoving multiple objects on Fabricjs canvasStack Overflow
版权声明:本文标题:javascript - Removing multiple objects on Fabric.js canvas - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742261670a2442626.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论