Javascript 拉斐尔JS沿路径的文本

我正在寻找一个例子或一些对一个概念的确认。希望在应用程序上使用Raphael JS，并希望能够像Illustrator这样的平面设计应用程序那样扭曲文本

---

正如凯文·尼尔森所建议的那样，使用path.getPointAtLength并不难：

path = paper.path("M50,100c40,-50 270,50 300,0").attr("stroke", "#CCC");
message = "I want to do this in RaphaelJS";

//since not every letter is the same width, get the placement for each letter 
//along the length of the string
//however, Raphael appears to group the width of letters into intervals of 4px,
//so this won't be perfect        
for (; c < message.length; c += 1) {
        letter = paper.text(0, 0, message[c]).attr({"text-anchor" : "start"});
    letters.push(letter);
    places.push(message_length);
    //spaces get a width of 0, so set min at 4px
    message_length += Math.max(4, letter.getBBox().width);
}

ratio = path.getTotalLength() / message_length;
fontsize = 10 * ratio;

for (c = 0; c < letters.length; c += 1) {
    letters[c].attr("font-size", fontsize + "px"); 
    p = path.getPointAtLength(places[c] * ratio);
    //there does appear to be a bug in p.alpha around 180. Here's the fix
    letters[c].attr({ x: p.x, y: p.y, transform: 'r' + (p.alpha < 180 ? p.alpha + 180 : p.alpha)});
}

path=paper.path（“M50100C40，-50270,50300,0”）.attr（“stroke”，“#CCC”）；
message=“我想在RaphaelJS中这样做”；
//由于并非每个字母的宽度都相同，因此请获取每个字母的位置
//沿着绳子的长度
//然而，拉斐尔似乎将字母的宽度分成4px的间隔，
//所以这并不完美
对于（；c

---

以下是Chris Wilson代码的改编版本，作为一个插入式函数进行了重构，并添加了以下功能：

• IE8/VML模式支持和Gecko/Firefox支持（通过定义旋转原点-如果没有旋转原点，IE8和Firefox会在页面上乱扔文本）
• 对Gecko浏览器（例如，Firefox）中的文本进行一个小的调整，使其不那么难看——如果不这样做，这些浏览器会任意增加字母间距
• 支持手动定义的字体大小和字母间距，以及动态的“填充路径”大小和间距
• 支持手动字距调整（按字符微调字母间距）。路径上的文本通常会创建非常难看的字母空格；这允许您通过以下方式定义手动调整以修复这些问题：
  • 字符串中的数字位置，或
  • 性格，或者
  • 字符对（应用于基于前面字符的字符实例，例如，下面的示例收紧“ae”对并加宽“rn”对）

函数textOnPath（消息、路径、字体大小、字母间距、字距、geckoKerning）{
//仅需要消息和路径，其他参数是可选的
//如果fontSize或letterSpacing未定义，则计算它们以填充路径
//字体大小的10%通常适用于手动字体间距
//Gecko，即Firefox等，会膨胀并改变字母间距
var gecko=/rv:（[^\）]+）\）gecko\/\d{8}/.test（navigator.userAgent | | |“”）true:false；
变量字母=[]，位置=[]，消息长度=0；
for（var c=0；c360？p.alpha-360:p.alpha）+'，'p.x+'，'p.y；
字母[c].attr（{x:p.x，y:p.y，transform:rotate}）；
}
}

这是从2010年开始的：谢谢CM Kanode。我在打猎的时候发现了这个。它没有显示将文本定向到路径的概念。我在这里非常懒惰，你会认为指向路径只是一个简单的数学问题，还是你的链接示例证明了方向在Raphael中是个问题？看看这个-作者声称他添加了textPath支持。只是为了SVG，我没有深入研究它。只是简单地看一下这个看似合理的概念。顺便说一句，我倾向于认为它需要大量的手工调整。希望上面Andrei提到的fork提供了您正在寻找的解决方案。我只使用Raphael，使用

print

和

path.getPointAtLength

完成了类似的操作。我似乎记得在

alpha

属性中有一个bug，当路径通过PI/2时，必须对该bug进行纠正，但它非常有用。只是想澄清一下：单个字符没有扭曲；倾斜只需通过完整字符的平移和旋转来完成。不错的方法，+1，但在我的测试中，这只在Webkit（Chrome、Safari等）和IE9+中有效。在Firefox和IE8中，文本被抛出，不遵循路径。我已经贴了一张改编过的照片

function textOnPath( message, path, fontSize, letterSpacing, kerning, geckoKerning) {
    // only message and path are required, other args are optional
    // if fontSize or letterSpacing are undefined, they are calculated to fill the path
    // 10% of fontSize is usually good for manual letterspacing

    // Gecko, i.e. Firefox etc, inflates and alters the letter spacing
    var gecko = /rv:([^\)]+)\) Gecko\/\d{8}/.test(navigator.userAgent||'') ? true : false;

    var letters = [], places = [], messageLength = 0;
    for (var c=0; c < message.length; c++) {
        var letter = paper.text(0, 0, message[c]).attr({"text-anchor" : "middle"});
        letters.push(letter);

        if (kerning) {
            if(gecko && geckoKerning) {
                kerning = geckoKerning;
            }
            var character = letter.attr('text'), kern = 0;
            var predecessor = letters[c-1] ? letters[c-1].attr('text') : '';

            if (kerning[c]) {
                kern = kerning[c];
            } else if (kerning[character]) {
                if( typeof kerning[character] === 'object' ) {
                    kern = kerning[character][predecessor] || kerning[character]['default'] || 0;
                } else {
                    kern = kerning[character];
                }
            }
            if(kerning['default'] ) {
                kern = kern + (kerning['default'][predecessor] || 0);
            }            
            messageLength += kern;
        }

        places.push(messageLength);
        //spaces get a width of 0, so set min at 4px
        messageLength += Math.max(4.5, letter.getBBox().width);
    }

    if( letterSpacing ){
        if (gecko) {
            letterSpacing = letterSpacing * 0.83;
        }
    } else {
        letterSpacing = letterSpacing || path.getTotalLength() / messageLength;
    }
    fontSize = fontSize || 10 * letterSpacing;

    for (c = 0; c < letters.length; c++) {
        letters[c].attr("font-size", fontSize + "px");
        p = path.getPointAtLength(places[c] * letterSpacing);
        var rotate = 'R' + (p.alpha < 180 ? p.alpha + 180 : p.alpha > 360 ? p.alpha - 360 : p.alpha )+','+p.x+','+p.y;
    letters[c].attr({ x: p.x, y: p.y, transform: rotate });
    }
}