我想得到一些文本的边界框。
user669677
问问题
5477 次
3 回答
5
我在提交问题之前找到了答案:
http://mudcu.be/journal/2011/01/html5-typographic-metrics/#bboxUnicode http://www.w3schools.com/tags/canvas_measuretext.asp
var text_width = ctx.measureText("some text").width;
我将行高用于text_height
.
这给出了不精确的边界框,但在文本渲染之前它是快速且可用的。
于 2013-02-12T15:51:22.970 回答
4
在 Chrome 中工作:
const can = document.querySelector('canvas');
const ctx = can.getContext('2d');
let x = 10, y = 50;
let msg = "Hello, World!";
ctx.font = "30px monospace";
let textMetrics = ctx.measureText(msg);
ctx.fillText(msg, x, y);
console.log(textMetrics);
ctx.beginPath();
ctx.moveTo(
x - textMetrics.actualBoundingBoxLeft,
y - textMetrics.actualBoundingBoxAscent
);
ctx.lineTo(
x + textMetrics.actualBoundingBoxRight,
y - textMetrics.actualBoundingBoxAscent
);
ctx.lineTo(
x + textMetrics.actualBoundingBoxRight,
y + textMetrics.actualBoundingBoxDescent
);
ctx.lineTo(
x - textMetrics.actualBoundingBoxLeft,
y + textMetrics.actualBoundingBoxDescent
);
ctx.closePath();
ctx.stroke();
canvas {
border: 1px solid black;
}
<canvas></canvas>
于 2020-02-09T20:29:18.313 回答
-1
也许我不明白这个问题,但怎么样:
/* 见 w3schools box-sizing 页面 */
<style>
* {
box-sizing: border-box;
}
</style>
于 2022-03-03T18:35:17.860 回答