Fabric.js:如何将自定义大小设置为Text或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的框中。有可能做到这一点,怎么做?

德里克

好的,因此,因为不可能,我发现的最佳方法是使用Group将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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何设置Fabric.js?

来自分类Dev

Fabric.js的几何形状

来自分类Dev

使用Fabric lib时,如何在isDrawingMode期间将光标设置为自定义光标文件

来自分类Dev

如何将自定义颜色设置为WindowBackground

来自分类Dev

在Twitter Fabric中使用自定义登录按钮吗?

来自分类Dev

设置Fabric SSH,错误:超时

来自分类Dev

如何在fabric.js的画布上触发自定义事件?

来自分类Dev

如何使Fabric.js IText字体不加粗?

来自分类Dev

Fabric JS父子对象

来自分类Dev

如何激活Fabric js IText的光标?

来自分类Dev

如何将自定义搜寻栏的ProgressDrawable大小设置为小于ProgressBackground

来自分类Dev

Fabric.js如何在不拉伸文本的情况下水平调整IText的大小

来自分类Dev

如何在fabric.js中导出具有自定义属性的SVG?

来自分类Dev

将自定义元数据嵌入Service Fabric应用程序/服务

来自分类Dev

Android Fabric-以自定义间隔发送捕获的异常

来自分类Dev

如何将自定义SSL证书绑定到Service Fabric群集管理终结点?

来自分类Dev

在Hyperledger Fabric中启动自定义网络时出错

来自分类Dev

Fabric.js:如何将自定义大小设置为Text或IText?

来自分类Dev

如何将自定义标记设置为自定义视图?

来自分类Dev

设置Fabric SSH,错误:超时

来自分类Dev

使用Fabric SDK自定义推文视图

来自分类Dev

如何在Fabric中创建自定义帮助菜单?

来自分类Dev

将自定义元数据嵌入Service Fabric应用程序/服务

来自分类Dev

fabric.IText的画布问题

来自分类Dev

Service Fabric的自定义ConfigurationSection实现

来自分类Dev

如何在Itext Fabric JS中删除默认文本

来自分类Dev

Fabric JS中的BringForward

来自分类Dev

Fabric JS 对象缩放

来自分类Dev

画布旋转 - Fabric js

Related 相关文章

热门标签

归档