오각형 드로잉
숙제 오각형 드로잉-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
복사