Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
夏 × Jetpack Compose
Search
ねも
July 24, 2023
0
83
夏 × Jetpack Compose
要はComposeのCanvasでのお絵描きです
ねも
July 24, 2023
Tweet
Share
More Decks by ねも
See All by ねも
Compose Multiplatform for iOS開発でぶつかった壁
kohei_inoue
0
1.6k
ノンプログラマのための ~アルゴリズムパズル プログラマのための数学パズル入門~
kohei_inoue
0
74
ノンデザイナーズ・デザインブックを読んだので名刺作ってみた
kohei_inoue
0
91
Compose Multiplatform for iOSで音声再生しようぜ!!
kohei_inoue
0
290
Compose for iOS for ZOZOTOWN
kohei_inoue
0
1.5k
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
Visualization
eitanlees
146
16k
Faster Mobile Websites
deanohume
307
31k
GraphQLとの向き合い方2022年版
quramy
49
14k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Code Reviewing Like a Champion
maltzj
524
40k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
BBQ
matthewcrist
89
9.7k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
夏 × Jetpack Compose Twitter (X): https://twitter.com/nemo_855 GitHub: https://github.com/nemo-855 Qiita:
https://qiita.com/nemo-855 Android エンジニア 井上 晃平 / ねも
突然ですがみなさん、 夏といえば?
花火 🎇
まずはこちらをご覧ください
None
裏テーマ Compose の Canvas お絵描き
🍉 目次 ✓ 花びらを作る ✓ 表示割合を指定できるようになる ✓ まるく並べる
🌼 花びらを作る① private fun DrawScope.drawFlowerPetal( size: Size, color: Color, angle:
Float = 0f, ) { rotate(degrees = angle) { // Pathで花びらを描画 } }
🌼 花びらを作る② val path = Path().apply { moveTo(0f, 0f) quadraticBezierTo(
size.width * 5 / 6, size.height * 1 / 6, size.width, size.height, ) moveTo(size.width, size.height) quadraticBezierTo( size.width * 1 / 6, size.height * 5 / 6, 0f, 0f, ) } O size.width size.height 現在地が始点 赤 → 制御点 青 → 終点
🍧 表示割合を指定できるようにする① private fun DrawScope.drawFlowerPetal( size: Size, color: Color, angle:
Float = 0f, displayRatio: Float = 1.0f, ) { rotate(degrees = angle) { // Pathで花びらを描画 // clipPathで指定領域だけ表示させる } } O size.width 2 * size.width 2 * size.height size.height
🍧 表示割合を指定できるようにする② clipPath(path = path) { val triangleWidth = 2
* size.width * displayRatio val triangleHeight = 2 * size.height * displayRatio val trianglePath = Path().apply { moveTo(triangleWidth, 0f) lineTo(0f, triangleHeight) lineTo(0f, 0f) close() } drawPath( path = trianglePath, color = color, style = Fill ) } } O size.width 2 * size.width 2 * size.height size.height
🛟 まるく並べる① @Composable private fun FlowerPetalsRing( modifier: Modifier = Modifier,
flowerPetalRectSize: Size, numberOfFlowerPetal: Int, flowerPetalColor: Color, percent: Float = 1.0f, ) { // 描画処理 }
🛟 まるく並べる② BoxWithConstraints( modifier = modifier.fillMaxWidth().aspectRatio(1f) ) { val pieceLength
= with(LocalDensity.current) constraints.maxWidth.toDp() }.value val padding = (sqrt(2f) - 1) / 2 * pieceLength Canvas( modifier = Modifier.fillMaxSize().padding(padding.dp) ) { for (i in 0 until numberOfFlowerPetal) { val angle = (360 / numberOfFlowerPetal * i).toFloat() drawFlowerPetal( size = flowerPetalRectSize, color = flowerPetalColor, angle = angle, displayRatio = percent, ) } } }
あとはこれを重ねて Sliderで調整できるようにすると、、、
None
サンプルコード → https://github.com/nemo-855/Fireworks 🏖終わり