Implementation of a way of changing the icon / cursor / action of the fabric.js corner controls.
bower install fabric-customise-controls --save
npm install fabric-customise-controls --save
yarn add fabric-customise-controls
Please fetch release 2.0.0-beta or check the next branch
if you support the latest version of fabric.js (from 1.6.0 on and excluding 2.x beta) use at least version 0.1.0 of this extension. Otherwise all older releases have downward compatibility for fabric.js 1.5.0 but of course not all current features. Check the Next branch
Checkout the Next branch where a first version which tries to support fabric 2.x is released. It might not be 100% stable or production ready. PRs always welcome.
http://pixolith.github.io/fabricjs-customise-controls-extension/example/index.html
This is an extension which overwrites certain functions in the fabric.js core to enable you to customise the controls through easy settings in your fabric.js project preserving the opportunity to update the fabric.js libary in the future.
Well, i have felt the need to adapt the fabric.js UI to the project is is put in. Especially special actions and icons for the controls were needed. Since you can't do that without massively hacking the core, it seemed cleaner to create this for future use.
If you want to support the development of this feel free to buy me a beer at https://www.paypal.me/mdslktr. I started this for a former client project of mine and knowing that the need for customisation in fabric.js is rather large especially when put in client branded projects. Today most of my time will be in different projects but actively supporting this extension for future fabric.js releases will still be a goal of mine until it hopefully lands natively in fabric.js itself.
Add customiseControls.js (or its minified version) to your fabric.js project and reference in your html:
<script defer src="../path-to/fabric.min.js"></script>
<script defer src="../path-to/customiseControls.js"></script>
or ES6 import
import fabric from 'fabric';
import 'fabric-customise-controls';
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();
} );
This will overwrite the actions and cursor handler for adding custom actions.
- tl: object
top-left corner passing an object consisting of corner action (see Actions) and cursor (see Cursors)
- cb: function
Callback
currently the following actions are possible:
- drag
- scale
- scaleX
- scaleY
- rotate
- remove (custom)
- moveUp (z-index, custom) since 0.0.3
- moveDown (z-index, custom) since 0.0.3
- rotateByDegrees: int (custom) since 0.0.4 (origin can now be set to anything)
- define your own functions so i don't have to do it since 0.1.2 ( see the example above, returned are always the event and the target for you to use )
Default action is: 'scale'
Since technically the prototype for binding actions in fabric.js is the Canvas which means you won't get custom controls for each object by default. craziduezi came up with the idea of binding fabric.Canvas.prototype.customiseControls to an event handler and changing it on the fly if you need to. This is a nice workaround for something that would otherwise need to be changed in the core. See this link for reference: #28
currently the native cursors are possible as well as a custom cursor url.
Depending on what you set the javascript will detect if you have set an image which needs to be loaded or a native cursor.
Default is: resize direction cursor
fabric.Object.prototype.customiseCornerIcons({
settings: {
borderColor: 'black',
cornerSize: 25,
cornerShape: 'rect',
cornerBackgroundColor: 'black',
cornerPadding: 10
},
tl: {
icon: 'icons/rotate.svg'
},
tr: {
icon: 'icons/resize.svg'
},
bl: {
icon: 'icons/remove.svg'
},
br: {
icon: 'icons/up.svg'
},
mb: {
icon: 'icons/down.svg'
},
// only is hasRotatingPoint is not set to false
mtr: {
icon: 'icons/rotate.svg'
},
}, function() {
canvas.renderAll();
} );
This will overwrite the controls handler (for all Objects) for adding custom icons and corresponding background-shapes and colors (since 0.0.3).
- cornerSize: int
size in pixels of the corner control box
- cornerShape: string ('rect', 'circle')
shape of the corner control box
- borderColor: string (color)
color of the bounding box border (even 'rgba(255, 165, 0, 0.25)' with opacity works)
- cornerBackgroundColor: string (color)
color of the background shape
- cornerPadding: int
inner Padding between icon image and background shape
- tl: object
corner-type passing an object with the desired icon url
- cb: function
Callback
You can also set these settings Object specific using inheritance of this prototype (since 0.0.3):
yourFabricObject.customiseCornerIcons({
settings: {
borderColor: 'black',
cornerSize: 25,
cornerShape: 'rect',
cornerBackgroundColor: 'black',
cornerPadding: 10
},
tl: {
icon: 'icons/rotate.svg'
},
tr: {
icon: 'icons/resize.svg'
},
bl: {
icon: 'icons/remove.svg'
},
br: {
icon: 'icons/up.svg'
},
mb: {
icon: 'icons/down.svg'
},
// only is hasRotatingPoint is not set to false
mtr: {
icon: 'icons/rotate.svg'
},
}, function() {
canvas.renderAll();
} );
Default is: currently not drawing anything but displaying a warning that your image might be corrupt unless cornerShape is set. Then it will draw the Shape and display a console warn about the image url.
You can now set specific options per corner for increased customizability (currently limited to: cornerShape, cornerBackgroundColor, cornerPadding and cornerSize (since 0.3.4)). This works on the prototype like this:
fabric.Object.prototype.customiseCornerIcons({
settings: {
borderColor: 'black',
cornerSize: 25,
cornerShape: 'rect',
cornerBackgroundColor: 'black',
cornerPadding: 10
},
tl: {
icon: 'icons/rotate.svg',
settings: {
cornerShape: 'rect',
cornerBackgroundColor: 'red',
cornerPadding: 10,
// since 0.3.4
cornerSize: 15
},
},
tr: {
icon: 'icons/resize.svg'
},
bl: {
icon: 'icons/remove.svg'
},
br: {
icon: 'icons/up.svg'
},
mb: {
icon: 'icons/down.svg'
},
// only is hasRotatingPoint is not set to false
mtr: {
icon: 'icons/rotate.svg'
},
}, function() {
canvas.renderAll();
} );
For the object-specific settings it works the same, simply putting the settings on the object you want to customise:
yourFabricObject.customiseCornerIcons({
settings: {
borderColor: 'black',
cornerSize: 25,
cornerShape: 'rect',
cornerBackgroundColor: 'black',
cornerPadding: 10
},
tl: {
icon: 'icons/rotate.svg',
settings: {
cornerShape: 'rect',
cornerBackgroundColor: 'red',
cornerPadding: 10,
},
},
tr: {
icon: 'icons/resize.svg',
settings: {
cornerShape: 'circle',
cornerBackgroundColor: '#000',
cornerPadding: 15,
},
},
bl: {
icon: 'icons/remove.svg'
},
br: {
icon: 'icons/up.svg'
},
mb: {
icon: 'icons/down.svg'
},
// only is hasRotatingPoint is not set to false
mtr: {
icon: 'icons/rotate.svg'
},
}, function() {
canvas.renderAll();
} );
Please note that setting this on the prototype for a specific corner will overwrite default settings for each corner, which means that your default config for a specific object will be overwritten by the corner prototype settings. So prototype corner settings are only viable if all objects have the same setup. You can check the newly added example for hints how this might be useful.
You can set the size of the control icons or the border color with the standard setter too if you like, yet it is also included in the function above.
fabric.Object.prototype.set( {
borderColor: '#000000',
cornerSize: 34,
} );
That should be it, feel free to contact me concerning bugs or improvements.
American english can be used too, so calling:
fabric.Object.prototype.customizeCornerIcons
fabric.Canvas.prototype.customizeControls
works too.
There is an example implementation in the example folder, just open the index file and check out how the custom handles look like when applied to the test images. The source for that is also provided in the example.js.
Licensed under the MIT license.