javascript - Fabric js canvas.remove() 不删除对象

Question

所以我在尝试为我的应用程序实现撤消功能的过程中遇到了一个问题，撤消功能有效，但是它要么是 canvas.remove() 由于某种原因不起作用，要么是对象不起作用:删除事件未触发。为了确保该对象确实存在，我console.log它并且果然它确实存在..但是fabric js不会删除该对象，也不会触发该对象:已删除(显然)

canvas.on('object:added',function(){
   h = [];
});
 function undo(){
    if(canvas._objects.length>0){
        console.log(h);
        h.push(canvas._objects.pop());
        var lastItem = h[h.length - 1];
        //Logs the object - check the screenshot
        console.log(lastItem);
        canvas.remove(lastItem);
        canvas.renderAll();
    }
}
 $("#undo").click(function()
{
    undo();
});
 //Not firing even though i removed the object..
  canvas.on('object:removed',function(object)
{
   console.warn(object);
});

Answer 1

如果您使用 canvas.remove() 删除对象，则只会触发 'object:removed' 事件。

演示

var canvas = new fabric.Canvas('canvas');
canvas.add(new fabric.Circle({
 left:50,top:50,radius:50,fill:'red'
}))
canvas.add(new fabric.Circle({
 left:150,top:150,radius:50,fill:'green'
}))
canvas.add(new fabric.Circle({
 left:250,top:250,radius:50,fill:'blue'
}))
canvas.add(new fabric.Rect({
 left:250,top:150,width:100,height:100
}));
canvas.requestRenderAll();

function undo(){
 var object = canvas.item(canvas.getObjects().length-1);
 canvas.remove(object);
}

canvas.on('object:removed',function(object){
  console.warn(object);
})

canvas{
 border:2px solid #000;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick='undo()'>undo</button>
<canvas id='canvas' width=500 height=400>