假設我有一個如下形式的矩形：
{
x: number,
y: number,
w: number,
h: number,
a: number
}
其中x和y指的是它的左上角，w指的是它的寬度，h指的是它的高度，a指的是它圍繞其中心原點旋轉的角度。
如何在此資料結構上執行水平翻轉？也就是說，在視覺上，它應該從：
至：
有沒有產生這個結果的數學運算？
同樣，是否有類似的操作會產生相同資料結構的垂直翻轉？
下面是一些繪制旋轉矩形的代碼：
const canvas = document.querySelector("canvas");
const context = canvas.getContext("2d");
function rotateCanvas(ctx, x, y, a) {
ctx.translate(x, y);
ctx.rotate(a);
ctx.translate(-x, -y);
}
function drawRotatedRectangle(ctx, rX, rY, rW, rH, rA) {
rotateCanvas(ctx, rX rW / 2, rY rH / 2, rA);
ctx.beginPath();
ctx.rect(rX, rY, rW, rH);
ctx.stroke();
rotateCanvas(ctx, rX rW / 2, rY rH / 2, -rA);
}
drawRotatedRectangle(context, 30, 30, 100, 50, 0.5);<canvas></canvas>uj5u.com熱心網友回復：
答案很簡單：
rectangle.angle = -rectangle.angle
這適用于水平翻轉和垂直翻轉，因為它們都產生了同樣有趣的結果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/507885.html
標籤：javascript 数学 矩形 翻动