javascript - Fabric.js : How to set a custom size to Text or IText? - Stack Overflow

admin管理员组

文章数量:1330639

I am using the excellent Fabric.js to draw some text in a canvas. When I specify a custom size ( let's say a 200x200 rectangle) to my IText Object, it seems that Farbric.js force the width and the height of the object to fit around the text.

var t = new fabric.IText("Hello world !", {
  top: 100,
  left: 100,
  width: 200,
  height:200,
  backgroundColor: '#FFFFFF',
  fill: '#000000',
  fontSize: 12,
  lockScalingX: true,
  lockScalingY: true,
  hasRotatingPoint: false,
  transparentCorners: false,
  cornerSize: 7
});

Here is a Fiddle with my problem : /

In this example, I want the "Hello World!" text to be in a 200x200 box. Is it possible to do that, and how ?

I am using the excellent Fabric.js to draw some text in a canvas. When I specify a custom size ( let's say a 200x200 rectangle) to my IText Object, it seems that Farbric.js force the width and the height of the object to fit around the text.

var t = new fabric.IText("Hello world !", {
  top: 100,
  left: 100,
  width: 200,
  height:200,
  backgroundColor: '#FFFFFF',
  fill: '#000000',
  fontSize: 12,
  lockScalingX: true,
  lockScalingY: true,
  hasRotatingPoint: false,
  transparentCorners: false,
  cornerSize: 7
});

Here is a Fiddle with my problem : http://jsfiddle/K52jG/4/

In this example, I want the "Hello World!" text to be in a 200x200 box. Is it possible to do that, and how ?

• javascript
• fabricjs

Share Improve this question Follow asked Jan 17, 2014 at 13:23 DerekDerek 34311 gold badge22 silver badges1010 bronze badges 4

• Thks @kangax, but it is not exactly what I mean. I want to keep the font size to 12, in a 200x200 IText box. – Derek Commented Jan 19, 2014 at 9:54
• text box depends on font size; you can't change them independently of each other at the moment – kangax Commented Jan 19, 2014 at 17:42
• I want to add a property bringToFront() function how can i add it to the above code.so that my text is always on the top of every object – Anurag Singh Commented Apr 24, 2014 at 17:30
• I also want to set width and height to IText object. but I did not get any solution Yet. If you have found solution, then Please write here. – Mayur Kukadiya Commented May 21, 2020 at 5:42

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

OK, so because it is not possible, the best way I found to is to nest the IText box in a Rectangle object, using a Group

var r = new fabric.Rect({
    width: 200, 
    height: 200, 
    fill: '#FFFFFF',
  });


// create a rectangle object
var t = new fabric.IText("Hello world !", {
  backgroundColor: '#FFFFFF',
  fill: '#000000',
  fontSize: 12,
  top : 3,


});


var group = new fabric.Group([ r, t ], {
  left: 100,
  top: 100,
  lockScalingX: true,
  lockScalingY: true,
  hasRotatingPoint: false,
  transparentCorners: false,
  cornerSize: 7


});

Example in this Fiddle : http://jsfiddle/4HE3U/1/

Note : I have to set a "top" value to the text because it goes out of the box. The value seem to be : fontSize / 4

本文标签： javascriptFabricjsHow to set a custom size to Text or ITextStack Overflow