admin管理员组文章数量:1331924
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 ?
Share Improve this question asked Jan 17, 2014 at 13:23 DerekDerek 3431 gold badge2 silver badges10 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
1 Answer
Reset to default 3OK, 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
版权声明:本文标题:javascript - Fabric.js : How to set a custom size to Text or IText? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742233137a2437589.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论