8

ラファエルのパスにテキストを添付する方法を知っている人はいますか? http://www.w3.org/TR/SVG11/images/text/toap02.svgのようなもの jQuery SVG でそれができることは知っていますが、Raphaël js を使用してこれを行う簡単な方法が見つかりません。このテキストをベジエ曲線にアタッチして移動したい。

4

3 に答える 3

12

これを行うには2つの方法があります。

  1. より簡単な方法は、ラファエル.print()法を利用することです。これにより、テキストがパスに変わる可能性があります。各キャラクターは独自のパスを取得します。次に、各文字を繰り返し処理し、とを使用して適切に移動および回転でき.translate()ます.angle()。

  2. より難しい方法は、RaphaelのSVGとVMLの両方のパスにテキストを実装することです.text()。

.print()これは、このフォントを使用した回転なしの方法1の簡単で大まかな開始です。

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を使用してパスにテキストを配置する方法だと思います。

于 2010-10-14T18:56:38.000 に答える
6

raphael 2.1 の print() 関数は一連のパスを返すのではなく、すべての文字を含む単一のパスを返します。したがって、ここに記載されているすべてのソリューションは、raphael 2.1 (現在のバージョン) では有効ではありません。以前の print() メソッドと同様に、文字を個別に印刷してセットを返すメソッド printLetters() を紙に追加する次の小さなプラグインを開発しました。また、プラグインは、このテキストをパスに揃えることをサポートしています。たとえば、プラグインを使用してパス上のテキストを揃えるには、これを行うだけで済みます。

var r = Raphael(0, 0, 500, 500);
var path1 = "M 50 100 C 100 50 150 0 200 50" +
    " C 250 100 300 150 350 100" +
    " C 400 50 450 50 450 50";
var text1 = r.printLetters(20, 150, "habia una vez una vaca",
        r.getFont("my underwood"), 30, null, null, path1).attr({
    fill : "red",
    stroke : "black"
});

プラグインコードは次のとおりです。

(function() {
    /**
     * do the job of putting all letters in a set returned bu printLetters in a path
     * @param p - can be a rpahael path obejct or string
     */
    var _printOnPath = function(text, paper, p) {
        if(typeof(p)=="string")
            p = paper.path(p).attr({stroke: "none"});
        for ( var i = 0; i < text.length; i++) {       
            var letter = text[i];
            var newP = p.getPointAtLength(letter.getBBox().x);
            var newTransformation = letter.transform()+
                 "T"+(newP.x-letter.getBBox().x)+","+
                (newP.y-letter.getBBox().y-letter.getBBox().height);       
            //also rotate the letter to correspond the path angle of derivative
            newTransformation+="R"+
                (newP.alpha<360 ? 180+newP.alpha : newP.alpha);
            letter.transform(newTransformation);
        }
    };

    /** print letter by letter, and return the set of letters (paths), just like the old raphael print() method did. */
    Raphael.fn.printLetters = function(x, y, str, font, size,
            letter_spacing, line_height, onpath) {
        letter_spacing=letter_spacing||size/1.5;
        line_height=line_height||size;
        this.setStart();
        var x_=x, y_=y;
        for ( var i = 0; i < str.length; i++) {
            if(str.charAt(i)!='\n') {
                var letter = this.print(x_,y_,str.charAt(i),font,size);
                x_+=letter_spacing;               
            }
            else {
                x_=x;
                y_+=line_height;
            }
        }
        var set = this.setFinish();
        if(onpath) {
            _printOnPath(set, this, onpath);
        }
        return set;
    };   
})();
于 2012-03-29T17:47:03.913 に答える
0

これはraphael4gwt (java) に基づいたコードですが、javascript プログラマーなら簡単に適応できると思います。これはラファエル 2.0 に基づいています。上記のソリューションに似ていますが、より優れています。変換文字列を使用して、各文字を絶対に配置および回転させてパスに配置します。

/* make some text follow a path */
Font anchorFont = paper.getFont("Anchor Steam NF");
Set text1 = paper.print(120,330,"a text that follows a path", anchorFont, 40);

//the path where we want to place the text
Path p = paper.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");
p.attr(Attrs.create().stroke("none"));//hide the path

/* for each letter, we add an absolute translation to its 
 * transformation string and also add an absolute rotation 
 * to correspond to path angle of derivative. */
for(int i = 0; i<text1.size(); i++) {
    Shape letter = text1.item(i);

    //get the point of a letter on the path
    Point newP = p.getPointAtLength(letter.getBBox().getX());

    String newTransformation = letter.getTransform()+                   
        "T"+(newP.getX()-letter.getBBox().getX())+","+
        (newP.getY()-letter.getBBox().getY()-letter.getBBox().getHeight());

    //also rotate the letter to correspond the path angle of derivative
    newTransformation+="R"+
        (newP.getAlpha()<360 ? 180+newP.getAlpha() : newP.getAlpha());

    letter.setTransform(newTransformation);         
}
于 2012-03-02T14:34:56.787 に答える