Question

我想为我添加到画布上的图像添加新的图标，就像下面的文章中提到的那样： Add remove icon on image in canvas HTML5 and Fabric js

$('#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，

链接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功能中添加新选项

1 个答案: