如何在fabric js中为画布上的一个角添加删除图标功能？答案

【问题标题】：How to add a delete icon functionality for one corner on canvas in fabric js?如何在fabric js中为画布上的一个角添加删除图标功能？
【发布时间】：2015-05-06 17:17:54
【问题描述】：

在fabric js中一般物体都有缩放和旋转的属性，如何添加删除功能？

【问题讨论】：

标签： canvas fabricjs

【解决方案1】：

您可以使用.setControlsVisibility 来打开/关闭各个控件：

// make just the top-left control visible (active)
yourFabricElement.setControlsVisibility({
    bl: true,
    br: true,
    tl: false,
    tr: true,
    mt: true,
    mb: true,
});

【讨论】：

@AmruthaGutta，setControlsVisibility 方法在这里解释得很好：fabricjs.com/docs/fabric.Object.html#setControlsVisibility。祝你的项目好运！

【解决方案2】：

我在小提琴中做了一个例子来帮助你解决你的问题，但代码的要点是：

1. which controls we want to see when we select an object
var HideControls = {
            'tl':true, //top left corner is visible
            'tr':false,
            'bl':false,
            'br':false,
            'ml':false,
            'mt':false,
            'mr':false,
            'mb':false,
            'mtr':false
        };


2. a circle object with **only top left corner visible**
 var circle = new fabric.Circle({
                  radius: 20, 
                  fill: 'red', 
                  left: 100, 
                  top: 100
                });
circle.setControlsVisibility(HideControls);
            canvas.add(circle);

3. on mouse:down event we check what we click
canvas.on("mouse:down",function(e){
      var target = canvas.findTarget(e.e);
    console.log('mouse:down');
     //delete object if user clicks on top left corner
    if (target && target.__corner === 'tl') {             
        if (canvas.getActiveObject()) {
            canvas.remove(canvas.getActiveObject());
        }
    }
});

jsfiddle 示例：http://jsfiddle.net/tornado1979/0fbefh52/6/

我创建了三个对象，点击左上角删除对象。祝你好运！

【讨论】：