gpt4 book ai didi

javascript - SVG:使用 getComputedTextLength 来换行文本

转载 作者:可可西里 更新时间:2023-11-01 01:59:54 31 4
gpt4 key购买 nike

我试图通过构建文本字符串来换行文本,并使用 getComputedTextLength 来查明文本何时超出允许的宽度。但是,我找不到一种简单的方法来逐步构建将与 getComputedTextLength 一起使用的文本。

总体思路是:

  str = svgDocument.createTextNode(myText[word]); // first word on new line
word++;
obj = text.cloneNode(true); // new text element for this line
obj.appendChild(str);
svgDocument.documentElement.appendChild(obj); // reqd for getComputedTextLength?
for( ; word < myText.length; word++) {
next_width = obj.getComputedTextLength(); // get current line width
if(next_width >= extent)
break;
str += " "; // add next word to the line
str += myText[word];
...
}

谁能告诉我如何让它工作?大概 str 被复制而不是在 obj 中被引用,但我也试过将 obj.removeChild(str)obj. appendChild(str) 在循环中,但是 appendChild 崩溃了。我还尝试了各种组合,包括移动 documentElement.appendChild、删除 obj 并重新附加它,等等。

最佳答案

这应该有效:

    var svgNS = "http://www.w3.org/2000/svg";
var width = 200;

function init(evt)
{
if ( window.svgDocument == null ) {
svgDocument = evt.target.ownerDocument;
}
create_multiline("Whatever text you want here.");
}

function create_multiline(text) {
var words = text.split(' ');
var text_element = svgDocument.getElementById('multiline-text');
var tspan_element = document.createElementNS(svgNS, "tspan"); // Create first tspan element
var text_node = svgDocument.createTextNode(words[0]); // Create text in tspan element

tspan_element.appendChild(text_node); // Add tspan element to DOM
text_element.appendChild(tspan_element); // Add text to tspan element

for(var i=1; i<words.length; i++)
{
var len = tspan_element.firstChild.data.length; // Find number of letters in string
tspan_element.firstChild.data += " " + words[i]; // Add next word

if (tspan_element.getComputedTextLength() > width)
{
tspan_element.firstChild.data = tspan_element.firstChild.data.slice(0, len); // Remove added word

var tspan_element = document.createElementNS(svgNS, "tspan"); // Create new tspan element
tspan_element.setAttributeNS(null, "x", 10);
tspan_element.setAttributeNS(null, "dy", 18);
text_node = svgDocument.createTextNode(words[i]);
tspan_element.appendChild(text_node);
text_element.appendChild(tspan_element);
}
}


}
]]>
</script>

<text x="10" y="50" id="multiline-text"> </text>

它的工作原理是向文本元素添加 tspan 元素,然后向每个元素添加文本。

结果是这样的:

<text>
<tspan>Whatever text</tspan>
<tspan>you want here.</tspan>
</text>

为了使 getComputerTextLength 起作用,您需要先创建 tspan(或文本)元素并确保它在 DOM 中。另请注意,为了将文本添加到 tspan 元素,您需要使用 createTextNode() 并附加结果。

关于javascript - SVG:使用 getComputedTextLength 来换行文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7046986/

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