在 HTML canvas 上調整旋轉矩形的大小

Question

我有一個 HTML 5 canvas 的實例，並在其上繪制了一個矩形。

我的繪圖 function 考慮了調整角度並使用相對坐標。

相對坐標基於三個變量：左上矩形點、矩形寬度和矩形高度。

矩形寬度和矩形高度使用兩個點計算：左上矩形點和右下矩形點。

綜上所述，繪制 function 取決於左上矩形點、右下矩形點和旋轉。 這是以下文本的重點！

這是一個代碼片段：

var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');
var xTopLeft = 550; 
var yTopLeft = 200;
var xBottomRight = 750; 
var yBottomRight = 450; 
var w = Math.max(xTopLeft, xBottomRight) - Math.min(xTopLeft, xBottomRight);
var h = Math.max(yTopLeft, yBottomRight) - Math.min(yTopLeft, yBottomRight);
var r = 1;

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save()
    ctx.translate(xTopLeft + w / 2, yTopLeft + h / 2);
    ctx.rotate(r);
    ctx.fillStyle = "yellow";
    ctx.fillRect(w / 2 * (-1), h / 2 * (-1), w, h);
    ctx.restore()
    }

這是我的帶有一堆控件的矩形：八個調整大小手柄（白色）和一個旋轉手柄（綠色）：

旋轉工作正常。

調整大小工作正常。

而且我還嘗試在旋轉后實現調整大小。 這是我的方法，帶有一個簡陋的插圖：

1. 抓取紅點的坐標（是鼠標cursor coordiantes）
2. 使用負角對點進行反旋轉以獲得反旋轉坐標

function rotatePoint(x, y, center_x, center_y, angle) {
    var new_x = (x - cx) * Math.cos(angle) - (y - cy) * Math.sin(angle) + cx;
    var new_y = (x - cx) * Math.sin(angle) + (y - cy) * Math.cos(angle) + cy;
    return [new_x, new_y]
}

3. 更新xTopLeft ， yTopLeft並重繪
4. 完畢

這種方法背后的想法很簡單。 由於我的繪圖 function 依賴於左上角矩形點和右下角矩形點，我只需要獲取它們的新坐標。

例如，這是 B 點的簡化代碼：

if (point == 'B') {
    var newPointB = rotatePoint(mouse.x, mouse.y, center_x, center_y, -r);
    xBottomRight = newPointB[0];
    yTopLeft = newPointB[1];
}

但它沒有按預期工作：在調整我旋轉的矩形的大小時，會發生偏移、跳躍和完全不正常的行為。

在尋找見解時，我偶然發現了這篇文章。 這篇文章涵蓋了我的問題，但我沒有得到作者的方法並且無法實現它。

為什么一定要鎖定A點的坐標？ 我的左上手柄旨在調整西北方向的矩形大小，因此有必要更改 A 點的坐標...

為什么要在反旋前重新計算中心點？ 它打破了統一矩陣變換的想法......

在我的情況下，正確的算法是什么？

Answer 1

我也面臨同樣的問題。 事實證明，我使用的角度是度數。 嘗試將 rotatePoint function 中的角度與 (Math.PI / 180) 相乘。