javascript - 在 HTML 画布上调整旋转矩形的大小
问题描述
我有一个 HTML 5 画布实例和一个在其上绘制的矩形。
我的绘图功能考虑了调整角度并使用相对坐标。
相对坐标基于三个变量:左上矩形点、矩形宽度和矩形高度。
矩形宽度和矩形高度使用两个点计算:左上矩形点和右下矩形点。
综上所述,绘图功能取决于左上矩形点、右下矩形点和旋转。这是以下文本的重点!
这是一个代码片段:
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()
}
这是我的带有一堆控件的矩形:八个调整大小手柄(白色)和一个旋转手柄(绿色):
旋转工作正常。
调整大小工作正常。
而且我还尝试在旋转后实现调整大小。这是我的方法,带有一个简陋的插图:
- 抓取红点的坐标(它是鼠标光标坐标)
- 使用负角对点进行反旋转以获得反旋转坐标
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]
}
- 更新
xTopLeft
和yTopLeft
重绘 - 完毕
这种方法背后的想法很简单。由于我的绘图功能依赖于左上角矩形点和右下角矩形点,我只需要获取它们的新坐标。
例如,这是 B 点的简化代码:
if (point == 'B') {
var newPointB = rotatePoint(mouse.x, mouse.y, center_x, center_y, -r);
xBottomRight = newPointB[0];
yTopLeft = newPointB[1];
}
但它没有按预期工作:在调整我旋转的矩形的大小时,会发生偏移、跳跃和完全不正常的行为。
在寻找见解时,我偶然发现了这篇文章。这篇文章涵盖了我的问题,但我没有得到作者的方法并且无法实现它。
为什么一定要锁定A点的坐标?我的左上手柄旨在调整西北方向的矩形大小,因此有必要更改 A 点的坐标...
为什么要在反旋前重新计算中心点?它打破了统一矩阵变换的想法......
在我的情况下,正确的算法是什么?
解决方案
推荐阅读
- sql - Invoke-Sqlcmd:无效的对象名称“Inventar”
- vb.net - 如何使用计时器在特定时间段后自动删除文本文件
- php - 如何处理 laravel 资源中的嵌套关系
- excel - 为什么我的 VBA PasteSpecial, Operation:= xlAdd 将单元格值加倍?
- printf - Windbg .printf 字符串别名来自 as /c
- php - 用于文件上传/直接输入的 W3 Validator Api
- powershell - 编辑 ADPropertyValueCollection (IList)
- variables - 循环内的脚本。第二次执行时出错
- conv-neural-network - 使用 tiny-imagenet-200 数据训练模型 (resnet18/densenet) 时,Google colab 不断崩溃
- php - Symfony 4 测试中 Twig 中的会话始终为空