2021/02/19
画像編集のやつ続きやる
Multi-touch Canvas scale with pinch zoom | Konva - JavaScript 2d canvas library
HTML5 Canvas Mobile Scrolling and Native Events with Konva | Konva - JavaScript 2d canvas library
canvasの幅を100％にする
canvasのサイズを親要素に合わせる方法
canvasそのもののサイズを変えずに、transformでサイズを変更する方法
【HTML/JavaScript】よくある canvas要素 のフルスクリーン対応【テンプレート付】 - Nekonote
こっちのほうが出力画像の解像度が落ちないので、これを採用
iOS10のSafariでuser-scalable=no が効かなくズームがされる問題への対策 - Qiita
user-scalable=noしない方法
transformで固定サイズ固定位置のやつを調整する
固定サイズ固定位置のやつの上でピンチズームできてしまうので却下
user-scalable=noする方法
画像のラッパー要素に対して、mouseMoveとかのイベントで自前で画像のサイズを変更する？
Props
Canvas配下の様子を調整せずにtransformで一気に変更できる
Cons
mouseMoveとかすべてのイベントを披露必要があるので、抜け漏れありそう
ダブルタップとか
これ採用するか....
Canvasの中で拡大縮小する
Props
設計は一見わかりやすい
Cons
縮小しすぎてしまえる
実装がだるそう
配下の要素すべてのサイズを調整するのはだるすぎる