在 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

使用相同的方法來獲取左上角和右下角百分比以獲取右上角和左下角坐標，找到這些坐標之間的線，然后找到兩條線的交點現在必須得到作物區域的中點

我的圖像有一些計算