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

Question

我正在尝试使用Rahpael库在javascript中创建一些带有文本的按钮.我想知道样式文本的大小,在绘图之前避免这样,这样我就可以创建适当的背景(按钮).另外,我想避免在画布/纸张之外绘制文本(文本的位置是其中心的位置).

我可以使用Raphaels getBBox()方法,但我必须首先创建(绘制)文本来执行此操作.所以我绘制文本以获得大小,以便能够在正确的位置绘制它.这很难看.所以我正在寻找一些通用的方法来估计给定字体,字体大小,家庭的样式文本的度量...

可以使用HTML5画布http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/来完成此操作,但Raphael不使用画布.是否有可能使用Raphael或普通Javascript获取文本指标？

Answer 1

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

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);    
}

Answer 2

有几种方法可以切割这只猫.很容易想到两个明显的问题.

视野外的标尺技术

这个是最简单的.只需在画布的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进行操作.实际上,这可能大致就是画布元素measureText方法在幕后的作用.给定一个导入的字体,你只需要做这样的事情(考虑这个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字体 - 就其以有趣的方式进行动画制作的能力而言,它们比文本更有用.但是,第二种方法可能比您需要或想要的更复杂.