Android Jetpack Compose UI
[Compose Canvas] Stroke의 cap 사용해 선과 경로의 양끝 모양 설정하기 : StrokeCap
Stroke의 cap 프로퍼티는 무엇을 하는가? Canvas를 다루면서 수많은 선과, 경로를 만들어낸다. 선과 경로를 만들어내는 것까지는 좋은데, 해당 선과 경로는 생각보다 아름답지 않다. 예를 들어 아래와 같은 코드를 만들어보자. @Preview(widthDp = 400, heightDp = 600) @Composable fun DrawCap() { Canvas( modifier = Modifier .fillMaxSize() .background(Color.White), onDraw = { val path = Path().apply { moveTo(100.dp.toPx(), 100.dp.toPx()) // 시작점 변경 lineTo(200.dp.toPx(), 500.dp.toPx()) // (100, 1..
[Compose Canvas] Path의 close 함수 사용해 시작점과 현재 기준점 연결하기
시작점과 현재 기준점을 연결하지 않았을 경우의 문제 아래의 Path를 보자. 아래 Path의 마지막 줄의 lineTo 함수는 이전 기준점인 (300, 100)와 (100, 100)을 잇는 직선을 생성한다. val path = Path().apply { moveTo(100.dp.toPx(), 100.dp.toPx()) // 시작 지점 (100, 100) lineTo(100.dp.toPx(), 300.dp.toPx()) lineTo(300.dp.toPx(), 300.dp.toPx()) lineTo(300.dp.toPx(), 100.dp.toPx()) lineTo(100.dp.toPx(), 100.dp.toPx()) // (300, 100)과 (100, 100)을 잇는 직선 생성 } 이 Path는 정상적으로 ..
[Compose Canvas] Path란 무엇인가?
Path 란 무엇인가? Path는 직선이나 곡선 등의 기하학적인 경로들을 캡슐화하는 클래스이다. Path는 내부에 그려지는 직선 혹은 곡선 정보 등을 포함할 수 있다. 예를 들어 (100, 100) 지점에서 시작하는 200px 크기의 정사각형은 다음과 같이 그릴 수 있다. val path = Path().apply { moveTo(100.dp.toPx(), 100.dp.toPx()) // 시작 지점 옮기기 lineTo(100.dp.toPx(), 300.dp.toPx()) lineTo(300.dp.toPx(), 300.dp.toPx()) lineTo(300.dp.toPx(), 100.dp.toPx()) lineTo(100.dp.toPx(), 100.dp.toPx()) } 1. 먼저 (100f, 100f) ..
[Compose Canvas] rotateRad 사용해 캔버스에 그려진 도형 회전하기
rotateRad 사용해 Canvas 회전시키기 Canvas에서 특정 도형을 회전시키기 위해서는 rotateRad 함수를 사용하면 된다. inline fun DrawScope.rotateRad( radians: Float, pivot: Offset = center, block: DrawScope.() -> Unit ) { withTransform({ rotate(degrees(radians), pivot) }, block) } rotateRad는 인자로 radians를 받아 회전 각도를 결정하며 pivot은 회전 중심점이다. block에는 회전 시킬 도형이나 텍스트를 넣으면 된다. 자 각각에 대해 알아보자. radians: 회전 시킬 각도를 결정 일반적으로 우리는 '도'라 불리는 단위로 회전 각도를 결정..
[Compose Canvas] drawLine 사용해 직선 그리는 방법 한 번에 정리하기
직선의 구성 직선은 시작점과 끝점 그리고 선의 굵기로 이루어진다. Compose의 Canvas에서도 같은 방식으로 직선이 그려진다. 자 어떻게 Canvas에서 직선을 그릴 수 있는지 살펴보도록 하자. drawLine 함수 Canvas에서는 drawLine 함수를 사용해 직선을 그릴 수 있다. fun drawLine( color: Color, start: Offset, end: Offset, strokeWidth: Float = Stroke.HairlineWidth, cap: StrokeCap = Stroke.DefaultCap, pathEffect: PathEffect? = null, /*FloatRange(from = 0.0, to = 1.0)*/ alpha: Float = 1.0f, colorFilt..