如何获取 Canvas 矩形的 TopLeft、TopRight、BottomLeft、BottomRight 和 CentreTop 位置

Question

基本上，我正在尝试获取已添加到 canvas 的矩形的 TopLeft、TopRight、BottomLeft、BottomRight 和 TopMiddle 位置。请以适用于矩形可能发生的任何尺寸变化的方式向我展示。不适用于当前特定尺寸。

HTML:

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(20, 20, 150, 100);
ctx.stroke();
</script>

Answer 1

你需要的可以用Element.getBoundingClientRect()和rect相对于canvas的绘图信息计算出来。

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();

var rectLeft = 20;
var rectTop = 20;
var rectRight = 150;
var rectBottom = 100;

ctx.rect(rectLeft, rectTop, rectRight, rectBottom);
ctx.stroke();

var boundingRect = c.getBoundingClientRect();

//TopLeft, TopRight, BottomLeft, BottomRight, and TopMiddle
console.log("TopLeft", `(${boundingRect.top + rectTop},${boundingRect.left + rectLeft})`)
console.log("TopRight", `(${boundingRect.top + rectTop},${boundingRect.left + rectRight})`)
console.log("BottomLeft", `(${boundingRect.top + rectBottom},${boundingRect.left + rectLeft})`)
console.log("BottomRight", `(${boundingRect.top + rectBottom},${boundingRect.left + rectRight})`)
console.log("TopMiddle", `(${boundingRect.top + rectTop},${boundingRect.left + (rectLeft + rectRight)/2})`)
//console.log(boundingRect)

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

如何获取 Canvas 矩形的 TopLeft、TopRight、BottomLeft、BottomRight 和 CentreTop 位置

How to get TopLeft, TopRight, BottomLeft, BottomRight, and CentreTop position of Canvas Rect

javascript

html5-canvas