夏 × Jetpack Compose

要はComposeのCanvasでのお絵描きです

Transcript

1. 夏 × Jetpack Compose Twitter (X): https://twitter.com/nemo_855 GitHub: https://github.com/nemo-855 Qiita: https://qiita.com/nemo-855 Android エンジニア
 井上 晃平 / ねも
2. 突然ですがみなさん、 夏といえば？
3. 花火 🎇
4. まずはこちらをご覧ください
6. 裏テーマ Compose の Canvas お絵描き
7. 🍉 目次 ✓ 花びらを作る ✓ 表示割合を指定できるようになる ✓ まるく並べる
8. 🌼 花びらを作る① private fun DrawScope.drawFlowerPetal( size: Size, color: Color, angle: Float = 0f, ) { rotate(degrees = angle) { // Pathで花びらを描画 } }
9. 🌼 花びらを作る② 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 現在地が始点 赤 → 制御点 青 → 終点
10. 🍧 表示割合を指定できるようにする① 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
11. 🍧 表示割合を指定できるようにする② 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
12. 🛟 まるく並べる① @Composable private fun FlowerPetalsRing( modifier: Modifier = Modifier, flowerPetalRectSize: Size, numberOfFlowerPetal: Int, flowerPetalColor: Color, percent: Float = 1.0f, ) { // 描画処理 }
13. 🛟 まるく並べる② 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, ) } } }
14. あとはこれを重ねて Sliderで調整できるようにすると、、、
16. サンプルコード → https://github.com/nemo-855/Fireworks 🏖終わり