キャンバス要素をクリックした後にクリックするとシェイプが表示されるのはなぜですか？

Question

オブジェクトを削除してキャンバス要素をクリックすると、削除されたシェイプが再び表示され、それも選択できません。

var delete = function(){ 

     var canvas = document.getElementById("canvas").fabric; 

     canvas.remove(canvas.getActiveObject()); 

    } 

Answer 1

キャンバス上のオブジェクト選択にハンドラを登録してからオブジェクトを削除する必要があります。

チェック、ニーズのために働くことができれば、以下の実行可能なスニペット：

$(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>