在 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) 相乘。