将矩形与HTML帆布中的旋转图像相对于坐标的矩形

Question

我有以下相对于此旋转图像的坐标：

坐标相对于旋转图像的高度和宽度。旋转起源是作物矩形的中心。已知作物的旋转。

我的目的是使用上面的抽取呼叫和裁剪信息并呈现以下图像：

到目前为止我的方法是：

1. 首先旋转图像。

2. 将上面显示的坐标转换为相对于容器。

3. 用包含旋转图像作为源和翻译的坐标的画布调用绘制。

   drawimage（旋转canvas，rotatedx，rotatedy，cropwidth，cropheight，0，0，宽度，高度）

问题：

• 我不确定如何找到裁剪矩形的中心点 上面的作物信息。没有这个，我无法设置正确的 图像旋转的起源

• 没有找到此中心点，我无法使用以下代码正确旋转坐标。

// cx origin x, cy origin y
const rotate = (cx: number, cy: number, x: number, y: number, angle: number) => {
  const radians = (Math.PI / 180) * angle;
  const cos = Math.cos(radians);
  const sin = Math.sin(radians);
  const nx = cos * (x - cx) + sin * (y - cy) + cx;
  const ny = cos * (y - cy) - sin * (x - cx) + cy;
  return { nx, ny };
};

老实说，我不确定我是否完全以错误的方式进行操作。

任何建议将不胜感激！非常感谢。

Answer 1

将其作为答案发布，以便我们至少可以在这里取得一些进展。

我做了另一个情况的图像，并假设那些作物区域“坐标”是基础图像宽度和高度的百分比，我们可以使用它们来计算作物矩形的左上和右下右坐标。

如果我们进一步假设农作物区域是正方形，则发现中点只是找到裁剪区的左上和右下角坐标之间的界线，然后找到该线的中点。

但是，看这个问题，农作物区域似乎并不是正方形的。在这种情况下，我们有几个选项：

选项1

暂时旋转农作物区域（或图像），以使它们之间的“相对旋转”为0。现在我们可以构造顶部和底部的底部和底部- 直接使用我们已经拥有的左上和右上右坐标，直接的裁剪区域的左坐标，然后将所有内容旋转回去

选项2

使用相同的方法，无论使用什么方法来获取左上角和右下最低百分比以获取右上角和左下坐标，找到这些坐标之间的界线，然后找到您现在必须获得两行的相交点，您必须获得裁剪区域中点

我的一些计算图像