gpt4 book ai didi

javascript - 如何确定 SVG 文本框宽度,或在 'x' 个字符后强制换行?

转载 作者:技术小花猫 更新时间:2023-10-29 11:45:08 24 4
gpt4 key购买 nike

我正在使用 Raphael 库创建一个 SVG 文本框,并用从 XML 文档中提取的动态字符串填充它。

有时,这个字符串比我放置文本框的 Canvas 长,所以我需要限制框的宽度,这本身会强制换行(我找不到任何证据表明这是可能的) 或确保在一定数量的字符后插入 '\n' 换行符。

那么 (1) 这是最好的选择吗? (2) 我该怎么做?

最佳答案

文本换行没有属性,但您可以使用一个简单的技巧。一次向文本对象添加一个单词,当它变得太宽时,添加一个换行符。您可以使用 getBBox() 函数来确定宽度。基本上,您模拟的是老式打字机。下面是一些可以为您执行此操作的代码示例。您可以轻松地将其转换为一个简单的函数,该函数接受文本和宽度。

var r = Raphael(500, 500);
var t = r.text(100, 100).attr('text-anchor', 'start');
var maxWidth = 100;

var content = "Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. ";
var words = content.split(" ");

var tempText = "";
for (var i=0; i<words.length; i++) {
t.attr("text", tempText + " " + words[i]);
if (t.getBBox().width > maxWidth) {
tempText += "\n" + words[i];
} else {
tempText += " " + words[i];
}
}

t.attr("text", tempText.substring(1));

关于javascript - 如何确定 SVG 文本框宽度,或在 'x' 个字符后强制换行?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3142007/

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