Warum erscheint die Form beim Klicken auf ein Canvas-Element, nachdem es entfernt wurde?

Question

Wenn ich das Objekt entferne und auf ein Canvas-Element klicke, wird die entfernte Form wieder angezeigt und ich kann sie auch nicht auswählen.

Answer 1

Sie müssen einen Handler registrieren, um die Objektauswahl auf der Leinwand vorzunehmen, und dann das Objekt entfernen.

Überprüfen Sie die runnable Snippet unten, wenn für Ihre Bedürfnisse funktionieren könnte:

$(function() { 
 
    var canvas = new fabric.Canvas('c') 
 
    var operation = ''; 
 
    var circle = new fabric.Circle({ 
 
    radius: 20, 
 
    fill: 'green', 
 
    left: 100, 
 
    top: 100 
 
    }); 
 

 
    var triangle = new fabric.Triangle({ 
 
    width: 20, 
 
    height: 30, 
 
    fill: 'blue', 
 
    left: 50, 
 
    top: 50 
 
    }); 
 

 
    canvas.add(circle, triangle); 
 
    canvas.on('object:selected', doOperationHandler); 
 

 
    function doOperationHandler() { 
 
    if (operation == 'remove') { 
 
     remove(); 
 
    } 
 
    } 
 

 
    function remove() { 
 
    canvas.remove(canvas.getActiveObject()); 
 
    } 
 

 
    $('#btn_select').on('click', function() { 
 
    operation = ''; 
 
    }); 
 

 
    $('#btn_delete').on('click', function() { 
 
    operation = 'remove'; 
 
    }); 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<canvas id='c'> 
 
</canvas> 
 

 
<button id='btn_select'>Select</button> 
 
<button id='btn_delete'>Delete</button>