캔버스에 대해 자세히 알아보기

이 시리즈의 이전 게시물에서 모양과 캔버스를 사용하는 방법에 대해 자세히 살펴보았습니다. 이번 회에서는 무엇인가를 그리는 시점에 초점을 맞출 것입니다. 또는 왜.

이상하게 들리나요? 잠깐만.

컴포저블은 사용자 인터페이스의 구성 요소입니다. 그대로 사용하거나 사전 구축된 기능으로 수정할 수 있습니다. 먼저, 그대로:

Text("Hello Compose")

컴포저블의 모양과 동작을 모두 맞춤설정하려면 다음을 사용합니다modifier.

Text(
  modifier = Modifier.border(
    1.dp,
    MaterialTheme.colors.primary
  )
    .padding(8.dp)
    .shadow(4.dp, shape = CircleShape, clip = true),
  text = "Hello Compose"
)

보시다시피 보더, 섀도우 및 패딩을 추가하여 컴포저블을 상당히 수정, 수정했습니다. 사전 빌드된 수정자가 많이 있습니다. 그러나 이들 중 어느 것도 귀하의 필요에 맞지 않으면 어떻게 합니까? 직접 굴려보세요. 곧 알게 되겠지만 Compose를 사용하면 매우 쉽습니다. 하지만 먼저 내부 작동 방식을 살펴보겠습니다.

수정자는 수정자 요소의 정렬된 불변 컬렉션입니다. androidx.compose.ui.Modifier는 이러한 컬렉션을 정의하는 데 도움이 되는 인터페이스입니다. then()는 현재 한정자를 나타내는 Modifier를 반환하고 그 뒤에 다른 시퀀스가 ​​뒤따릅니다. 이 인터페이스를 구현하는 컴패니언 객체도 있습니다. 수정자 확장 팩토리 표현식의 시작으로 사용될 수 있습니다. 이것이 무엇을 의미하는지 곧 알게 될 것입니다. 지금은 padding()를 살펴보십시오.



보시다시피 then()는 PaddingModifier를 수신합니다(androidx.compose.foundation.layout.Padding.kt 내부의 개인 클래스). 이것은 그리기보다 레이아웃에 더 많은 영향을 미치므로 이에 대해 자세히 설명하지 않겠습니다. 중요한 사항: this는 Modifier 인터페이스의 또 다른 구현입니다. 어느 것이 이전에 호출된 다른 확장 함수에 따라 다릅니다. 내 예에서는 border()가 먼저 호출됩니다. 이제 이 수정자 확장 팩터리 표현을 다루겠습니다. border()의 일부 라인은 다음과 같습니다.




composed() 및 factory 를 받는 inspectorInfo 수정자의 결과를 반환합니다.



팩토리는 Modifier 의 구성 가능 기능이자 확장 기능입니다. 그것은 ComposedModifier 로 래핑되고 차례로 then() 로 전달됩니다. ComposedModifier는 추상InspectorValueInfo을 확장하고 Modifier.Element 체인에 포함된 단일 요소인 Modifier를 구현하는 전용 클래스입니다. 하지만 언제 then()를 사용합니까? 그리고 언제 공장이 선호됩니까? 다행히 대부분의 경우 이러한 질문을 처리할 필요가 없습니다. Modifier , drawWithContent() 및 drawBehind() 와 같은 몇 가지 확장 함수drawWithCache()가 있기 때문입니다.

fun Modifier.drawOnYellow() = this.drawBehind {
  drawRect(Color.Yellow)
}

이 수정자는 함께 수정되는 컴포저블 뒤에 노란색 직사각형을 그립니다.

Text(
  modifier = Modifier.drawOnYellow(),
  text = "Hello Compose"
)

귀하의 람다는 androidx.compose.ui.graphics.drawscope.DrawScope 인스턴스를 수신합니다. 이 인터페이스는

a scoped drawing environment with the provided Canvas.
This provides a declarative, stateless API to draw shapes
and paths without requiring consumers to maintain
underlying Canvas state information.

다음.
drawWithContent() 레이아웃의 내용 앞이나 뒤에 그릴 수 있습니다.

fun Modifier.drawRedCross() = this.drawWithContent {
  drawContent()
  drawLine(
    Color.Red, Offset(0f, 0f),
    Offset(size.width - 1, size.height - 1),
    blendMode = BlendMode.SrcAtop,
    strokeWidth = 8f
  )
  drawLine(
    Color.Red, Offset(0f, size.height - 1),
    Offset(size.width - 1, 0f),
    blendMode = BlendMode.SrcAtop,
    strokeWidth = 8f
  )
}

Text(
  modifier = Modifier.drawRedCross(),
  text = "Imperative"
)

람다에서 drawContent()의 위치는 콘텐츠가 그려지는 시기를 정의합니다. 마지막으로 drawWithCache()는

a DrawScope with content that is persisted across
draw calls as long as the size of the drawing area is
the same or any state objects that are read have not
changed. In the event that the drawing area changes, or
the underlying state values that are being read
change, this method is invoked again to recreate objects
to be used during drawing

이 게시물에서 본 것처럼 캔버스에 그림을 그려 컴포저블을 수정할 수 있는 확장 함수를 작성하는 것은 매우 쉽습니다. Canvas와 관련하여 다루었으면 하는 다른 주제가 있습니까? 댓글로 여러분의 생각을 공유해주세요.