이번 글에서 다룰 내용
이번 글에서는 drawOval 사용법에 대해 다룬다. Oval은 타원이라는 뜻이고, 가로의 길이와 세로의 길이가 다를 수 있는 원이다.
drawOval 또한 Color을 사용하는 drawOval 함수와 Brush를 사용하는 drawOval이 있는데, Brush 사용법은 이전 글 drawRect에서 다룬 것과 동일하므로 Color을 사용하는 drawCircle만 다루도록 한다.
drawOval 함수 살펴보기
drawOval은 color, topLeft, size, alpha, style, colorFilter, blendMode를 파라미터로 받는다.
*alpha, style, colorFilter, blendMode는 이전 글에서 다룬 drawRect와 동일하므로 설명을 생략한다.
fun drawOval(
color: Color,
topLeft: Offset = Offset.Zero,
size: Size = this.size.offsetSize(topLeft),
/*@FloatRange(from = 0.0, to = 1.0)*/
alpha: Float = 1.0f,
style: DrawStyle = Fill,
colorFilter: ColorFilter? = null,
blendMode: BlendMode = DefaultBlendMode
)
각 파라미터는 다음의 역할을 한다.
- color: 타원의 색상을 결정
- topLeft: 타원의 왼쪽 상단 지점을 설정
- size: 타원의 크기를 설정
이 함수를 처음 보고 도대체 타원에 왼쪽 상단 지점이 어디에 있을까 하는 생각을 했다. 확인해보니 topLeft는 원을 사각형으로 둘러쌌을 때 생각했을 때 왼쪽 위 꼭지점을 의미하는 것이었다.
또한 이 사각형의 가로, 세로 길이가 바로 size가 된다.
따라서 위 그림을 만드는 drawOval은 다음과 같이 구현할 수 있다.
@Preview(showBackground = true)
@Composable
fun DrawOval() {
Canvas(
modifier = Modifier
.size(300.dp)
.background(Color.White),
onDraw = {
drawOval(
color = Color.Blue,
topLeft = Offset(100.dp.toPx(), 100.dp.toPx()),
size = Size(100.dp.toPx(), 100.dp.toPx()),
)
}
)
}
그러면 여기서 이제 Size의 가로 값만 200.dp.toPx()로 변경해보도록 하자.
@Preview(showBackground = true)
@Composable
fun DrawOval() {
Canvas(
modifier = Modifier
.size(300.dp)
.background(Color.White),
onDraw = {
drawOval(
color = Color.Blue,
topLeft = Offset(100.dp.toPx(), 100.dp.toPx()),
size = Size(200.dp.toPx(), 100.dp.toPx()),
)
}
)
}
그러면 다음과 같이 타원이 나오게 된다.
왼쪽 위 지점이 (100dp, 100dp) 이고 가로 길이가 200dp 세로 길이가 100dp이기 때문이다.
drawOval 정리
drawCircle은 기준점을 중심점으로 잡았는데, drawOval은 다시 사각형처럼 왼쪽 위를 기준으로 타원을 그린다는 점을 기억하자. 또한 가로, 세로 길이만큼의 직사각형을 만든 후, 직사각형의 크기만큼을 꽉 채우는 타원을 만든다.
