I want to know is there a way to change the bounding box icon, I read source code in fabric.js, it generates square box for bounding box, but I want to change it to circle or change to my custom appearance. could you advise me?
I want to know is there a way to change the bounding box icon, I read source code in fabric.js, it generates square box for bounding box, but I want to change it to circle or change to my custom appearance. could you advise me?
Share Improve this question edited Dec 26, 2018 at 14:26 Cœur 38.7k26 gold badges203 silver badges277 bronze badges asked Apr 16, 2013 at 2:13 LindyLindy 2975 silver badges14 bronze badges 1- i know this question is very old and probably out of your interest now, but please get a look and approve it so other users can benefit from this – AndreaBogazzi Commented Jan 28, 2016 at 9:47
3 Answers
Reset to default 9Fastest way to customize controls is to write your own _drawControl function and make it patible with fabricjs standard to override it.
Remember that this function is called 9 times for every render, so try to stay low with code and drawings. Also if you modify the context ( ctx ) remember to use .save and .restore to do not mess up rendering pipeline.
FabricJs will call the function with top and left ready for a rectangle, so the corner will be at top + size/2 and left + size/2, where size is this.cornerSize
function newControls(control, ctx, methodName, left, top) {
if (!this.isControlVisible(control)) {
return;
}
var size = this.cornerSize;
isVML() || this.transparentCorners || ctx.clearRect(left, top, size, size);
ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false);
ctx.stroke();
}
fabric.Object.prototype._drawControl = newControls;
function newControls(control, ctx, methodName, left, top) {
if (!this.isControlVisible(control)) {
return;
}
var size = this.cornerSize;
this.transparentCorners || ctx.clearRect(left, top, size, size);
ctx.beginPath();
ctx.arc(left + size/2, top + size/2, size/2, 0, 2 * Math.PI, false);
ctx.stroke();
}
fabric.Object.prototype._drawControl = newControls;
fabric.Object.prototype.cornerSize = 15;
var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Rect({width:100, height:100, top:50, left:50}));
canvas.setActiveObject(canvas.getObjects()[0]);<script type ="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="400" style="border:1px solid #ccc"></canvas>Check these examples:
http://fabricjs./customization/
Example 2:
var canvas = new fabric.Canvas('c3');
canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.item(0).set({
borderColor: 'red',
cornerColor: 'green',
cornerSize: 6,
transparentCorners: false
});
canvas.setActiveObject(canvas.item(0));
This works for the latest version of fabricjs (4.4 as of now).
You have an example online, http://fabricjs./controls-customization, that allows you to perform basic customization on the controls globally.
Its as simple as:
fabric.Object.prototype.borderColor = 'blue';
to change border color to blue for example.
Another demo, that is dependent on fabricjs 4, http://fabricjs./custom-control-render, has examples that allows you to add custom controls. Just leaving this here for anyone interested.