[Jetpack Compose] 2. Layouts, theming, and animation(5) #DrawScope

[Jetpack Compose] 2. Layouts, theming, and animation(5) #DrawScope

📌참고자료

• Layouts, theming, and animation | Android Developers

Introduction to drawing in Compose

📌참고자료

• Graphics in Compose | Android Developers

• DrawScope:
  Declarative, stateless drawing API to draw shapes, paths, etc

Spacer(
    modifier = Modifier
        .fillMaxSize()
        .drawBehind {
            // this = DrawScope
        }
)

@DrawScopeMarker
@JvmDefaultWithCompatibility
interface DrawScope : Density {

    val drawContext: DrawContext

    val center: Offset
        get() = drawContext.size.center

    val size: Size
        get() = drawContext.size

    val layoutDirection: LayoutDirection

    fun drawLine(
        brush: Brush,
        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,
        colorFilter: ColorFilter? = null,
        blendMode: BlendMode = DefaultBlendMode
    )

    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,
        colorFilter: ColorFilter? = null,
        blendMode: BlendMode = DefaultBlendMode
    )
	
    ...
    
 }

• Drawing in Compose
  • Modifier.drawBehind
    • draw behind the composable's content
    • a convenient wrapper around Modifier.drawWithContent
  • Modifier.drawWithContent
    • choose when to call the content of the composable
      (ex. infront/behind the drawing)
    • useful for rearranging content
  • Modifier.drawWithCache
    • Objects that are used during drawing are cached
      (until size changes/state variables read inside changes)
    • 내부에서 onDrawBehind 또는 onDrawWithContent 호출

• Modifier.drawWithCache를 사용하는 대신, composition에서 remember로 Object들을 modifier 밖에서 caching하는 방법도 있음

• Canvas Composable:
  a convenient wrapper around Modifier.drawBehind
• DrawScope 내부에서 Canvas 객체에 접근하려면 DrawScope.drawIntoCanvas() 사용

val drawable = ShapeDrawable(OvalShape())
Spacer(
    modifier = Modifier
        .drawWithContent { canvas ->
                drawable.draw(canvas.nativeCanvas)
            }
        }
        .fillMaxSize()
)

• Coordinate System in Compose
  • same as View system
  • pixel 단위로 drawing 됨 -> dp 단위 px로 변환 후 draw 해야
  • always relative to a parent composable
    

• DrawScope Transformations
  • Scale: increase size
    • scaleX(horizontal), scaleY(vertical)
    • 1.0f = no change in scale, 0.5f = half
  • Translation: move
    • translationX(left/right), translationY(up/down)
  • Rotation
    • rotationX(horizontal), rotationY(vertical), rotationZ(standard)
    • value is specified in degrees (0~360)
  • Origin
    • transformOrigin
    • used as point in which transformations take place
  • Clip and shape
    • Modifier.clip: content가 Modifier의 original bound 내부에 있도록 clip
    • graphicLayer의 clip : content가 graphicLayer의 shape 내부에 있도록 clip
  • Alpha
    • set opacity
    • 1.0f = fully opaque, 0.0f = invisible
  • Inset
    • adjust drawing parameters of the current DrawScope
    • change boumdaries & translate drawings

• transformation 여러 개를 적용하려면 DrawScope.withTransform() 사용
  • creates and applies a single transformation
  • all the transformations are performed together as a single operation
  • efficient than making nested calls to single transformations