Question

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

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/

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

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

2 个答案: