캔버스 요소를 클릭 한 후 모양이 나타나는 이유는 무엇입니까?

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>