我试图创造一些按钮在使用Rahpael库中的JavaScript文本。 我想知道的样式文本的大小，绘图，以避免这样我就可以创造适当的背景（按钮）前。 此外，我想避免绘制帆布/纸的外部的文本（文本的位置是其中心的位置）。
我可以使用Raphaels getBBox（）方法，但我要创建（画）排在首位做到这一点的文字。 所以，我得出的文本，以获得大小要能画出它正确的位置上。 这是丑陋的。 所以我在寻找一些通用的方法来估算给定的字体，字体大小，家庭样式文本的指标...
有一种可能性，这种使用HTML5画布做http://www.html5canvastutorials.com/tutorials/html5-canvas-text-metrics/但拉斐尔不要使用画布。 是否有可能得到使用拉斐尔或纯JavaScript中的文本度量？
我知道这似乎草率，但你应该没有问题，绘制文本，测量它，然后绘制按钮和移动标签。 为了安全起见，只画它关闭屏幕：
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);
}
有一对夫妇的方式把他们切片，这种猫。 两个明显的人立即浮现在脑海。
出的视图标尺技术
这一个是最简单的。 只要创建一个文本元素画布的视框之外，你的字体信息和文本填充它，并对其进行测量。
// 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字体的工作 - 在他们的有趣的方式进行动画能力方面，它们比文本更为有用。 不过比你需要或想要的第二种方法可能更额外的复杂性。
