删除 Fabric.js canvas 上的多个对象
Removing multiple objects on Fabric.js canvas
努力从结构中移除多个对象canvas。一切似乎都在正常工作,但当代码运行时,它不会从 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 语句中出现的问题之外,这段代码的第一部分应该如何工作
如果您需要任何进一步的信息,请告诉我。
活动组的对象确实在 canvas 上,但是如果它们在活动组中,将它们从 canvas 中移除不会将它们从渲染管道中移除。
当 fabricjs 绘制所有内容时,它会检查 canvas 上的对象和 activeGroup 的存在。如果存在 activeGroup,它的对象将在稍后呈现,无论它们是否在 canvas 上。
所以您实际上是从 canvas 中删除了对象,但是直到您清除活动组的 selection 之前,对象仍然存在。
正确的步骤是从 canvas 和 activeGroup 中删除对象。
检查代码段,select 使用鼠标并按下删除所有按钮的所有对象。
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第2版之后就没有getActiveGroup
了。要删除多个对象,您需要使用forEachObject
。此示例建立在上一个示例的基础上,可以删除单个对象或分组对象。
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.com/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>
努力从结构中移除多个对象canvas。一切似乎都在正常工作,但当代码运行时,它不会从 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 语句中出现的问题之外,这段代码的第一部分应该如何工作
如果您需要任何进一步的信息,请告诉我。
活动组的对象确实在 canvas 上,但是如果它们在活动组中,将它们从 canvas 中移除不会将它们从渲染管道中移除。
当 fabricjs 绘制所有内容时,它会检查 canvas 上的对象和 activeGroup 的存在。如果存在 activeGroup,它的对象将在稍后呈现,无论它们是否在 canvas 上。
所以您实际上是从 canvas 中删除了对象,但是直到您清除活动组的 selection 之前,对象仍然存在。 正确的步骤是从 canvas 和 activeGroup 中删除对象。
检查代码段,select 使用鼠标并按下删除所有按钮的所有对象。
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第2版之后就没有getActiveGroup
了。要删除多个对象,您需要使用forEachObject
。此示例建立在上一个示例的基础上,可以删除单个对象或分组对象。
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.com/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>