CODEWITHSUNDEEP
fabricjs
Kombye
Kombye

Reputation: 172

Fabric.js: How to remove padding and format selection box? (padding still exists after zoom)

I am trying to format selection border style to look like in inkscape(image left side). I have tried to set the object padding to zero with this:

fabric.Object.prototype.set({
    padding: 0,
});

If I zoom in this is more apparent and padding grows.

Example: Left side inkscape selection box style, right side actual fabric.js selection box

How can i remove the padding?

Here is jsFiddle.

Upvotes: 3

Views: 1789

Answers (1)

Durga
Durga

Reputation: 15604

That's because of stroke width, set strokeWidth:0 to object.

DEMO 

var canvas = window.__canvas = new fabric.Canvas('canvas');
 
var rect = new fabric.Rect({left: 10, top: 10,strokeWidth:0, width: 60, height: 60, fill: 'blue'});

rect.editable = true;
rect.customType = 'shape';
rect.describtion = 'fabric.js rect object';
rect.cornerColor = 'red';
rect.borderColor = 'red';
rect.cornerSize = 8;
rect.padding = 0;

canvas.add(rect);
canvas.setActiveObject(rect);
canvas.setZoom(20);
canvas{
 border:2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

Upvotes: 4

Related Questions