如何在面料JS中的画布上添加一个角落的删除图标功能

Question

通常在织物j中，对象具有缩放和旋转属性，如何添加删除功能？

Answer 1

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

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

Answer 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/

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