1

RaphaelJS でこの構造を作成するにはどうすればよいですか?

<text style="font-size:12.00014973px"  y="812.64771" x="-266.26767" transform="matrix(0.7359908,-0.67699154,0.67699154,0.7359908,0,0)">
<tspan style="fill:#1a171b;font-family:AccidentalPresidency" x="-266.26767" y="812.64771" font-size="20">S</tspan>
<tspan style="fill:#1a171b;font-family:AccidentalPresidency" x="-258.86755" y="812.64771" font-size="20" rotate="-0.89999998">P</tspan>
<tspan style="fill:#1a171b;font-family:AccidentalPresidency" x="-251.36746" y="812.54773" font-size="20" rotate="-1.7" >A</tspan>
</text>

結果は、丸められた線に続くテキストになります。私はこれを試してみましたが、失敗しました:

var text = paper.print(300, 350, "SPA", accidentalFont, 20);
text[1].transform("....");

しかし、text[1] は DOM ノード オブジェクトです...

前もって感謝します

4

1 に答える 1

1

paper.printの結果は単一のパスです。これは、以前のバージョンのRaphaelからの逸脱のようです。

曲線に沿って多くのテキストを作成する場合は、次のようなソリューションを使用します。

function PathPrint( canvas, pathString, text, font, options )
{
    var path = canvas.path( pathString ).attr( { stroke: 'none', fill: 'none' } );
    if ( options.print_attr == undefined )
        options.print_attr = { fill: 'black', stroke: 'none' };

    var text_length = text.length;
    var offset = 0;    
    for ( var i = 0; i < text_length; i++ )
    {
        var letter = text[i];
        if ( letter == " " || letter == "\n" )
        {            
            offset += options.size ? options.size : 20;
            continue;
        }
        var p = path.getPointAtLength( offset );
        var alpha = p.alpha;
        if ( alpha >= 360 )     //  alpha is misbehaving
            alpha -= 180;
        var tstr = "R" + Math.floor( alpha + 180 ) + " T" + Math.floor( p.x ) + "," + Math.floor( p.y );        
        var letterpath = canvas.print( 0, 0, letter, font, options.size ? options.size : 20, options.origin ? options.origin : "middle", options.spacing ? options.spacing : 0 )
                .attr( options.print_attr )
                .attr( { transform: tstr } );
        var b = letterpath.getBBox();

        offset += b.width;
    }
    path.remove();
}

..。

var pathString = "M200,300 C200,150 400,150 500,250 C500,450 200,300 400,250 C600,200 750,300 750,400";

PathPrint( canvas, pathString, "I am a big orange geek and proud of it, but I do not allow it to go to my head.", canvas.getFont( "neue" ), {} );

これにより、文字列内の各文字が独自のパスとして効果的に作成され、ガイドパス上のポイントに移植され、各文字の変換文字列に適切な回転が適用されます。

これを処理しようとすると、path.getPointAtLength（）によって返されるアルファ値に本当に不満を感じました-完全には理解していない基準に従って動作しているようです=（しかし、このアプローチは試してみる価値があるかもしれません。

于 2012-06-01T17:56:38.960 に答える