gpt4 book ai didi

html - Fabric.js 文本宽度被忽略

转载 作者:搜寻专家 更新时间:2023-10-31 08:10:41 34 4
gpt4 key购买 nike

我正在尝试从表单输入中向 Canvas 添加文本。有没有办法自动换行 fabricjs 文本以适合 Canvas ?

我试图克服 3 个问题:1. 如果字符串长于给定的空间,文本不遵守'text.left' 位置。2. 我无法转义换行符,所以\n 是与文本内联写入的。3. 居中对齐被完全忽略,直到文本被更新。

这是我的织物文本:

var text = new fabric.Text($('#myInput').text(), {
left: 10,
top: 12,
width: 230,
textAlign: 'center',
fontSize: 28,
fontFamily: 'Helvetica Nue, Helvetica, Sans-Serif, Arial, Trebuchet MS'
});

A fiddle显示问题。

<罢工>如何插入换行符?如何居中对齐给定文本 block 中的文本?如何在不进行编辑的情况下将文本 block 放置在 Canvas 上?

编辑:

我发现我的部分问题来自于使用文本输入。我将其更改为文本区域元素,现在可以轻松插入换行符。奇怪的是,当我这样做时居中也有效。

我想唯一的问题是当文本宽度超过给定的文本 block 宽度时,它不会自动换行。因此,它不是环绕和添加线条,而是延伸到 Canvas 之外。

有没有一种方法可以进行自动换行,或者我是否必须计算字符数并插入换行符?

最佳答案

我知道这个很旧,但我遇到了同样的问题。在我的例子中,文本在一个组中,所以我希望它换行到特定宽度,但允许组调整大小(所以我不能使用 TextBox)。我最终对字符串进行了预处理,以便在满足设置的宽度时放置换行符。

 function addTextBreaks(text, width, fontSize) {
text = text.trim();
var words = text.toString().split(' '),
canvas = document.createElement('canvas'),
context = canvas.getContext('2d'),
idx = 1,
newString = '';
context.font = fontSize + 'px Lato';
while (words.length > 0 && idx <= words.length) {
var str = words.slice(0, idx).join(' '),
w = context.measureText(str).width;
if (w > width) {
if (idx == 1) {
idx = 2;
}
newString += words.slice(0, idx - 1).join(' ');
newString += '\n';
words = words.splice(idx - 1);
idx = 1;
}
else { idx += 1;}
}
if (idx > 0) {
var txt = words.join(' ');
newString += txt;
}
return newString;
}

关于html - Fabric.js 文本宽度被忽略,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25142959/

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