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

Selecting individual letters in .print with Raphael 2.1

本文关键字：选择 单个字 print Raphael 使用      更新时间：2023-09-26

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

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

var paper = Raphael( '#div', 500, 500 ),
    label = paper.print( xCenter, yCenter, 'blah',  paper.getFont("CelliniProMedium"), 54 );
label[1].attr( 'fill', 'red');

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

提前致谢

是的，这绝对是 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;
}

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

所以看起来它要么是错误，要么是 2.1 的功能 - 我从 GitHub 获得了 1.4，它按预期工作。暂时悬而未决，以防有人可以对此有更多的了解，因为我认为这可能对其他人有用。

相关文章：