CODEWITHSUNDEEP
javascriptjqueryhtmlfabricjs
anam
anam

Reputation: 3913

Change selection style of object in fabric.js

I am using fabric plugin in my project.when object is selected we get selected area with with the following design. Can I attached images to selected area with some pic as shown below:-

I set text using ,

hw[i] = new fabric.Text($(this).val(), {
                left : 100,
                top : 100,
                fontSize : 20
            });

Currently , I am getting :

enter image description here

and i wish to get ,

enter image description here

Thanks,

Upvotes: 4

Views: 4716

Answers (1)

AmigaAbattoir
AmigaAbattoir

Reputation: 749

While you cannot do that directly with Fabric JS, someone made an extension for it:

GitHub site: https://github.com/pixolith/fabricjs-customise-controls-extension

Live demo: http://pixolith.github.io/fabricjs-customise-controls-extension/example/index.html)

This will allow you to assign change the handle images and their actions.

After adding the extension you can add something like this: to get the actions

fabric.Canvas.prototype.customiseControls({
    tl: {
        action: 'remove',
    },
    tr: {
        action: 'rotate'
    },
    br: {
        action: 'scaleY',
    },
});

Then change the icons with:

fabric.Object.prototype.customiseCornerIcons({
    settings: {
        borderColor: 'black',
        cornerSize: 25,
        cornerShape: 'circle',
        cornerBackgroundColor: 'black',
        cornerPadding: 10
    },
    tl: {
        icon: 'icon/trashcan.svg'
    },
    tr: {
        icon: 'icon/rotate.svg'
    },
    br: {
        icon: 'icon/scale.svg'
    },
});

Upvotes: 3

Related Questions