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

问题描述

有谁知道如何在 Raphaël 中将文本附加到路径上?类似于 http://www.w3.org/TR/SVG11/images/text/toap02.svg我知道 jQuery SVG 可以做到这一点，但是我找不到使用 Raphaël js 来做到这一点的简单方法.我想将此文本附加到贝塞尔曲线并移动它.

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. 更简单的方法是使用 Raphael .print() 方法.这可以将文本转换为路径.每个角色都有自己的路径.然后您可以迭代每个字符并使用 .translate() 和 .angle().

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().

更难的方法是为 SVG 和 VML 用于 Raphael .text().

这是方法 1 的快速粗略开始，使用 .print() 和 这个字体:

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

试试这个 jsFiddle

注意:上面的代码非常粗糙，并且有一些重要的定位问题，但我认为一般的方法是使用 Raphael 将文本放在路径上的方法.

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