DroidKaigi2022 Jetpack Composeを用いて、Canvasを直接触るようなコンポーネントを作成する方法

DroidKaigi2022に参加した際の発表資料です。

発表時との相違点
・動画のURLのQRの中央に動画アイコンを追加
・「最終目標」として動画を再掲しているページに、動画のURLとQRを追加
・Androidロボットの権利表記を追加 (DroidKaigi実行委員会の方より表記必要なことご指摘いただきました。ありがとうございます。)

・2023/01/09 : p109-p134 にスライドを追加しました。(「DstOverだけだと背景が透明な画像の時に上手く動かない件」について)

・2023/01/12 : 追加スライド内(p124)のURLリンクが間違っていたので修正

-------------------------------

Jetpack Composeは、ライブラリにあるコンポーネントでアプリを組むのは従来のAndroid Viewに比べて簡単で開発時間の短縮にもつながる優れたUIツールキットです。

一方、Android View時代だったら、Viewを継承して、オーバーライドしたonDraw()に処理をガリガリ書いていたであろう完全なオリジナルコンポーネントを作成しようとした時、どうしたらよいのか悩まれる方もいるのではないでしょうか。

私は去年 Jetpack Composeを用いて、そのようなコンポーネントを持つアプリをリリースしました。
ユーザーから受け取った端末内画像を表示し、その上を指でなぞると軌跡が切り取られて透明表示のレイヤーが表示されるようなアプリです。

そのアプリで使用しているコードを例に、jetpack Composeを用いて完全なオリジナルコンポーネントを作成する際にヒントにできるような内容をお話しする予定です。

Transcript

1. Jetpack Composeを用いて、 Canvasを直接触るようなコン ポーネントを作成する方法 kkkkan(@kkkkan_git) DroidKaigi 2022
2. ・2023/01/09 : p109-p134 にスライド追加あり。(追加スライドは背景クリーム色) ・2023/01/12 : 追加スライド内(p124)のURLリンクが間違っていたので修正 更新履歴
3. 自己紹介 kkkkan( @kkkkan_git https://github.com/kkkkan) 2017~ Androidアプリエンジニア 2022/06 ~ ライフログテクノロジー株式会社 健康管理アプリ「カロミル」のAndroid版の開発を担当しています
4. 「カロミル」とは - 手軽に食事等の記録が出来る健康づくりサポートアプリです。 よければダウンロードしてみてくだ さい！ Android iOS
5. アジェンダ
6. 1. 導入 2. Jetpack ComposeのCanvasの使い方~基本編~ 3. Jetpack ComposeのCanvasの使い方~基本機能 紹介~ 4. Jetpack ComposeのCanvasの使い方~実践編~ 5. まとめ
7. 環境 今回の発表は - Compose v1.2.0 - Kotlin v1.7.0 の環境で作成されています。 スライド内に出てくるURLには全てQRコードをつけています。 気になるところがあった方はQRコードリーダーで読み込んでみて下さい。
8. 今回の発表で触れること・触れないこと ・Modifierの基本的な使い方に関しては詳しくは触れません。(そこに関しては理解して いることを前提としています。) ・AndroidView時代にViewを継承してオリジナルなコンポーネントを作成したことがない と、少し理解しにくいかもしれません。(onTouchEventのオーバーライド経験など) ・Jetpack ComposeのCanvasの基本的な使用方法について述べていきます。既に使 いこなしている方には物足りないかもしれないです。
9. このスライドは発表前後にTwitterでURLを共有するつもりです。 また、DroidKaigiのタイムテーブルでも公開されるのではないかと思います。 @kkkkan_git
10. 1. 導入 2. Jetpack ComposeのCanvasの使い方~基本編~ 3. Jetpack ComposeのCanvasの使い方~基本機能 紹介~ 4. Jetpack ComposeのCanvasの使い方~実践編~ 5. まとめ
11. 早速ですが
12. Jetpack Compose 用意されたコンポーネントを用いてUIを組む場合、　簡単 早い！ 従来のAndroidViewでできた事はどんどんと揃って　きて いる！
13. でも完全にオリジナルなコンポーネントを自作する場合は？
14. 例えばこんなもの 「画像から、指でなぞった部分を消して透 過レイヤーを見せる」View https://drive.google.com/file/d/1T0O pG_WbLQiH_nt5VH083NG0l2GKcl sT/view?usp=sharing
15. AndroidViewを用いる場合 →　Viewを継承して、onDrawをオーバーライドして、引数のCanvasに対してアレコレす れば実現できそう
16. Jetpack Composeを用いる場合 →　Viewを継承して、onDrawをオーバーライドして、引数のCanvasに対してアレコレす れば実現できそう ない ？？？ ない
17. Jetpack ComposeにもCanvasはあります！
18. https://developer.android.com/jetpack/compose/graphics?hl=ja アクセス日 : 2022/09/01
19. この発表は、オリジナルコンポーネントを作成しようとした時に手助けに なるようなものとなることを目指しています。 そのために実践的な例として最後の章では先ほどお見せした動画のコ ンポーネントの実装を行います。
20. ※また、今回は扱いませんが独自の図形やアニメーションを描 写する際にもCanvasは有用です。 【Jetpack Compose Canvas】でGoogle検索すると、 多くの方が色々と作成されているのが見られます。
21. 1. 導入 2. Jetpack ComposeのCanvasの使い方~基本編~ 3. Jetpack ComposeのCanvasの使い方~基本機能 紹介~ 4. Jetpack ComposeのCanvasの使い方~実践編~ 5. まとめ
22. サイズなどを指 定 描写するスコープ https://developer.android.com/referenc e/kotlin/androidx/compose/foundation/ package-summary?hl=ja#Canvas(and roidx.compose.ui.Modifier,kotlin.Functi on1) アクセス日 : 2022/09/01
23. https://developer.android.com/referenc e/kotlin/androidx/compose/foundation/ package-summary?hl=ja#Canvas(and roidx.compose.ui.Modifier,kotlin.Functi on1) サイズなどを指 定 描写するスコープ ComposeのCanvasはDrawScopeという描画環境を公開してくれます。 ここに対して、描写をしていきます。 ⇔AndroidViewのCanvasは、Canvasインスタンスに対して描写メソッドを呼ん でいました。 アクセス日 : 2022/09/01
24. こんな感じ
25. 四角を描く インセットを入れた新しい範囲の DrawScopeを公開 =原点をずらした・範囲を限定した 子DrawScope 線を引く ・全てDrawScopeのメソッド DrawScopeのドキュメント(あとでもう少し詳しく行います。 ) →https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawS cope#(androidx.compose.ui.graphics.drawscope.DrawScope).inset(kotlin.Float,kotlin.Function1) ・AndroidViewのCanvasや、他のクラスなどと同じく原点は左上で、 x軸は右方向が正、y軸は下が正
26. this.sizeでDrawScopeのサイズ も公開してくれる https://developer.android.com/reference/kotlin/androidx/compose/ui/gr aphics/drawscope/DrawScope#size()
27. なお、DrawScopeは領域を区切ってくれているだけで、 領域外の座標を指定することではみ出して描写することは可能です。
28. 1. 導入 2. Jetpack ComposeのCanvasの使い方~基本編~ 3. Jetpack ComposeのCanvasの使い方~基本機能 紹介~ 4. Jetpack ComposeのCanvasの使い方~実践編~ 5. まとめ
29. DrawScopeのメソッドを順に見ていきます
30. - drawArc…円弧を描く - drawCircle…正円を描く - drawImage…画像を描く - drawLine…直線を描く - drawOval…楕円を描く - drawPath…線を描く - drawPoints…点を描写する - drawRect…矩形を描く - drawRoundRect…角の丸い矩形を描く
31. drawArc…円弧を描く グラデーションver 一色ver アクセス日 : 2022/09/01
32. // グラデーションの色 // 円弧の始点の度数 // 扇形の終点の度数 // 円の中心を通すか // 360度描いた場合に円周の通る軌道のx座標とy座標の最小値 // スタイル(塗りつぶすか、外周だけか) // 縦方向の直径と横方向の直径 // 透過度 // 上書くカラーフィルター // 同じCanvasに描かれた他のもの が重なった時の描写設定 https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#drawArc(androidx.compose .ui.graphics.Brush,kotlin.Float,kotlin.Float,kotlin.Boolean,androidx.compose.ui.geometry.Offset,androidx.compose.ui.geometry.Si ze,kotlin.Float,androidx.compose.ui.graphics.drawscope.DrawStyle,androidx.compose.ui.graphics.ColorFilter,androidx.compose. ui.graphics.BlendMode) アクセス日 : 2022/09/01
33. ① ② ③ ① ② ③
34. drawCircle…正円を描く グラデーションver 一色ver アクセス日 : 2022/09/01
35. // グラデーションの色 // スタイル(塗りつぶすか、外周だけか) // 半径 // 透過度 // 上書くカラーフィルター // 同じCanvasに描かれた他のものが重なった時の 描写設定 // 中心 https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#drawCircle(androidx.compo se.ui.graphics.Brush,kotlin.Float,androidx.compose.ui.geometry.Offset,kotlin.Float,androidx.compose.ui.graphics.drawscope.Dra wStyle,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.BlendMode) アクセス日 : 2022/09/01
36. ① ② ③ ① ② ③
37. drawImage…画像を描く 設定大まかver 詳細設定可能ver アクセス日 : 2022/09/01
38. https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#drawImage(androidx.comp ose.ui.graphics.ImageBitmap,androidx.compose.ui.unit.IntOffset,androidx.compose.ui.unit.IntSize,androidx.compose.ui.unit.IntOff set,androidx.compose.ui.unit.IntSize,kotlin.Float,androidx.compose.ui.graphics.drawscope.DrawStyle,androidx.compose.ui.graphi cs.ColorFilter,androidx.compose.ui.graphics.BlendMode,androidx.compose.ui.graphics.FilterQuality) // 画像ソース // ソースのオフセット // 透過度 // 上からかけるカラーフィルター // 同じCanvasに描かれた他のものが重なった時の 描写設定 // 描く場所の領域 // 描く場所のオフセット // ソース画像の描く領域 // 描く画質のきれいさ // スタイル(塗りつぶすか、線で囲うだけか) ・styleは変更しても描写に変更ないように見えた。なんの為にあるか不明。 ご存知の方いましたら教えてください .... ・大まか設定verはdstOffsetがtopLeftという名前で存在していて、それ以外の大きさや位置関係の設定はでき ない アクセス日 : 2022/09/01
39. ① ② ③ ④ ① ② ③ ④
40. drawLine…直線を描く グラデーションver 一色ver アクセス日 : 2022/09/01
41. https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#drawLine(androidx.compos e.ui.graphics.Brush,androidx.compose.ui.geometry.Offset,androidx.compose.ui.geometry.Offset,kotlin.Float,androidx.compose.ui. graphics.StrokeCap,androidx.compose.ui.graphics.PathEffect,kotlin.Float,androidx.compose.ui.graphics.ColorFilter,androidx.com pose.ui.graphics.BlendMode) // 透過度 // グラデーションの色 // 線のスタイル(破線などを作れる) // 線の端点の形 // 始点 // 上書くカラーフィルター // 同じCanvasに描かれた他のものが重なった時の描写設定 // 終点 // 線の太さ アクセス日 : 2022/09/01
42. ① ② ③ ④ ⑤
43. ⑥ ⑦ ⑧ ① ② ③ ④ ⑤ ⑥ ⑦ ⑧
44. drawOval…楕円を描く グラデーションver 一色ver アクセス日 : 2022/09/01
45. // グラデーションの色 // 円周の通る軌道のx座標とy座標の最小値 // スタイル(塗りつぶすか、外周だけか) // 楕円が収まる矩形の大きさ // 透過度 // 上書くカラーフィルター // 同じCanvasに描かれた他のものが重なった時の 描写設定 https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#drawOval(androidx.compos e.ui.graphics.Brush,androidx.compose.ui.geometry.Offset,androidx.compose.ui.geometry.Size,kotlin.Float,androidx.compose.ui.g raphics.drawscope.DrawStyle,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.BlendMode) アクセス日 : 2022/09/01
46. ① ② ③ ④ ① ② ③ ④
47. drawPath…線を描く グラデーションver 一色ver アクセス日 : 2022/09/01
48. https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#drawPath(androidx.compos e.ui.graphics.Path,androidx.compose.ui.graphics.Brush,kotlin.Float,androidx.compose.ui.graphics.drawscope.DrawStyle,androidx .compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.BlendMode) // 描く線 // 透過度 // 上書くカラーフィルター // 同じCanvasに描かれた他のものが 重なった時の描写設定 // スタイル(塗りつぶすか、外周だけか ) // グラデーションの色 アクセス日 : 2022/09/01
49. ① ② ① ②
50. drawPoints…点を描写する 一色ver グラデーションver アクセス日 : 2022/09/01
51. https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#drawPoints(kotlin.collection s.List,androidx.compose.ui.graphics.PointMode,androidx.compose.ui.graphics.Brush,kotlin.Float,androidx.compose.ui.graphics.S trokeCap,androidx.compose.ui.graphics.PathEffect,kotlin.Float,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.gr aphics.BlendMode) // グラデーションの色 // ポイントモード(点にするかつなげて線として描写するか ) // 透過度 // 上書くカラーフィルター // 同じCanvasに描かれた他のもの が重なった時の描写設定 // 線や点の太さ // 線や点の端点の形 // 線のスタイル(破線などを作れる) // 描写する点のリスト ・pointModeが PointMode.Pointsの時はPathEffectを設定してもなにも起きないようです。 アクセス日 : 2022/09/01
52. ① ② ③ ④ ① ② ③ ④
53. drawRect…矩形を描く グラデーションver 一色ver アクセス日 : 2022/09/01
54. https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#drawRect(androidx.compos e.ui.graphics.Brush,androidx.compose.ui.geometry.Offset,androidx.compose.ui.geometry.Size,kotlin.Float,androidx.compose.ui.g raphics.drawscope.DrawStyle,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.BlendMode) // 透過度 // グラデーションの色 // 大きさ // 上書くカラーフィルター // 同じCanvasに描かれた他のものが重なった時の 描写設定 // 左上の角の配置 // 線や点の端点の形 // スタイル(塗りつぶすか、外周だけか) アクセス日 : 2022/09/01
55. ① ② ③ ① ② ③
56. drawRoundRect…角の丸い矩形を描く グラデーションver 一色ver アクセス日 : 2022/09/01
57. https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#drawRoundRect(androidx.c ompose.ui.graphics.Brush,androidx.compose.ui.geometry.Offset,androidx.compose.ui.geometry.Size,androidx.compose.ui.geom etry.CornerRadius,kotlin.Float,androidx.compose.ui.graphics.drawscope.DrawStyle,androidx.compose.ui.graphics.ColorFilter,and roidx.compose.ui.graphics.BlendMode) // 透過度 // 大きさ // 上書くカラーフィルター // 同じCanvasに描かれた他のものが重なった時の 描写設定 // 角の角度 // グラデーションの色 // 左上の角の配置 // スタイル(塗りつぶすか、外周だけか) アクセス日 : 2022/09/01
58. ① ② ③ ④ ① ② ③ ④
59. 以上、DrawScopeのメソッドでした
60. 次にDrawScopeのExtensionメソッド
61. ・11個用意されていますが、今回はのちほど使う2つだけを紹介します。 ・Extensionメソッドは、領域を取り直したり回転させたりクリップしたりと描写領域 操作系のものが定義されています。 全てを確認したい方はこちらを確認ください →https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#extension-functions - DrawScope.clipRect…指定矩形外に描写出来ないようにする - DrawScope.inset…座標空間を移動し、描画領域の寸法を変更する
62. DrawScope.clipRect…指定矩形外に描写出来ないようにする アクセス日 : 2022/09/01
63. // 下端の角度 // 右端の座標 https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#(androidx.compose.ui.grap hics.drawscope.DrawScope).clipRect(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,androidx.compose.ui.graphics.ClipOp,kotlin. Function1) // 左端の座標 // 上端の座標 // 描写反映領域を指定した座標の中にするか外にするか ・clipOpをClipOp.Differenceとすると指定した領域外の部分のみ描写を反映するようになる アクセス日 : 2022/09/01
64. ① ② ③ ④ ① ② ③ ④
65. DrawScope.inset…座標空間を移動し、描画領域の寸法を変更する 各方向に個別に移動量を 指定ver 縦・横ごとに設定ver 全方向に一律に設定 ver アクセス日 : 2022/09/01
66. // 下端の移動量 // 右端の移動量 https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/drawscope/DrawScope#(androidx.compose.ui.grap hics.drawscope.DrawScope).inset(kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Float,kotlin.Function1) // 左端の移動量 // 上端の移動量 アクセス日 : 2022/09/01
67. ① ② ③ ① ② ③
68. 1. 導入 2. Jetpack ComposeのCanvasの使い方~基本編~ 3. Jetpack ComposeのCanvasの使い方~基本機能 紹介~ 4. Jetpack ComposeのCanvasの使い方~実践編~ 5. まとめ
69. 「画像から、指でなぞった部分を消して透過レイ ヤーを見せる」Viewを作成してみる
70. 再掲 最終目標 https://drive.google.com/file/d/1T0O pG_WbLQiH_nt5VH083NG0l2GKcl sT/view?usp=sharing
71. おおまかに分けて以下の2つの処理が必要です。 1. ユーザーがなぞった軌跡を取得・記録する処理 2. DrawScopeに描き込んでいく処理
72. 1.ユーザーがなぞった軌跡を取得・記録する処理
73. 1-1. 指でなぞった軌跡を取得出来るようにする Modifier.pointerInteropFilter を使用します。 https://developer.android.com/jetpack/compose/modifiers-list?hl=ja#Pointer アクセス日 : 2022/09/01
74. ・AndroidViewのonTouchEventメソッドでも取得できていた MotionEventが取得できる ・座標の原点はCanvas自身の左上 ※Canvasに限らず任意のコンポーネントのModifierに　　　設定 できます。
75. 1-2. 軌跡の履歴を記録してゆく ・Composeには、pathを表現するクラスも用意されていますがこれは Bundleに入れられません。 ・再生成に対応するためにpathを表現するクラスを自作します。 1本の線の始点はMoveTo、移動先はLineToを使用します。
76. PathHisのリストのMutableStateを作成 ・Stateに軌跡を保存していきます。 ・MotionEventに応じて記録していきます。 track.valueに直接追加するのではなく新しいリ ストを作成しないと 再コンポーズされないので 注意
77. ※ちなみに、Composeに用意されているpathを表現するクラス https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/AndroidPath androidx.compose.ui.graphics.Path Compose用のPathインタフェース 後ほど、実際にDrawScopeに描写するときはPathHisをAndroidPathに変換します。 アクセス日 : 2022/09/01
78. 2. DrawScopeに描き込んでいく処理
79. CanvasのDrawScopeに描き込んでいく処理の流れ 0. PathHisのリストをAndroidPathのリストに変換 1. 背景の透明レイヤー画像を描き込む 2. メインの前面にくる画像を重ねて描き込む 3. なぞった軌跡をDstOutモードで描き込む 4. 再度上からDstOverモードで透明レイヤー画像を描き込む
80. CanvasのDrawScopeに描き込んでいく処理の流れ 0. PathHisのリストをAndroidPathのリストに変換 1. 背景の透明レイヤー画像を描き込む 2. メインの前面にくる画像を重ねて描き込む 3. なぞった軌跡をDstOutモードで描き込む 4. 再度上からDstOverモードで透明レイヤー画像を描き込む
81. 2-0. PathHisのリストをAndroidPathのリストに変換 DrawScopeの中 中略 ここの中
82. 2-0. PathHisのリストをAndroidPathのリストに変換 AndroidPathは、moveToで指定したところを始 点としてlineTo指定した点をつなぐ線を表す。 1 インスタンス=線1本
83. CanvasのDrawScopeに描き込んでいく処理の流れ 0. PathHisのリストをAndroidPathのリストに変換 1. 背景の透明レイヤー画像を描き込む 2. メインの前面にくる画像を重ねて描き込む 3. なぞった軌跡をDstOutモードで描き込む 4. 再度上からDstOverモードで透明レイヤー画像を描き込む
84. 2-1. 背景の透明レイヤー画像を描き込む まず画像の表示サイズ(描き込むサイズ)を決める必要があります。 ※描き込む位置を指定するため。また透明レイヤー画像と前面に来る画像の大きさを揃えるため。 そのまま描写すると Canvasに対して 左上寄せに描かれてしまいます。 中央に表示するためには 色々と調整が必要
85. 2-1. 背景の透明レイヤー画像を描き込む せっかくなので、メインの前面の画像を画面に入りきる限り一番大きくなるようにしま す
86. 2-1. 背景の透明レイヤー画像を描き込む 最初にDrawScopeの外でメインの前面画像と背景画像をImageBitmapにする ImageBitmap#imageResource は@Composableなメソッドなた め
87. 2-1. 背景の透明レイヤー画像を描き込む 次に、DrawScopeの中でCanvasの大きさと前面画像の大きさを取得する DrawScopeの中 中略 ここの中
88. 2-1. 背景の透明レイヤー画像を描き込む 縦横比を保ったままCanvasに入りきる限り最大限に描いたときの画像の大きさを決める DrawScopeの中 中略 ここの中
89. 2-1. 背景の透明レイヤー画像を描き込む DrawScopeの中 中央に置きたいので 2で割る
90. 2-1. 背景の透明レイヤー画像を描き込む 先ほど計算したOffsetを入れて領域を取り直したDrawScopeを作成 DrawScopeの中 中略 ここの中
91. 2-1. 背景の透明レイヤー画像を描き込む 取り直したDrawScopeの中で画像を描写 DrawScopeの中 前面画像と同じ大きさにするため (dstSizeのデフォルト値はsrcSize) 中略 ここの中
92. 2-1. 背景の透明レイヤー画像を描き込む ・なぞった軌跡を透明レイヤー柄にするだけでは不十分 ・(今回は関係ありませんが、)前面画像が背景が透明な画像だった場合になぞっていな い部分も透明レイヤー柄になる必要があるため ・その為に、一番最初に透過レイヤー画像を描き込みます この段階でビルドしたもの 最終目標
93. CanvasのDrawScopeに描き込んでいく処理の流れ 0. PathHisのリストをAndroidPathのリストに変換 1. 背景の透明レイヤー画像を描き込む 2. メインの前面にくる画像を重ねて描き込む 3. なぞった軌跡をDstOutモードで描き込む 4. 再度上からDstOverモードで透明レイヤー画像を描き込む
94. 2-2. メインの前面にくる画像を重ねて描き込む 続けてメインの前面画像を描写 背景画像と同様にdstSizeを指定します。 insetのDrawScopeの中なのでOffset等は考慮しなくてOKです。 insetのDrawScopeの中 この段階でビルドしたもの 前面画像が 背景透過画像 の時 ここの中
95. CanvasのDrawScopeに描き込んでいく処理の流れ 0. PathHisのリストをAndroidPathのリストに変換 1. 背景の透明レイヤー画像を描き込む 2. メインの前面にくる画像を重ねて描き込む 3. なぞった軌跡をDstOutモードで描き込む 4. 再度上からDstOverモードで透明レイヤー画像を描き込む
96. 2-3. なぞった軌跡をDstOutモードで描き込む ・2-0で作成したAndroidPathのリストを一本ずつ描き込んでいく 今回は、ペイントアプリ等のように軌跡通りにペンで描くのではなく透明レイヤー画像にした い。 そのために、あとから軌跡だけ透明レイヤー画像に置き換える為に DstOutで描く。 insetのDrawScopeの中 ここの中
97. Canvas 元から描いて あったもの 今から描くもの DstOutモード
98. 2-3. なぞった軌跡をDstOutモードで描き込む ・軌跡はinsetで領域を取り直す前の元のDrawScopeに対する座 標で記録されているのでそのまま描写すると位置がずれる この段階でビルドするとこうなります。 (画像の上半分をなぞった時) 画像の下の黒い場所が、「何も描かれていない」状態の部分
99. 2-3. なぞった軌跡をDstOutモードで描き込む ・座標をずらす insetのDrawScopeの中 ここの中
100. 2-3. なぞった軌跡をDstOutモードで描き込む ・なぞったところがちゃんと「何も描かれていない」状態になる ・しかし、前面画像からはみ出した部分まで「何も描かれていない」 になる ・あとで「何も描かれていない」部分に透明レイヤー画像をはめ込 むのでこのままだとおかしくなる この段階でビルドするとこうなります。 黒い場所が、「何も描かれていない」状態の部分
101. 2-3. なぞった軌跡をDstOutモードで描き込む ・前面画像外の領域はなぞられても画面表示に反映しないようにする insetのDrawScopeの中
102. 2-3. なぞった軌跡をDstOutモードで描き込む ・なぞったところがちゃんと「何も描かれていない」状態になる ・前面画像からはみ出した部分はなぞられても画面描写に反映さ れない この段階でビルドするとこうなります。 黒い場所が、「何も描かれていない」状態の部分
103. CanvasのDrawScopeに描き込んでいく処理の流れ 0. PathHisのリストをAndroidPathのリストに変換 1. 背景の透明レイヤー画像を描き込む 2. メインの前面にくる画像を重ねて描き込む 3. なぞった軌跡をDstOutモードで描き込む 4. 再度上からDstOverモードで透明レイヤー画像を描き込む
104. 2-4. 再度上からDstOverモードで透明レイヤー画像を描き込 む 「何も描かれていない」状態になった部分に透明レイヤー画像を表示させる insetのDrawScopeの中 (2-3でいれた2つめの insetやclipRectの中では ないので注意) ここの中
105. Canvas 元から描いて あったもの 今から描くもの DstOverモード
106. Canvas 元から描いて あったもの 今から描くもの cf : SrcOverモード(blendModeのデフォルト)
107. 2-4. 再度上からDstOverモードで透明レイヤー画像を描き込 む この段階でビルドするとこうなります ほしい状態になりました！やったね
108. 2-4. 再度上からDstOverモードで透明レイヤー画像を描き込 む (おまけ) ・DstOverは、drawImageのデフォルトのBlendModeのSrcOverの逆のモードです ・なので本来なら前面画像が背景透過画像の場合も2-1なしで最後のDstOver描写だけ でほしい状態になっていてほしい所ですが、なぜか背景透過画像の上からDstOverで他 の画像を描き込んだ時は背景が白くなってしまいました。 こうなる。バグなのか仕様なのか不明。 何かご存知の方いらっしゃいましたら教えてくださると 嬉しいです。 -> 次のページから追記有り
109. 2023/01/09 追記 (追記部分は背景色付きです) DstOverだけだと背景が透明な画像の時に上手く動かない件 について ・「何かご存知の方いらっしゃいましたら教えてくださると嬉しいで す」に対して、本番発表後に教えて下さった方がいて進展があり ました。それに伴う追記です。 ・ご教授ありがとうございます。 ・発表後すぐ連絡いただいたのですが、追加調査の過程でハマったり、別件のアレコレがあったりし て気づけば3ヶ月くらい経ってしまっていました、、、すみません、、、
110. 以降、追記部分本題 DstOverだけだと背景が透明な画像の時に上手く動かない件 について ・そもそもこれはAndroidView時代のCanvasから同様 の動きをする
111. 不透明な画像を背景が透明な画像の後に DST_OVERで描写 ビルド結果
112. 原因は？
113. (恐らく) ハードウェア アクセラレーション アクセス日 : 2022/10/25 https://developer.android.com/topic/p erformance/hardware-accel?hl=ja
114. 不透明な画像を背景が透明な画像の後に DST_OVERで描写 ビルド結果
115. ハードウェア アクセラレーションとは ・オンにすると、描画オペレーションにGPU を使用するようになる ・targetSDKがAndorid 14以上の場合デフォルトでオン (以下、AndroidViewの場合の話) ・実際の描写サイクルがオフの時と変わる →invalidate()を呼んでも全てのViewが再描写されるわけではなくなる invalidate()が呼ばれた時、システムが「影響のある部分」を洗い出し、そこだけ再描写 される https://developer.android.com/topic/performance/hardware-accel#hardware-model　よ り
116. そして アクセス日 : 2022/10/25 https://developer.android.com/topic/p erformance/hardware-accel?hl=ja
117. Viewレベルで ハードウェア アクセラレーションをオフにす る
118. 画像の中央揃えやサイズ揃えなどはサボっています... ビルド結果 想定通りの動きに！！！
119. 注意 ・ハードウェア アクセラレーションは、Viewレベルの他にApplicationレベル・Activityレベ ルでオフにできますが、それらのレベルのオフでは今回はうまく動きませんでした。 ・Viewレベルでオフにしないとダメ。 なぜ？新たな謎......
120. さて、Composeの場合 ・結論から言うと、Composeの場合もハードウェア アクセラレーションのせいと推測して います。 ・というか、原因はAndroidViewとComposeとで共通の部分にありそう。 (ハードウェア アクセラレーションは実際のハードウェア的な描写方法に関わる部分でか なり下の層と思われるので、その点からも矛盾しない)
121. 「AndroidViewとComposeとで共通の部分にある」とは ・ComposeのCanvasのonDrawの中でdrawImageを呼んだ時は実際には CanvasDrawScopeに実装されている各メソッドが呼ばれているのですが topLeftのみ設定できるdrawImage 細かく設定できるdrawImage ※定義ジャンプで中のコードを探って行きます
122. 「AndroidViewとComposeとで共通の部分にある」とは ともに「drawParams.canvas」のdrawImageメソッドやdrawImageRectメソッドが呼ばれ ています。 topLeftのみ設定できるdrawImage 細かく設定できるdrawImage
123. 「AndroidViewとComposeとで共通の部分にある」とは そこで「drawParams.canvas」は何かとみていくとどうやら - Compose可能なメソッドを使用してUIを組んでいる場合深い部分ではAndroidViewの ViewGroup を使用していたりする - ComposeのCanvasでdrawImageを呼んだ場合、最終的には(Compose用に作られた ViewGroupに渡されてきた)AndroidViewのCanvasのdrawBitmapメソッドが呼ばれる - 以上よりAndroidViewのViewのonDrawでBlendModeが上手く動かないのと同じ原因で おかしい挙動になっていそう
124. 「AndroidViewとComposeとで共通の部分にある」とは 一応、コードリーディングもしてみたので、「一体どういうことなのか？」、「本当なの？」な ど気になる方はもしよかったらご確認ください。 (スライドにするべき量ではなくなってしまったので別にまとめました) → https://qiita.com/kkkkan/items/9ca41983e05090c56fb3
125. Composeでの回避策① ・AndroidViewと同じくハードウェア アクセラレーションをオフにする ・ただし、少なくともComposeライブラリ v1.2.0 の時点ではComposeの機能として直接 ハードウェア アクセラレーションをオフにする方法は提供されていない ・なのでAndroidViewコンポーザブルをかませて、やってそこでハードウェア アクセラ レーションをオフにする
126. Composeでの回避策① ・以下のようなComposableメソッドを定義して、
127. Composeでの回避策① ・Canvasを用いた処理を包んでやると、DstOverでも望んでいた結果が得られるよ うになります。 参考・出典 : https://stackoverflow.com/a/70951871
128. Composeでの回避策② 参考・出典 : https://stackoverflow.com/a/69790654 ・CanvasのModifeirに.graphicsLayer(0.99f)としてやっても、最後のDstOverだけ で望んでいた状態になります。
129. Composeでの回避策② ・なぜ？ - alphaが変わることで階層が追加されたりなど、ハードウェア アクセラレーション による描写時にも影響する何かしらの変化がある?(詳しくは不明.....) - ハードウェア アクセラレーションによる描写モデルのドキュメントにも、alphaを設 定するとレイヤの合成方法に影響することが書かれているので多分それが正 しそう
130. Composeでの回避策② アクセス日 : 2023/01/09 https://developer.android.com/topic/performance/hardware-accel?hl=ja#hardware-model
131. Composeでの回避策② (これは一応アニメーションの話の部分ではありますが、ベースは同じはず...) アクセス日 : 2023/01/09 https://developer.android.com/topic/performance/hardware-accel?hl=ja#layers-anims
132. Composeでの回避策② ちなみに、alphaを設定してやる回避策はAndroidViewでも効きます。
133. Composeでの回避策② - とはいえ、alphaを設定する作戦よりはハードウェア アクセラレーション をオフにしてやる方式の方がまだより本質的 & 確実そうでより不安が少 ないので、ComposeでもAndroidViewでも、alpha設定よりハードウェア アクセラレーションをオフにしてやる方がいいかも? - ハードウェア アクセラレーションに関しても結局もっと深い部分を見て確 認したわけではないので不確実要素はかなりあるけど - OSのバージョンによって挙動が違うなどありそうだし - ただ、ハードウェア アクセラレーションは描写パフォーマンスを考えて導 入されているものなので、描写が重い部分では全体のハードウェア アク セラレーションをオフにしてしまうのではなくalpha方式の方がいいかも。
134. 2023/01/09 追記部分 終わり
135. (おまけ) ペン先インディケーターをつける 現在のペン先位置を表す〇を置いてやると、更に親切なViewになります insetのDrawScopeの中 (2-3でいれた2つめの insetやclipRectの中では ないので注意) ここの中
136. (おまけ) ペン先インディケーターをつける ・最後に指をおいた「点」なので、AndroidPathではなくPathHisのリストの方を利用 この段階でビルドするとこうなります
137. 完成！
138. 1. 導入 2. Jetpack ComposeのCanvasの使い方~基本編~ 3. Jetpack ComposeのCanvasの使い方~基本機能 紹介~ 4. Jetpack ComposeのCanvasの使い方~実践編~ 5. まとめ
139. - Jetpack ComposeにもCanvasはあります - DrawScopeを公開してくれるので、そこに描き込んでいく形です - Canvasの大きさを超えて描き込むことができてしまうので注意 - insetを使用すると描画領域を新しく展開できて便利です - はみ出したくない領域があるときはclipRectを使用しましょう - Jetpack Composeでタッチイベントを取得したいときは Modifier.pointerInteropFilterを使用します
140. ・以上、この発表が他の方の Jetpack Compose を使用する際の助けに少しでもなれた らうれしいです。 ・スライドで使用したコードは全てGithubにアップロードしてあります。 https://github.com/kkkkan/ComposeAppForDroidKaigi2022 ・スライド内のQRコードの作成に当たっては「QRのススメ」様を利用いたしました。あり がとうございます。https://qr.quel.jp/ ※QRコードは(株)デンソーウェーブの登録商標です ※Android ロボットは、Google が作成および提供している作品から複製または変更した ものであり、クリエイティブ・コモンズ表示 3.0 ライセンスに記載された条件に従って使用 しています。
141. https://play.google.com/store/apps/det ails?id=com.kkkkan.maketransparent app 今回作成したViewを一部で使用したアプリを去年リリース しました。 もしよかったらインストールしてくださったら嬉しいです。 おまけ
142. ご清聴ありがとうございました！！