5分ぐらいで分かる、トリミング機能の作り方

Transcript

1. 5分ぐらいで分かる の作り⽅ トリミング機能
2. はじめに ⾷べログiOSアプリに トリミング機能があると知っている⼈🙋
3. たくさんいるね？ ほとんど知ってそうで安⼼しました。
4. トリミング機能のおさらい ⾷べログiOSアプリのトリミング機能 トリミング範囲の調整 画像の回転 固定⽐を保った状態での変更と⾃由操作を選択できる トリミング範囲は変更せずに回転 画像の表⽰位置調整 ズームイン/アウトとスクロール操作
5. 今回解説する部分 ⾷べログiOSアプリのトリミング機能 トリミング範囲の調整 画像の回転 固定⽐を保った状態での変更と⾃由操作を選択できる トリミング範囲は変更せずに回転 画像の表⽰位置調整 ズームイン/アウトとスクロール操作 今回の内容を踏まえればできるので割愛 UIScrollView標準の動作なので割愛
6. 作り⽅をちょこっと解説 Google検索ではあんまり出てこないので ＼UIKitでの／
7. 画像の座標系を利⽤して トリミング範囲を簡単に再描画する この発表で⼤事なこと
8. いくぞーーー スタート
9. ⾷べログiOSアプリのトリミング機能における登場⼈物 UIScrollView UIImageView トリミング範囲 4つの頂点を端末左上を(0,0)とする座標系で管理している。 UIScrollViewの上に重なる感じで配置。 なんの変哲もないただのUIImageView。 UIScrollView内に存在する。 ※計算上はCGRectとして利⽤することが多い なんの変哲も無いただのUIScrollView。
10. トリミング範囲の調整機能とは トリミング範囲の調整 とは ？？？
11. トリミング範囲の調整 とは トリミング範囲の調整機能とは
12. トリミング範囲の調整 とは 2. 指定範囲をズームインしつつ真ん中に トリミング範囲も⼤きくして真ん中に 1. トリミング範囲をユーザー操作で変更 UIPangestureRecognizerから移動量を取得して座標を更新 トリミング範囲の調整機能とは zoomScaleとcontentOffsetの調整 ＋ いい感じにやればいいんでしょ…？？？
13. トリミング範囲の調整 とは 2. ズームインしつつ指定範囲を真ん中に トリミング範囲も⼤きくして真ん中に 1. トリミング範囲をユーザー操作で変更 UIPangestureRecognizerから移動量を取得して座標を更新 トリミング範囲の調整機能とは zoomScaleとcontentOffsetの調整 ＋ ↑これだけ愚直にやると⾯倒
14. P y x 画像からみた点Pの座標：点P(300,500) トリミング範囲の中⼼座標：点P(150,250) トリミング範囲の中⼼座標：点P(100,150) 拡⼤！ 描画⾼さ：300 描画横幅：200 画像サイズ 400x600 画像からみた点Pの座標：？？？ y x 描画⾼さ：300 描画横幅：200 P トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞普通にやると⾯倒？
15. P y x 画像からみた点Pの座標：点P(300,500) トリミング範囲の中⼼座標：点P(150,250) トリミング範囲の中⼼座標：点P(100,150) 拡⼤！ 描画⾼さ：300 描画横幅：200 画像サイズ 400x600 画像からみた点Pの座標：？？？ y x 描画⾼さ：300 描画横幅：200 P トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞普通にやると⾯倒？
16. P y x 画像からみた点Pの座標：点P(300,500) トリミング範囲の中⼼座標：点P(150,250) トリミング範囲の中⼼座標：点P(100,150) 拡⼤！ 描画⾼さ：300 描画横幅：200 画像サイズ 400x600 画像からみた点Pの座標：？？？ y x 描画⾼さ：300 描画横幅：200 P いちいち計算するのは⾯倒（拡⼤率, 回転状態 etc...） トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞普通にやると⾯倒？
17. P y x 画像からみた点Pの座標：点P(300,500) トリミング範囲の中⼼座標：点P(150,250) トリミング範囲の中⼼座標：点P(100,150) 拡⼤！ 描画⾼さ：300 描画横幅：200 画像サイズ 400x600 画像からみた点Pの座標：？？？ y x 描画⾼さ：300 描画横幅：200 P どうすれば楽になる？ トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞普通にやると⾯倒？
18. P y x 画像からみた点Pの座標：点P(300,500) 描画する座標：点P(150,250) 描画する座標：点P(100,150) 拡⼤！ 描画⾼さ：300 描画横幅：200 画像サイズ 400x600 画像からみた点Pの座標：？？？ y x 描画⾼さ：300 描画横幅：200 P トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞普通にやると⾯倒？
19. // ズーム前 imageView.bounds = (0.0, 0.0, 750.0, 982.0) imageView.frame = (0.0, 0.0, 402.44142607128356, 526.9299738693339) // ズーム後 imageView.bounds = (0.0, 0.0, 750.0, 982.0) imageView.frame = (0.0, 0.0, 1299.288755747131, 1701.2020775249102) imageView.bounds.size（画像本来の⼤きさ）は変更されず、 scrollView.contentSize（imageView.frame.size）が更新される ズーム前 ズーム後 ＝画像の中のどこにあるかという情報（imageViewのローカル座標）は変更しない トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞UIScrollViewのズーム処理について
20. Before After トリミング範囲同じ ＝座標も同じ ⾒えてる範囲⼤ ⾒えてる範囲⼩ トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞UIScrollViewのズーム処理について
21. P y x 画像からみた点Pの座標：点P(300,500) 描画する座標：点P(150,250) 描画する座標：点P(100,150) 拡⼤！ 描画⾼さ：300 描画横幅：200 画像サイズ 400x600 画像からみた点Pの座標：点P(300,500) y x 描画⾼さ：300 描画横幅：200 P トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞簡単にトリミング範囲を再描画しよう
22. P y x 画像からみた点Pの座標：点P(300,500) 描画する座標：点P(150,250) 描画する座標：点P(100,150) 拡⼤！ 描画⾼さ：300 描画横幅：200 画像サイズ 400x600 画像からみた点Pの座標：点P(300,500) この変わらない座標を⽤いてトリミング範囲を再描画する y x 描画⾼さ：300 描画横幅：200 P トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞簡単にトリミング範囲を再描画しよう
23. P y x y x 描画⾼さ：300 描画横幅：200 P 画像からみた点Pの座標：点P(300,500) 描画する座標：点P(150,250) 描画する座標：点P(100,150) 拡⼤！ 描画⾼さ：300 描画横幅：200 画像サイズ 400x600 トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞簡単にトリミング範囲を再描画しよう
24. P y x y x 描画⾼さ：300 描画横幅：200 P 描画する座標：点P(150,250) 描画する座標：点P(100,150) 拡⼤！ 描画⾼さ：300 描画横幅：200 画像サイズ 400x600 画像からみた点Pの座標：点P(300,500) トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞簡単にトリミング範囲を再描画しよう
25. P y x y x 描画⾼さ：300 描画横幅：200 画像からみた点Pの座標：点P(300,500) 描画する座標：点P(150,250) 描画する座標：点P(100,150) 拡⼤！ 描画⾼さ：300 描画横幅：200 画像サイズ 400x600 変わらない 画像の描画 更新 トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞簡単にトリミング範囲を再描画しよう
26. P y x y x 描画⾼さ：300 描画横幅：200 P 描画する座標：点P(150,250) 描画する座標：点P(100,150) 拡⼤！ 描画⾼さ：300 描画横幅：200 画像サイズ 400x600 画像からみた点Pの座標：点P(300,500) トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞簡単にトリミング範囲を再描画しよう
27. P y x y x 描画⾼さ：300 描画横幅：200 P 描画する座標：点P(150,250) 描画する座標：点P(100,150) 拡⼤！ 描画⾼さ：300 描画横幅：200 画像サイズ 400x600 画像からみた点Pの座標：点P(300,500) トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞簡単にトリミング範囲を再描画しよう
28. https://developer.apple.com/documentation/uikit/uiview/1622504-convert 呼び出し元の座標系に属する特定の範囲を、指定したViewにおける座標系に変換するメソッド トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞簡単にトリミング範囲を再描画しよう
29. self.convert(トリミング範囲, to: imageView) 描画するView 画像の座標系に 親座標系内の座標 描画する座標 描画する座標（ズーム後） 画像からみた座標 トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞簡単にトリミング範囲を再描画しよう
30. imageView.convert(画像からみたトリミング範囲, to: self) 画像の座標系 画像の座標系 描画するView 描画する座標 描画する座標（ズーム後） 画像からみた座標 ③で画像の描画⾃体は更新されているのでいい感じにトリミング範囲の描画も変わる トリミング範囲の調整機能とは > トリミング範囲の動き⽅＞簡単にトリミング範囲を再描画しよう
31. トリミング範囲の調整 とは UIPangestureRecognizerから移動量を取得して座標を更新 1. トリミング範囲を変更 （ジェスチャー中） 2. ズームイン＋トリミング範囲の再描画 zoomScaleやcontentOffsetの調整で対象範囲を中⼼に ＋convert(_,to）を使って同じ範囲を再描画する ＝座標系に気をつけながらズーム操作だけ上⼿いことやればOKで超簡単！？ トリミング範囲の調整機能とは
32. 皆さんこれで… 完全に理解した🙋 早⾜での発表ですいませんでした。。。
33. おしまい 皆さんのアプリにトリミング機能が実装される⽇も近い！？
34. おしまい ご清聴ありがとうございました