Question

我试图做这个Raphael教程[http://www.html5rocks.com/en/tutorials/raphael/intro/]所做的事情，并从印有.print的字符串中选择单个字母，但没有快乐

我用cufon生成了字体，并用Raphael.registerFont替换了Cufon.registerFont

var paper = Raphael( '#div', 500, 500 ),
    label = paper.print( xCenter, yCenter, 'blah',  paper.getFont("CelliniProMedium"), 54 );

label[1].attr( 'fill', 'red');

导致错误，因为label只是一个路径而不是路径数组。是什么给了什么？

提前致谢

Answer 1

是的，这肯定是1.4和2.0之间行为的改变 - 而且它有一些功能在多种情况下派上用场。

另一方面，通过扩展Raphael 2.0 ...

可以轻松复制数组结果功能

Raphael.fn.printArray = function printArray( x, y, string, font, size, letter_spacing, line_height )
{
    var result = [];
    var cx = x, cy = y;        
    size = size || 16;
    letter_spacing = letter_spacing || 0.2;
    line_height = line_height || 1.5;        
    for ( var i = 0; i < string.length; i++ )
    {
        if ( string[i] == " " )
        {
            cx += size;
            continue;
        }
        else if ( string[i] == "\n" )
        {
            cx = x;
            cy += size * line_height;
            continue;
        }
        var glyph = this.print( 0, 0, string[i], font, size ).attr( { opacity: 0 } );
        var glyphBox = glyph.getBBox();
        glyph.attr( { transform: "T" + cx + "," + cy, opacity: 1 } );
        cx += glyphBox.width + ( size * letter_spacing );
        result.push( glyph );
    }
    return result;
}

这不是完美的代码，但只需稍加改进就可以轻松填补空白。

Answer 2

所以它看起来像是一个错误或2.1的功能 - 我从GitHub获得1.4并且它按预期工作。让问题暂时搁置以防万一有人可以对此有所了解，因为我认为这可能对其他人有用。

用Raphael 2.1选择.print中的单个字母

2 个答案: