분류 전체보기
[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 UIs] Compose Filled Slider 라이브러리 사용해 슬라이더 만들기
Filled Slider 란? 이번에 Compose용 Filled Slider 라이브러리를 배포했다. Filled Slider은 볼륨 컨트롤이나 밝기 제어 등에 사용할 수 있는 채워지는 형태의 슬라이더 입니다. Filled Slider 라이브러리에서 제공하는 슬라이더는 가로 모드 세로 모드, 슬라이더 모양 설정, Continuous Discrete, 터치 민감도 설정 등 많은 기능들을 지원한다. GitHub : https://github.com/seyoungcho2/FilledSliderCompose GitHub - seyoungcho2/FilledSliderCompose: Provides Filled Slider for Jetpack Compose Provides Filled Slider for Jet..
[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: 회전 시킬 각도를 결정 일반적으로 우리는 '도'라 불리는 단위로 회전 각도를 결정..