gpt4 book ai didi

javascript - Fabric .js : How to make the text in a shape to render new line?

转载 作者:行者123 更新时间:2023-12-03 09:43:11 30 4
gpt4 key购买 nike

我正在尝试使用 fabricJS 在 Canvas 上创建一个文本框。我在 Fabric official website 上找到了一个演示.

我为它创建了一个新类,这是我的代码:

 fabric.Writebox = fabric.util.createClass(fabric.Rect, {
type: 'writebox',
initialize: function(element, options) {
this.callSuper('initialize', element, options);
options && this.set('lockUniScaling', options.lockUniScaling);
options && this.set('label', options.label || '');
},
toObject: function() {
return fabric.util.object.extend(this.callSuper('toObject'), {
label: this.label,
lockUniScaling: this.lockUniScaling
});
},
_render: function(ctx) {
this.callSuper('_render', ctx);
ctx.font = '20px Times';
ctx.fillStyle = '#333';
ctx.fillText(this.label, -this.width / 2 + 4, -this.height / 2 + 20);
}
});

这就是我在 Canvas 上渲染/添加的方式:

var theString="Testing the text \n And This is a new line";
$("#textlen").html(theString);
var theWidth = $("#textlen").width();
alert(theWidth);
var labeledRect = new fabric.Writebox({
width: 300,
height: 50,
left: 300,
top: 100,
label: theString,
fill: '#faa',
stroke: 1
});

但是当 labeledRect 在 Canvas 上渲染时,矩形内的文本不会显示为两行。有人对此有解决方案吗?谢谢!

最佳答案

我看过一些代码,其中文本是用 '\n' 估算的你可以试试

关于javascript - Fabric .js : How to make the text in a shape to render new line?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20277268/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com