我想計算一個圍繞其中心旋轉的矩形的邊界框。我讀過
uj5u.com熱心網友回復：
邊界框的大小（這里的描述）
H = w * Abs（Sin（Fi））。 h * Abs（Cos（Fi））。
W = w * Abs(Cos(Fi) h * Abs（Sin（Fi））。
有了rXCenter, rYCenter，就可以找到得到的邊界坐標
x0 = rXCenter - W/2
y0 = rYCenter - H/2。
uj5u.com熱心網友回復：
感覺你好像想多了。 在這里，我展示了如何畫三個圍繞中心點旋轉的矩形，我把中心點做成藍色。
。const wrapper = document. getElementById('wrapper'/span>)。
const canvas = document.getElementById('canvas') 。
const wCS = window.getComputedStyle(wrapper, null)
const pl = parseFloat(wCS.getPropertyValue('padding-left') )。
const pt = parseFloat(wCS.getPropertyValue('padding-top') ）。)
const pr = parseFloat(wCS.getPropertyValue('padding-right') ）。)
const pb = parseFloat(wCS.getPropertyValue('padding-bottom') ）。)
canvas.width = wrapper.clientWidth - pl - pr;
canvas.height = wrapper.clientHeight - pt - pb;
const ctx = canvas.getContext('2d')。
//設定一個矩形。
let cornerLeft = 70;
let cornerTop = 70;
let width = 180;
let height = 60;
let horizontalCenter = cornerTop (width / 2) 。
let verticalCenter = cornerTop (height / 2) 。
let centerPoint = {
horz: horizontalCenter,
vert: verticalCenter
};
let colorBlue = '#0000FF'/span>;
let colorLime = '#40FF40';
let colorPurple = '#4040FF';
let colorOrange = '#FFA500';
ctx.fillStyle = colorBlue。
ctx.fillRect(centerPoint.horz, centerPoint。 vert, 8, 8); //填充中心點的像素。
ctx.strokeStyle = colorPurple;
ctx.strokeRect(corner Top, cornerLeft, width, height); //水平紫色框。
ctx.strokeStyle = colorOrange。
ctx.translate(centerPoint.horz, centerPoint.vert); //中心點注意正。
ctx.rotate(Math.PI / 2); // Vertical
ctx.translate(-centerPoint.horz, -centerPoint.vert); //中心點-注意負strokeRect(corner Top, cornerLeft, width, height); //垂直橙色框。
ctx.strokeStyle = colorLime。
ctx.translate(-centerPoint.horz * (1.375), -centerPoint。 vert * (0.5)); // center point - note negative.
ctx.rotate((Math.PI /2) / -2); //向左退45度。
ctx.translate(centerPoint.horz * (.025), centerPoint。 vert * (2.75)); // center point note positive[/span]。
ctx.strokeRect(corner Top, cornerLeft, width, height); #wrapper {
width: 400px;
height: 400px;
padding: 2rem;
border: 1px solid blue;
}
#canvas {
border: 1px solid orange;
}< div id="wrapper"><。 canvas id="canvas">/span>< /canvas></div> 轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/319968.html
標籤：