在Raphaël的路径上附加文字？ [英] Attach text on path in Raphaël?

问题描述

有谁知道如何在Raphaël的路径附加一个文本？像 http://www.w3.org/TR/SVG11/ image / text / toap02.svg
我知道jQuery SVG可以做到这一点，但是我找不到一个简单的方法来使用Raphaëljs。

解决方案

有两种方法可以做到这一点。

1. 更简单的方法是使用Raphael .print（） 方法。这可以将文本转换为路径。每个字符都有自己的路径。然后，您可以遍历每个字符，并使用 .translate（） 和 .angle（） ：//www.w3.org/TR/SVG/text.html#TextOnAPath> SVG 和 VML ，用于Raphael .text（） 。




这里是方法1的一个快速和粗略的开始，没有使用 .print（）和 此字体 ：

  window.onload = function（）{
 var i，newP，
 R = Raphael（canvas，500,400），
 
 //创建我们的字母路径集
t = R.print ，this is a test，R.getFont（whoa），30），
 
 //创建跟随路径
p = R.path（M 50 100 C 100 50 150 0 200 50 C 250 100 300 150 350 100+ 
C 400 50 450 50 450 50。attr（stroke，none），
 pLen = p.getTotalLength ），//跟随的路径长度
 tLen = t.length，//字符数量
 oneL = pLen / tLen; //平均长度为1个字符
 //也可以为每个字符使用.getBBox（）
 
 //定位每个字符
 for（i = 0; i< ; tLen; i ++）{
 
 //获取要跟随的路径的x，y 
 newP = p.getPointAtLength（i * oneL）; 
 
 //移动字母
 t [i] .translate（（i * oneL）-newP.x，newP.y）; 
 t [i] .attr（fill，Raphael.getColor（））; 
} 
}; 
  





尝试使用此jsFiddle

注意：上述代码非常粗糙，有一些重要的定位问题，但我认为一般的方法是把文本放在Raphael的路径。

Does anyone know how to attach a text to a path in Raphaël? Something like http://www.w3.org/TR/SVG11/images/text/toap02.svg I know that jQuery SVG can do that, but I can't find an easy way to do this by using Raphaël js. I want to attacht this text to a bezier curve and move it.

解决方案

There are 2 ways to do this.

1. The easier way is to make use of the Raphael .print() method. This can turn text into paths. Each character gets its own path. Then you can iterate over each character and move and rotate it appropriately using .translate() and .angle().

2. The harder way is to implement text on path for both SVG and VML for a Raphael .text().

Here's a quick and rough start for Method 1 with no rotation using .print() and this font:

window.onload = function() {
    var i, newP,
        R = Raphael("canvas",500,400),

          // Create our set of letter paths
        t = R.print(100, 0, "this is a test", R.getFont("whoa"), 30),

          // Create the path to follow
        p = R.path("M 50 100 C 100 50 150 0 200 50 C 250 100 300 150 350 100" +
                   " C 400 50 450 50 450 50").attr("stroke", "none"),
        pLen = p.getTotalLength(), // Length of path to follow
        tLen = t.length,           // Number of characters
        oneL = pLen/tLen;          // Average length of 1 character
          // You can also use .getBBox() for each character instead       

      // Position each character
    for (i = 0; i < tLen; i++) {

          // Get x,y of the path to follow
        newP = p.getPointAtLength(i * oneL);

          // Move the letter
        t[i].translate((i * oneL)-newP.x, newP.y); 
        t[i].attr("fill", Raphael.getColor());
    }
};​

Try it out with this jsFiddle

Note: The above code is very rough and has some important positioning problems, but I think the general approach is the way to go for putting text on a path with Raphael.

这篇关于在Raphaël的路径上附加文字？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！