在 HTML Canvas 中裁剪具有相对于旋转图像的坐标的矩形

Question

我有以下相对于这个旋转图像的裁剪坐标：

坐标相对于旋转图像的高度和宽度。 旋转原点是裁剪矩形的中心。 作物的轮作是已知的。

我的目标是使用上面的 drawImage 调用和裁剪信息并渲染以下图像：

到目前为止，我的方法是：

1. 先旋转图像。

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

3. 使用包含旋转图像作为源和转换坐标的画布调用 drawImage。

   drawImage(rotatedCanvas, rotatedX, rotatedY, cropWidth, cropHeight, 0, 0, width, height)

问题：

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

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

// 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

使用相同的方法来获取左上角和右下角百分比以获取右上角和左下角坐标，找到这些坐标之间的线，然后找到两条线的交点现在必须得到作物区域的中点

我的图像有一些计算