§08-11Content
zoom / pan viewer
画像を拡大・移動して細部を確認する。
写真や図面の細部を確認したいときに、別画面に移らず拡大して見られる。商品写真や地図、設計図の閲覧で効く。
実装のポイント
transform: scale と translate を 1 つの行列で持ち、ホイールやピンチの中心点を基準に拡大する。拡大率には上限と下限を設ける。
- 特徴
- 状態管理
- デモで使っているもの
- shadcn/ui
- lucide-react
- SVG
- Pointer Events
- ソース
- zoom-pan.tsx