Android Jetpack Compose, Canvas (3)
Search
🥊

Android Jetpack Compose, Canvas (3)

생성일
2023/01/04 03:50
태그

오각형 드로잉

canvas를 통해 공부하는 와중에 숙제를 받았다. 원의 둘레에다가 72도 간격으로 5개의 점을 찍으면 그것이 바로 정오각형이라고 한다. 바로 찍어 보도록 하자

숙제 오각형 드로잉-1

@Composable fun MyPentagon(){ Canvas( modifier = Modifier .background(color = Color.LightGray) .fillMaxSize() ) { val 반지름 = 400f for (각도 in 0..360 step 72) { drawCircle( brush = Brush.radialGradient( colors = listOf( Color.Red, Color.Yellow ), center = center, radius = 20f ), radius = 20f, center = Offset( center.x + cos(Math.toRadians(각도.toDouble()).toFloat()) * 반지름, center.y + sin(Math.toRadians(각도.toDouble()).toFloat()) * 반지름 ) ) } } }
Kotlin
오각형의 모습이 보인다. Offset x값에는 cos과 각도(라디안), y값에는 sin과 각도(라디안)을 이용해(feat. 반지름)을 이용해 원을 그릴 수 있다는 것을 알았고, 이를 통해 72도 각도마다 점을 찍어 오각형의 꼭지점 마다 점을 찍어 줬다.

숙제 오각형 드로잉-2

이제 점만 찍는 것이 아닌, 선으로 이어 오각형을 그려보자. “숙제 오각형 드로잉-1”에서 오각형의 5개의 꼭지점 Offset을 알 수 있었다. 이렇게 알 수 있는 Offset 좌표를 가지고 선을 연결해보자.
val 반지름 = 400f var step = 0 for (각도 in 72..360 step 72) { drawLine( color = Color.Black, start = Offset( center.x + cos(Math.toRadians(step.toDouble()).toFloat()) * 반지름, center.y + sin(Math.toRadians(step.toDouble()).toFloat()) * 반지름 ), end = Offset( center.x + cos(Math.toRadians(각도.toDouble()).toFloat()) * 반지름, center.y + sin(Math.toRadians(각도.toDouble()).toFloat()) * 반지름 ), strokeWidth = 3.dp.toPx() ) step = 각도 }
Kotlin
drawLine을 이용해 startOffset, endOffset을 지정해 주기만 하면 알아서 그려준다.
이런 결과 화면을 볼 수 있다. 로그를 찍어 보면
// start, end의 각도 start:0, end:72 start:72, end:144 start:144, end:216 start:216, end:288 start:288, end:360
Kotlin
0 부터 72도 각도 마다 5번 찍어 주는 것을 볼 수 있다.

전체 코드

@Composable fun MyPentagon() { Canvas( modifier = Modifier .background(color = Color.LightGray) .fillMaxSize() ) { val 반지름 = 400f var step = 0 for (각도 in 72..360 step 72) { Log.d("drawLine", "start:$step, end:$각도") drawLine( color = Color.Black, start = Offset( center.x + cos(Math.toRadians(step.toDouble()).toFloat()) * 반지름, center.y + sin(Math.toRadians(step.toDouble()).toFloat()) * 반지름 ), end = Offset( center.x + cos(Math.toRadians(각도.toDouble()).toFloat()) * 반지름, center.y + sin(Math.toRadians(각도.toDouble()).toFloat()) * 반지름 ), strokeWidth = 3.dp.toPx() ) step = 각도 } } }
Kotlin

참고