CODEWITHSUNDEEP
jqueryhtmlcanvasfabricjsspacing
VIVEK-MDU
VIVEK-MDU

Reputation: 2559

How to reduce selection area padding in text object in fabric js

Here, we have working in fabric.js with creating design tool.We need to reduce padding for selection area in text object in fabric js. Canvas object text is highlighted/selected and although it is as big as the original size, the selected box stretches over the working area.This is not as user friendly to handle this issue.How to reduce selection area padding size in canvas object. we have tried to added padding in "Canvas.set()" function but it is not response/change in working area.

objss.set({
 borderColor: 'green',
 cornerColor: 'purple',
 CornerSize: 33,
 transparentCorners: false,
 strokeWidth: 10,
padding:4
});

enter image description here

Any help would be appreciated.

Upvotes: 1

Views: 2678

Answers (3)

dime_coder
dime_coder

Reputation: 11

fabric not have any default options or methods to remove vertical extra space in text, you can convert the text into image object & then render the image object without vertical extra space. You can use canvas.toDataURL() method to convert text into imageobject.

Upvotes: 1

kunal shaktawat
kunal shaktawat

Reputation: 1520

if your selected box not properly your set on text it's means that your text load before FONT. See fabrics js example to use font. http://fabricjs.com/loadfonts

if you still facing any problem then clear your font cache like this.

fabric.util.clearFabricFontCache(obj.fontFamily); // obj.fontFamily - is your font name

Full Example when you load from json

this.canvas.getObjects().forEach((obj)=> {
  if(typeof obj.type !== 'undefined' && obj.type=="i-text"){
    this.canvas.setActiveObject(obj);
    fabric.util.clearFabricFontCache(obj.fontFamily);
    this.canvas.getActiveObject().set("fontFamily", obj.fontFamily);
    this.canvas.renderAll();
  }
});

Upvotes: 1

Sophie D
Sophie D

Reputation: 465

I made a small jsfiddle, where in 2 simple text-objects the padding (and therefor the selected box) is set in 2 different sizes: http://jsfiddle.net/z4fty1de/ is this what you wanted to know? If not, can you create a small example on jsfiddle? 

canvas.add(new fabric.Text('hello world1', { left: 100, top: 100, padding: 43 }));
canvas.add(new fabric.Text('hello world2', { left: 100, top: 250, padding: 0 }));

Upvotes: 2

Related Questions