javascript - 在不使用 Raphael javascript 库中的 boundingBox 函数的情况下获取文本的大小

Question

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

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

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

Answer 1

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

视野之外的标尺技术

这是最简单的。只需在 Canvas 的 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 字体

如果您愿意考虑使用 cufonized字体，您可以计算给定文本字符串的大小，而根本不需要弄乱 DOM。事实上，这大概就是 Canvas 元素的 measureText 方法在幕后所做的事情。给定一个导入的字体，你只需做这样的事情(考虑这个协议(protocol)!)

//  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 字体——就它们以有趣的方式进行动画处理的能力而言，它们比文本有用得多。但是第二种方法可能比您需要或想要的更加复杂。