Question

我正在寻找一种在使用Raphael的打印方法时自动换行文本的方法。我有一些代码，有助于文本方法基于数组中的子字符串换行，并且工作正常：

var t1 = paper.text({text:
      ["Life", "is great", "but it is ", "limited!"]
      , fill:"black", fontSize:"18px"}).selectAll("tspan").forEach(function(tspan, j){
         tspan.attr({x:0, y:25*(j+1)});
      });

我想知道是否有人对如何在打印方法上执行此操作有任何想法？有人在很久以前就提出过以下建议（2010年我猜）：

“为什么不将字符串拆分成多个字符串，并且 print（）每个都连续增加Y偏移量从你的第一行的起点开始？“

请问如何实施？任何想法将不胜感激！

编辑：

@ crockz，我其实想在snap.svg上使用这段代码。我意识到Snap没有\n的支持。如何在代码上替换\n以使其在snap svg上工作呢？任何想法！

Answer 1

一种可能的解决方案是制作一个＆＃34;测试打印＆＃34;使用paper.text然后在需要的地方插入换行符，你必须使用完全相同的字体。

var paper = Raphael(0,0,500,500);
var phrase = "Etiam porttitor risus in ex blandit sodales. Ut cursus mi augue, sit amet interdum diam interdum sit amet. Nunc nec lectus ex. Nulla facilisi. In non sollicitudin elit. Pellentesque finibus suscipit venenatis. In in nibh consequat, mollis ligula quis, dictum sapien. Nullam dapibus nunc eu odio laoreet laoreet. Suspendisse rutrum purus nibh, ac dignissim eros ultricies id. Curabitur ornare pellentesque ligula, eu sodales augue commodo in. Donec tincidunt hendrerit sapien quis dapibus.";
var textBoxWidth = 300;
var words = phrase.split(" ");
var newPhrase = words[0];
var t1 = paper.text(10,50,newPhrase)
  .attr({
    fill: "none",
    stroke:"none",
    "text-anchor":"start",
    "font-size":"18px",
    "font-family":"Arial"});
for(i=1;i<words.length;i++){
    t1.attr({"text":newPhrase + " " + words[i]});
    if(t1.getBBox().width<=textBoxWidth){
        newPhrase += " " + words[i];
    } else {
        newPhrase += "\n" + words[i];
    }
}
var t2 = paper.print(10, 50, newPhrase, paper.getFont("Arial"), 18).attr({fill: "#000"});

http://jsfiddle.net/crockz/bbg4go9q/

更新：

只需将每一行放入一个数组中，然后遍历每一行。

http://jsfiddle.net/crockz/bbg4go9q/1/

如何自动文本换行Raphael打印方法的输出？

1 个答案: