javascript - 为什么删除 Canvas 元素后单击 Canvas 元素时会出现形状？

Question

当我删除对象并单击 Canvas 元素时，删除的形状会重新出现，并且我也无法选择它。

   var delete = function(){

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

        canvas.remove(canvas.getActiveObject());

    }

Answer 1

您必须注册一个处理程序以在 Canvas 上选择对象，然后删除该对象。

检查下面的可运行代码片段是否可以满足您的需求:

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