Fabric.js 在 setControlsVisibility 功能中添加新选项

Question

我想为我在 canvas 添加的图像添加新图标，就像下面 post 中提到的那样：

$('#remove').on('click', function(){
  canvas.getActiveObject().remove();
});

canvas.on('object:selected', function(o) {
  if (o.target.isType('image')) {
    $('#remove').show();
  }
});

canvas.on('selection:cleared', function() {
    $('#remove').hide();
});

但是，这个解决方案对我不起作用。我想在下面的代码中实现类似的东西： http://jsfiddle.net/tornado1979/0fbefh52/6/

在这里，我想根据我的代码条件显示任何自定义图像。

有什么办法可以实现吗

谢谢

Answer 1

感谢@Durga，

link https://github.com/pixolith/fabricjs-customise-controls-extension 解决了我的问题。

自定义控制选项的方法如下：

    fabric.Canvas.prototype.customiseControls({
    tl: {
        action: 'rotate',
        cursor: 'cow.png'
    },
    tr: {
        action: 'scale'
    },
    bl: {
        action: 'remove',
        cursor: 'pointer'
    },
    br: {
        action: 'moveUp',
        cursor: 'pointer'
    },
    mb: {
        action: 'moveDown',
        cursor: 'pointer'
    },
    mt: {
        action: {
            'rotateByDegrees': 45
        }
    },
    mr: {
        action: function( e, target ) {
            target.set( {
                left: 200
            } );
            canvas.renderAll();
        }
     },
     // only is hasRotatingPoint is not set to false
     mtr: {
        action: 'rotate',
        cursor: 'cow.png'
     },
}, function() {
    canvas.renderAll();
} );

Fabric.js 在 setControlsVisibility 功能中添加新选项

Fabric.js add new option in setControlsVisibility functionality

html5-canvas

fabricjs