Question

如何在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节点对象......

提前致谢

Answer 1

paper.print的结果是一条单独的路径 - 这似乎与之前版本的拉斐尔不同。

如果您要在曲线后面做很多文字，我会使用这样的解决方案：

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值感到非常沮丧 - 他们似乎按照我不完全理解的标准行事=（但这种方法可能值得给出一个去。

在RaphaelJS中创建复杂的文本节点

1 个答案: