Question

假设在旋转的边界矩形内部绘制文本（未与法线轴x-y对齐），文本也可以旋转，给定边界框的 max width ，如何选择最佳字体大小用于在html5中绘制包装文本中的边界框画布和javascript？

我知道这个方法： measureText （）可以测量给定字体大小的尺寸，但我需要反过来：使用已知宽度来获得问题字体大小。

感谢

Answer 1

您无需找到适合的字体磅值。字体将根据当前的变换比例平滑地向上和向下缩放。

您所做的只是measureText找到textWidth，从pointSize属性获取context.font，如果您拥有width和{{1}你需要适合的框，然后找到height和width / textWidth的最小值，你就拥有了渲染字体所需的比例。

作为一项功能

height / pointSize

参数是

ctx 是绘制到
文字要绘制的文字
宽度适合文字的宽度
高度适合文字的高度

返回适合文本宽度和高度的比例。

该演示将其全部集成，并从您的问题中随机抽取随机文本和填充。它使字体选择和点大小与字体缩放分开，因此您可以看到它适用于任何字体和任何磅值。

var scale2FitCurrentFont = function(ctx, text, width, height){
    var points, fontWidth;
    points = Number(ctx.font.split("px")[0]); // get current point size
    points += points * 0.2; // As point size does not include hanging tails and
                            // other top and bottom extras add 20% to the height
                            // to accommodate the extra bits  
    var fontWidth = ctx.measureText(text).width;
    // get the max scale that will allow the text to fi the current font
    return Math.min(width / fontWidth, height / points);
}

html5 canvas：绘制包装的旋转文本的自动字体大小

1 个答案: