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
90
Compose Multiplatform for iOSで音声再生しようぜ!!
kohei_inoue
0
290
Compose for iOS for ZOZOTOWN
kohei_inoue
0
1.5k
Featured
See All Featured
A better future with KSS
kneath
239
17k
Designing for humans not robots
tammielis
253
25k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Stop Working from a Prison Cell
hatefulcrawdad
270
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Unsuck your backbone
ammeep
671
58k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
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 🏖終わり