不使用Raphael javascript库中的boundingBox函数获取文本大小

我正在尝试使用 Rahpael 库在 javascript 中创建一些带有文本的按钮。我想在绘制之前知道样式文本的大小以避免这种情况，以便我可以创建适当的背景（按钮）。另外，我想避免在画布/纸张之外绘制文本（文本的位置是其中心的位置）。

我可以使用 Raphaels getBBox() 方法，但我必须首先创建（绘制）文本才能执行此操作。因此，我绘制文本以获得尺寸，以便能够将其绘制在正确的位置。这太丑了。因此，我正在寻找一些通用方法来估计给定字体、字体大小、系列的样式文本的指标......

可以使用 HTML5 画布来做到这一点http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/ http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/但拉斐尔不使用画布。是否有可能使用 Raphael 或纯 Javascript 获取文本指标？

有几种方法可以将这只猫切成薄片。我很容易想到两个明显的问题。

视线外标尺技术

这是最简单的。只需在画布的 viewBox 外部创建一个文本元素，用字体信息和文本填充它，然后测量它。

// set it up -- put the variable somewhere globally or contextually accessible, as necessary
var textRuler = paper.text( -10000, -10000, '' ).attr( { fill: 'none', stroke: 'none' } );

function getTextWidth( text, fontFamily, fontSize )
{
    textResult.attr( { text: text, 'font-family': fontFamily, 'font-size': fontSize } );
    var bbox = textResult.getBBox();
    return bbox.width;
}

不管怎么想，它都不优雅。但它会以相对较少的开销和不复杂的方式满足您的需求。

Cufonized 字体

如果您愿意考虑使用铜化 http://cufon.shoqolate.com/generate/font，您可以计算给定文本字符串的大小，而根本不需要弄乱 DOM。事实上，这大概就是画布的元素measureText方法在幕后进行。给定导入的字体，您只需执行类似的操作（考虑此原型！）

//  font should be the result of a call to paper.[getFont][2] for a cufonized font
function getCufonWidth( text, font, fontSize )
{
    var textLength = text.length, cufonWidth = 0;
    for ( var i = 0; i < textLength; i++ )
    {
        var thisChar = text[i];
        if ( ! font.glyphs[thisChar] || ! font.glyphs[thisChar].w )
            continue;  //  skip missing glyphs and/or 0-width entities
        cufonWidth += font.glyphs[thisChar].w / font.face['units-per-em'] * fontSize;
    }
    return cufonWidth;
}

我真的很喜欢使用 cufonized 字体——就其以有趣的方式进行动画处理的能力而言，它们比文本有用得多。但第二种方法可能会比您需要或想要的更加复杂。