1

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

我可以使用 Raphaels getBBox() 方法，但我必须首先创建（绘制）文本才能做到这一点。所以我绘制文本以获得能够在正确位置绘制它的大小。这很丑陋。所以我正在寻找一些通用方法来估计给定字体、字体大小、系列的样式文本的度量......

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

4

2 回答 2

6

有几种方法可以切开这只猫。两个明显的问题很容易浮现在脑海中。

视野外标尺技术

这个是最简单的。只需在画布的 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 的 elementsmeasureText方法在幕后所做的事情。给定一个导入的字体，你可以简单地做这样的事情（考虑这个 protocode！）

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

于 2013-02-12T21:03:44.263 回答
5

我知道这看起来很草率，但是绘制文本、测量文本、然后绘制按钮和移动标签应该没有问题。为了安全起见，只需将其从屏幕上绘制出来：

var paper = Raphael(0, 0, 500, 500);

var text = paper.text(-100, -100, "My name is Chris");

//outputs 80 12
console.log(text.getBBox().width, text.getBBox().height);

但是，如果这真的冒犯了你的感情——我会理解的！-- 您可以轻松地生成一个对象来记住给定字体的每个字符的宽度：

var paper = Raphael(0, 0, 500, 500),
    alphabet = "abcdefghijklmnopqrstuvwxyz";
    font = "Arial",
    charLengths = {},
    ascii_lower_bound = 32,
    ascii_upper_bound = 126;

document.getElementById("widths").style.fontFamily = font;

for (var c = ascii_lower_bound; c <= ascii_upper_bound; c += 1) {
    var letter = String.fromCharCode(c);    
    var L = paper.text(-50, -50, letter).attr("font-family", font);
    charLengths[letter] = L.getBBox().width;
}

//output

for (var key in charLengths) if (charLengths.hasOwnProperty(key)) {
    var row = document.createElement("tr");
    row.innerHTML = "<td>" + key + "</td><td>" + charLengths[key] + "</td>";    
    document.getElementById("widths").appendChild(row);    
}
于 2013-02-12T20:38:32.560 回答