Question

之前已在此处解释过（http://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393）如何计算文本字符串长度（以像素为单位），并引用http://jsfiddle.net/eNzjZ/34/。

在jsFiddle示例中，font参数字符串传递给getTextWidth。此参数字符串包括以像素为单位的字体大小。返回的结果以像素为单位将记录到控制台。

假设我想将结果转换为另一个单位（em，pt ...），我需要从参数字符串中检索原始字体大小（以像素为单位）才能进行转换。有没有办法在 getTextWidth内使用Canvas属性进行？

换句话说，我如何直接从context.font属性中检索或提取字体大小？

编辑：更多CLUES

typeof (context.font) returnq包含正确font-size值的字符串。这里讨论了以速记格式解析CSS字符串的主题（How to parse CSS font shorthand format）。但是到目前为止，我还是无法在没有实现自己的解析算法的情况下从字符串中提取特定值...必须有一条快车道。

Answer 1

ere：How to parse CSS font shorthand format thirtydot 清除了道路。

实际上，我还没有找到对context.font的直接访问，但是 thirtydot 的算法可以简单有效地完成这一操作。

// (…)
context.font = myOwnCSSString;
metrics = context.measureText (texte);

var $test = $('<span />');
$test.css('font', context.font);

console.log ($test.css('fontWeight'));
console.log($test.css('fontStyle'));
console.log($test.css('fontVariant'));
console.log($test.css('fontSize'));
// etc…

.css（）的第二个参数是经典的css简写字符串。解析返回预期结果。

请注意，对于Firefox和Chrome，结果都会以像素返回，如果需要，可能会转换为点数。

有没有办法从Canvas上下文中检索值？

1 个答案: