Post

catLee

@leemiyinghao

2025年12月27日 下午07:36
歡迎所有互動
Mosir 開發筆記

照片裁切的數學

前幾天上線的照片裁切功能其實隱藏了蠻多幾何學。

不花時間寫下來我怕會忘

catLee

@leemiyinghao

1. 裁切框出血縮放

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

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

1

catLee

@leemiyinghao

2. 角落提示的視覺縮放

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

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

1

catLee

@leemiyinghao

3. 等比例縮放

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

1
顯示更多
Mosir 開發筆記14 篇文章

catLee

@leemiyinghao

歡迎所有互動
Mosir 開發筆記

Lightbox Refactor（圖片／影片瀏覽器重構）

這次重構前列下的目標有：

  • 解決部分使用者不習慣滑鼠點擊黑邊不能關閉 Lightbox 的不方便
  • 改善狀態切換動畫流暢度
  • 現有三層架構（Carousel、Interaction Detection、Video Control Overlay）跟泛型（Carousel<T>, T ∈ Default, Editor）過度複雜問題
  • 修好 pinch 手勢放大圖片時錯誤使用畫面中心點作為參考點的問題

實際跳下去之後才發現問題比想像中麻煩：

  • Lightbox 狀態管理太過複雜，常有兩到三層以上的 props 傳遞
  • 既有 Flex/Grid bo...
...顯示更多 (914 字)
1

catLee

@leemiyinghao

歡迎所有互動
Mosir 開發筆記

UI 狀態變更的動畫

Mosir 某些狀態變更的動畫是有被刻意放慢的。

例如正在儲存草稿...。儲存動作本身大約需要 0.1ms（千分之 0.1 秒），動畫被放慢到 1.5 秒。

這只是為了讓功能看起來有在動作，實際上對功能本身沒有什麼影響。

1

catLee

@leemiyinghao

歡迎所有互動
Mosir 開發筆記

突然想到沒有公開過，這個是隨機emoji大頭貼的完整列表：

😀😃😄😊😁😍😇🥰🤗🥳🤠😺🥹😮‍💨🥲😯😲🫥🫨🥵🥶🥴😬🫠😶‍🌫️😶🐶🐱🐭🐰🦊🐻🦁🐼🦄🐷🐵🐸🐧🐤🐮🐯🦉🐨🦥🦦🦫🦨🦢🐔🐦🦜🦋🐝🦀🦑🐙🐬🐳🐢🦓🦒🦔🐹🦝🦎🐍🦚🦩🐑🐐🐎🦙🐫🦘🐘🦛🦏🐊🐅🐆🦌🍎🍌🍉🍞🍔🍕🍰🍇🍒🥑🍩🍿🍪🎃🥇🏆📚💡🕶️🎈🎲🧸🪁🧊🪐🏵️🌺🌴🍂🍁🌙⭐⚡🪨🏔️🏖️🛁🛏️🪆🧺🪴🧭🧱🪣🪜⏰🕰️🧯🪞🪟🚪🛎️🪑🛋️🕯️🗿🪅🪩🌞🌝🌻🌲🌵🌼🌷🌈🪻🪷🌑💎

3

catLee

@leemiyinghao

歡迎所有互動
Mosir 開發筆記

好像沒有說過，這邊記錄一下也當作正式公告。

Mosir上傳影片時使用的音訊軌格式是 AAC-LC 192kbps，比起純聲音的AAC-LC 512kbps音質會稍微差一點點。