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() 返回的 alpha 值感到非常沮丧——它们的行为似乎符合我不完全理解的标准 =( 但这种方法可能值得一试。

于 2012-06-01T17:56:38.960 回答