删除后,为什么在单击canvas元素时会出现形状?

时间:2016-09-22 12:46:10

标签: javascript html5-canvas fabricjs

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

   var delete = function(){

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

        canvas.remove(canvas.getActiveObject());

    }

1 个答案:

答案 0 :(得分:1)

您必须在画布上注册一个处理程序到对象选择,然后删除该对象。

检查下面的runnable片段是否可以满足您的需求:



$(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>
&#13;
&#13;
&#13;