Fabric.js:如何将自定义大小设置为Text或IText? [英] Fabric.js : How to set a custom size to Text or IText?

问题描述

我正在使用出色的Fabric.js在画布上绘制一些文本.当我为IText对象指定自定义大小(例如200x200矩形)时，似乎Farbric.js会强制对象的宽度和高度适应文本.

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
});

这里是我的问题的提琴手: http://jsfiddle.net/K52jG/4/

在此示例中，我想要"Hello World！"文字要放在200x200的框中.有可能做到这一点，以及如何做到?

解决方案

确定，因此，由于不可能，我发现的最佳方法是使用组将IText框嵌套在Rectangle对象中

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


});

此小提琴中的示例: http://jsfiddle.net/4HE3U/1/

注意:我必须为文本设置一个"top"值，因为它是开箱即用的.该值似乎是:fontSize/4

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.net/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 ?

解决方案

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.net/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

这篇关于Fabric.js:如何将自定义大小设置为Text或IText?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！