拉斐尔JS文本沿路径 [英] Raphael JS Text Along path

问题描述

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

I am looking for an example or some confirmation on a concept. Looking to use Raphael JS on an app and want to be able to warp text similar to how graphic design applications such as Illustrator do.

推荐答案

使用path.getPointAtLength并不太困难，正如Kevin Nielsen建议的那样：

This isn't too difficult using path.getPointAtLength, as Kevin Nielsen suggests:

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)});
}

jsFiddle

这篇关于拉斐尔JS文本沿路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！