在 RaphaelJS 中自动将文本换行到一个宽度？

Posted 2023-03-28

【中文标题】在 RaphaelJS 中自动将文本换行到一个宽度？

【英文标题】：Automatically wrap text to a width in RaphaelJS?

【发布时间】：2018-04-29 22:19:30

【问题描述】：

我目前正在尝试使用 RaphaelJS 添加一些动态添加的文本。我希望文本在 200 像素处中断，然后在下一行继续。就像您在 html 中有一个具有宽度的常规 DIV。

https://jsfiddle.net/qLvuztcy/

我尝试过类似的方法：

.text 
    width: 200px;
    max-width: 200px; //and this

但不幸的是，它不是这样工作的。有谁知道我怎么能做到这一点？我知道在文本中添加\n 会换行，但我不确定如何实现我想要的。

【参考方案1】：

SVG 没有自动文本换行。反正在当前版本中没有。

您必须自己将文本分成几行。或者，如果您在浏览器中显示 SVG，您可以选择在 SVG 中嵌入 HTML。您可以使用<foreignObject> 元素来做到这一点。

我不确定 Raphael 是否有用于创建 foreignObject 元素的 API。您需要进行调查。

【讨论】：

我不能接受或赞成这个作为答案，因为它不能回答我的问题。我找到了Snap.svg 的解决方法，我已经实施并且现在正在测试。我会发布一个答案。

现在您将其标记为与完全不同的库的副本。干得好，保罗。字面意思。

很好。你去吧。快乐的？我将其标记为重复，因为答案几乎相同，并且我相信其他人应得的荣誉。我还注意到，尽管您的回答完全符合我所说的，但您出于恶意拒绝了我。

如果您打算与大多数浏览器兼容，那么您最不想做的事情是使用<foreignObject>。我对您投了反对票，因为您的回答没有给我任何新信息。我知道 SVG 没有文字换行。我知道我可能不得不通过遍历所有行来做到这一点。我知道不使用<foreignObject>，尽管你这么说。您显然对 Raphael 文本换行一无所知，这就是我对您的评论投反对票的原因。

你肯定知道很多事情。遗憾的是您在问题中没有提及任何内容。

【参考方案2】：

I found an answer 用于 Snap.svg，我对其进行了一些修改。但是，它可以完美运行。

function text(x, y, txt, max_width, element_class) 
    var abc = "abcdefghijklmnopqrstuvwxyzæøåABCDEFGHIJKLMNOPQRSTUVWXYZÆØÅ";
    var temp = rsr.text(50, 50, abc);
    temp.node.classList.add("text");
    var letter_width = temp.getBBox().width / abc.length;
    temp.remove();

    var heights = [];

    var loopLines = txt.split("\n");
    for (j = 0; j < loopLines.length; j++) 
        var words = loopLines[j].split(" ");
        var width_so_far = 0,
            current_line = 0,
            lines = [''];
        for (var i = 0; i < words.length; i++) 
            var l = words[i].length;
            if (width_so_far + (l * letter_width) > max_width) 
                lines.push('');
                current_line++;
                width_so_far = 0;
            
            width_so_far += l * letter_width;
            lines[current_line] += words[i] + " ";
        

        if (j > 0) 
            y += heights[j - 1];
        

        lines = lines.join("\n");
        var t = rsr.text(x, y, lines);
        $(t.node).find("tspan").attr("dy", "1.2em");
        t.node.classList.add(element_class);
        heights.push(t.getBBox().height);
    

需要 jQuery，因为我正在使用 jQuery 执行 find("tspan")（也可以，因为我也在其他地方使用它）。

我已对其进行了修改，现在您的字符串中也支持\n。