使用 Javascript 获取画布中的最大字体大小 [英] Use Javascript to get Maximum font size in canvas
问题描述
我正在绘制一个需要在全屏(100% 宽度和高度)上显示的画布.我像这样使用javascript设置画布的宽度和高度
I am drawing a canvas that needs to be on full available screen (100% width and height). I set the width and height of canvas using javascript like this
var w = window.innerWidth;
var h = window.innerHeight;
var canvas = document.getElementById("myCanvas");
canvas.width = w;
canvas.height = h;
设置画布后,我需要在其中绘制一些需要获得最大可用字体大小的文本.请帮助我找到如何以最大字体大小显示文本的方法.文本可以包含单个字符(大写和小写)或字符串,也可以包含数字.我需要使用 javascript 而不是 jquery.
After setting the canvas, I need to draw some text in it which needs to get the maximum available font size. Please help me finding the way how can I display text with maximum font size. The text may contain a single character (both upper and small case) or a string and can also contain numbers. I need to do it with javascript not jquery.
感谢您的帮助.
推荐答案
挑战
由于画布的 measureText
目前不支持测量高度(上升 + 下降),我们需要做一些 DOM 技巧来获取行高.
Challenge
As canvas' measureText
doesn't currently support measuring height (ascent + descent) we need to do a little DOM trick to get the line-height.
由于字体(或字样)的实际高度(很少)与字体大小相对应,我们需要一种更准确的测量方法.
As the actual height of a font - or typeface - does not necessarily (rarely) correspond with the font-size, we need a more accurate way of measuring it.
结果将是垂直对齐的文本,其宽度始终适合画布.
The result will be a vertical aligned text which always fit the canvas in width.
此解决方案将自动获得字体的最佳大小.
This solution will automatically get the optimal size for the font.
第一个功能是包裹measureText
以支持高度.如果文本指标的新实现不可用,则使用 DOM:
The first function is to wrap the measureText
to support height. If the new implementation of the text metrics isn't available then use DOM:
function textMetrics(ctx, txt) {
var tm = ctx.measureText(txt),
w = tm.width,
h, el; // height, div element
if (typeof tm.fontBoundingBoxAscent === "undefined") {
// create a div element and get height from that
el = document.createElement('div');
el.style.cssText = "position:fixed;font:" + ctx.font +
";padding:0;margin:0;left:-9999px;top:-9999px";
el.innerHTML = txt;
document.body.appendChild(el);
h = parseInt(getComputedStyle(el).getPropertyValue('height'), 10);
document.body.removeChild(el);
}
else {
// in the future ...
h = tm.fontBoundingBoxAscent + tm.fontBoundingBoxDescent;
}
return [w, h];
}
现在我们可以循环找到最佳大小(这里不是很优化,但可以达到目的 - 我刚刚写了这个,所以那里可能有错误,一个是如果文本只是一个没有的字符't 在高度之前超过宽度).
Now we can loop to find the optimal size (here not very optimized, but works for the purpose - and I wrote this just now so there might be bugs in there, one being if text is just a single char that doesn't exceed width before height).
这个函数至少需要两个参数,上下文和文本,其他是可选的,如字体名称(仅限名称)、容差 [0.0, 1.0](默认 0.02 或 2%)和样式(即粗体、斜体等).):
This function takes minimum two arguments, context and the text, the others are optional such as font name (name only), tolerance [0.0, 1.0] (default 0.02 or 2%) and style (ie. bold, italic etc.):
function getOptimalSize(ctx, txt, fontName, tolerance, tolerance, style) {
tolerance = (tolerance === undefined) ? 0.02 : tolerance;
fontName = (fontName === undefined) ? 'sans-serif' : fontName;
style = (style === undefined) ? '' : style + ' ';
var w = ctx.canvas.width,
h = ctx.canvas.height,
current = h,
i = 0,
max = 100,
tm,
wl = w - w * tolerance * 0.5,
wu = w + w * tolerance * 0.5,
hl = h - h * tolerance * 0.5,
hu = h + h * tolerance * 0.5;
for(; i < max; i++) {
ctx.font = style + current + 'px ' + fontName;
tm = textMetrics(ctx, txt);
if ((tm[0] >= wl && tm[0] <= wu)) {
return tm;
}
if (tm[1] > current) {
current *= (1 - tolerance);
} else {
current *= (1 + tolerance);
}
}
return [-1, -1];
}
这篇关于使用 Javascript 获取画布中的最大字体大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!