Reputation: 3913
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 :
and i wish to get ,
Thanks,
Upvotes: 4
Views: 4716
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