Fabric.js add new option in setControlsVisibility functionality

Question

I want to add new Icon for images I add on canvas, just like mentioned in following post: 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();
});

But, this solution can not work for me. I want to achieve something like done in following code: http://jsfiddle.net/tornado1979/0fbefh52/6/

Here, I want to display any custom Image based on my code conditions.

Is there any way to achieve this.

Thanks

Answer 1

Thanks @Durga,

The link https://github.com/pixolith/fabricjs-customise-controls-extension has solved my problem.

Following is the way to customise the control options:

    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();
} );