Jetpack Compose

시작점과 현재 기준점을 연결하지 않았을 경우의 문제 아래의 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는 정상적으로 ..

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) ..

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에서도 같은 방식으로 직선이 그려진다. 자 어떻게 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..

이번 글에서 다룰 내용 이번 글에서는 drawArc 사용법에 대해 다룬다. Arc는 호라는 뜻이고, drawArc를 사용하면 부채꼴과 혹은 호와 현을 합친 도형을 그릴 수 있다. 예를 들어 아래와 같은 부채꼴 모양을 그리거나 혹은 아래와 같은 호와 현이 합쳐진 모양을 그릴 수도 있다. 이런 모양들은 시계, 체중계, 등 진행도가 필요한 곳에 자주 사용된다. 자 이제 drawArc 사용법에 대해 알아보도록 하자. drawArc 함수 알아보기 drawArc는 color, startAngle, sweepAngle, useCenter, topLeft, size, alpha, style, colorFilter, blendMode의 파라미터를 가지며, 이 중 drawArc에서 모양을 만들기 위해 사용되는 파라미터는 ..