Post

@leemiyinghao: *照片裁切的數學* 前幾天上線的照片裁切功能其實隱藏了蠻多幾何學。 ~~不花時間寫下來我怕會忘~~

catLee

@leemiyinghao

2025年12月27日 下午07:36

1. 裁切框出血縮放

為了維持裁切框在畫面範圍內，同時在邊緣保留可以往外拉的空間，顯示的裁切框不會跟實際裁切框完全相同。

例如：從原圖裁下來的 4,000×4,000 大小的裁切框，必須縮小到 1,040×1,040 才能在 1,080 px 寬的手機上顯示（包含左右20px的出血）。

catLee

@leemiyinghao

2. 角落提示的視覺縮放

角落提示（┌ 、┐、└、┘）為了完美對在裁切框上，坐標系與裁切框本身相同。

為了維持視覺上大小、粗細在縮放過程中相同，角落提示的大小需要反向縮放。

1

catLee

@leemiyinghao

3. 等比例縮放

按住裁切框的四個角落必須要在維持裁切比例的狀況下縮放。因此這裡透過裁切框本身的寬高比計算出滑鼠或手指移動向量的對應分量。

1

catLee

@leemiyinghao

4. 旋轉縮放補償

圖片在旋轉的過程中會在裁切框中留下空白的角落。因此除了旋轉之外還要帶入對應旋轉角度的縮放。