如何在 fabric js 中为 canvas 的一个角添加删除图标功能？

Question

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

Answer 1

您可以使用.setControlsVisibility来打开on/off个人控制：

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

Answer 2

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

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/

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

如何在 fabric js 中为 canvas 的一个角添加删除图标功能？

How to add a delete icon functionality for one corner on canvas in fabric js?

canvas

fabricjs