Grafika w sekcji Utwórz

Wiele aplikacji musi mieć możliwość dokładnego kontrolowania tego, co ma się wyświetlać na ekranie. Może to być np. umieszczenie pola lub okręgu w odpowiednim miejscu na ekranie lub rozbudowane ułożenie elementów graficznych w wielu różnych stylach.

Podstawowy rysunek z modyfikatorami i DrawScope

Podstawowym sposobem rysowania niestandardowych elementów w funkcji tworzenia wiadomości jest użycie modyfikatorów takich jak Modifier.drawWithContent, Modifier.drawBehind i Modifier.drawWithCache.

Aby na przykład narysować coś w tyle funkcji kompozycyjnej, możesz użyć modyfikatora drawBehind, aby zacząć wykonywać polecenia rysowania:

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

Jeśli potrzebujesz tylko narzędzia kompozycyjnego do rysowania, możesz użyć funkcji kompozycyjnej Canvas. Element kompozycyjny Canvas to wygodny kod wokół Modifier.drawBehind. Element Canvas umieszczasz w układzie w taki sam sposób jak każdy inny element interfejsu tworzenia wiadomości. W Canvas możesz rysować elementy, kontrolując ich styl i lokalizację.

Wszystkie modyfikatory rysowania udostępniają DrawScope – środowisko rysowania o zakresie, które zachowuje własny stan. Dzięki temu możesz ustawić parametry grupy elementów graficznych. DrawScope zawiera kilka przydatnych pól, np. size, obiekt Size określający bieżące wymiary obiektu DrawScope.

Aby coś narysować, możesz użyć jednej z wielu funkcji rysowania w przeglądarce DrawScope. Na przykład ten kod rysuje prostokąt w lewym górnym rogu ekranu:

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasQuadrantSize = size / 2F
    drawRect(
        color = Color.Magenta,
        size = canvasQuadrantSize
    )
}
CanvasSnippets.kt

Więcej informacji o różnych modyfikatorach rysunku znajdziesz w dokumentacji modyfikatorów graficznych.

Układ współrzędnych

Aby narysować coś na ekranie, musisz znać przesunięcie (x i y) oraz rozmiar elementu. W przypadku wielu metod rysowania w DrawScope położenie i rozmiar są określane przez domyślne wartości parametrów. Parametry domyślne zwykle umieszczają element w punkcie [0, 0] w obszarze roboczym i określają wartość domyślną (size), która wypełnia cały obszar rysowania, jak w przykładzie powyżej – prostokąt znajduje się w lewym górnym rogu. Aby dostosować rozmiar i położenie elementu, musisz poznać układ współrzędnych w funkcji Utwórz.

Początek układu współrzędnych ([0,0]) znajduje się w lewym górnym rogu obszaru rysowania. Wskaźnik x rośnie, gdy przesuwa się w prawo, a y rośnie, gdy przesuwa się w dół.

Jeśli na przykład chcesz narysować ukośną linię od prawego górnego rogu obszaru roboczego do lewego dolnego rogu, możesz użyć funkcji DrawScope.drawLine() i określić przesunięcie początku i końca z odpowiednimi pozycjami x i y:

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasWidth = size.width
    val canvasHeight = size.height
    drawLine(
        start = Offset(x = canvasWidth, y = 0f),
        end = Offset(x = 0f, y = canvasHeight),
        color = Color.Blue
    )
}
CanvasSnippets.kt

Przekształcenia podstawowe

DrawScope umożliwia przekształcenie, które pozwala zmienić miejsce i sposób wykonywania poleceń rysowania.

Skala

Użyj DrawScope.scale(), aby zwiększyć rozmiar operacji rysowania o dany współczynnik. Operacje takie jak scale() mają zastosowanie do wszystkich operacji rysowania w ramach danej funkcji lambda. Na przykład ten kod zwiększa wartość scaleX 10 razy i scaleY 15 razy:

Canvas(modifier = Modifier.fillMaxSize()) {
    scale(scaleX = 10f, scaleY = 15f) {
        drawCircle(Color.Blue, radius = 20.dp.toPx())
    }
}
CanvasSnippets.kt

Tłumacz

Używaj DrawScope.translate(), aby przenosić operacje rysowania w górę, w dół, w lewo i w prawo. Na przykład ten kod przesuwa rysunek o 100 pikseli w prawo i o 300 pikseli w górę:

Canvas(modifier = Modifier.fillMaxSize()) {
    translate(left = 100f, top = -300f) {
        drawCircle(Color.Blue, radius = 200.dp.toPx())
    }
}
CanvasSnippets.kt

Obróć

Aby obracać operacje rysowania wokół punktu przestawnego, użyj DrawScope.rotate(). Na przykład ten kod obraca prostokąt o 45 stopni:

Canvas(modifier = Modifier.fillMaxSize()) {
    rotate(degrees = 45F) {
        drawRect(
            color = Color.Gray,
            topLeft = Offset(x = size.width / 3F, y = size.height / 3F),
            size = size / 3F
        )
    }
}
CanvasSnippets.kt

Odcięcie

Użyj DrawScope.inset(), aby dostosować domyślne parametry bieżącego DrawScope, zmieniając granice rysowania i tłumacząc rysunki:

Canvas(modifier = Modifier.fillMaxSize()) {
    val canvasQuadrantSize = size / 2F
    inset(horizontal = 50f, vertical = 30f) {
        drawRect(color = Color.Green, size = canvasQuadrantSize)
    }
}
CanvasSnippets.kt

Ten kod dodaje dopełnienie do poleceń rysowania:

Wiele przekształceń

Aby zastosować do rysunków wiele przekształceń, użyj funkcji DrawScope.withTransform(), która tworzy i stosuje jedno przekształcenie łączące wszystkie pożądane zmiany. Korzystanie z klasy withTransform() jest bardziej wydajne niż używanie zagnieżdżonych wywołań poszczególnych przekształceń, ponieważ wszystkie przekształcenia są wykonywane razem w ramach jednej operacji, zamiast tworzyć i zapisywać każdą z zagnieżdżonych przekształceń.

Na przykład ten kod stosuje do prostokąta zarówno przesunięcie, jak i obrót:

Canvas(modifier = Modifier.fillMaxSize()) {
    withTransform({
        translate(left = size.width / 5F)
        rotate(degrees = 45F)
    }) {
        drawRect(
            color = Color.Gray,
            topLeft = Offset(x = size.width / 3F, y = size.height / 3F),
            size = size / 3F
        )
    }
}
CanvasSnippets.kt

Typowe operacje rysowania

Narysuj tekst

Do rysowania tekstu w funkcji tworzenia wiadomości zwykle możesz użyć funkcji kompozycyjnej Text. Jeśli jednak używasz DrawScope lub chcesz narysować tekst ręcznie za pomocą dostosowywania, możesz użyć metody DrawScope.drawText().

Aby narysować tekst, utwórz TextMeasurer przy użyciu rememberTextMeasurer i wywołaj drawText za pomocą miernika:

val textMeasurer = rememberTextMeasurer()

Canvas(modifier = Modifier.fillMaxSize()) {
    drawText(textMeasurer, "Hello")
}
CanvasSnippets.kt

Zmierz tekst

Rysowanie tekstu działa trochę inaczej niż pozostałe polecenia do rysowania. Normalnie, aby narysować kształt lub obraz, wykonuje się polecenie rysowania zawierające rozmiar (szerokość i wysokość). W przypadku tekstu rozmiar wyświetlanego tekstu zależy od kilku parametrów, takich jak rozmiar czcionki, czcionka, ligatury i odstępy między literami.

W przypadku tworzenia wiadomości możesz użyć TextMeasurer, aby uzyskać dostęp do zmierzonego rozmiaru tekstu (w zależności od powyższych czynników). Jeśli chcesz narysować tło za tekstem, możesz użyć zmierzonych informacji, aby uzyskać rozmiar obszaru, który zajmuje:

val textMeasurer = rememberTextMeasurer()

Spacer(
    modifier = Modifier
        .drawWithCache {
            val measuredText =
                textMeasurer.measure(
                    AnnotatedString(longTextSample),
                    constraints = Constraints.fixedWidth((size.width * 2f / 3f).toInt()),
                    style = TextStyle(fontSize = 18.sp)
                )

            onDrawBehind {
                drawRect(pinkColor, size = measuredText.size.toSize())
                drawText(measuredText)
            }
        }
        .fillMaxSize()
)
CanvasSnippets.kt

Ten fragment kodu powoduje wyświetlanie różowego tła w tekście:

Dostosowanie ograniczeń, rozmiaru czcionki lub innych właściwości, które mają wpływ na zmierzony rozmiar, powoduje wygenerowanie nowego raportu o danym rozmiarze. Możesz ustawić stały rozmiar zarówno w polu width, jak i height, aby tekst był zgodny z ustawionym TextOverflow. Na przykład ten kod renderuje tekst w 1⁄3 wysokości i 1⁄3 szerokości obszaru kompozycyjnego, a w polu TextOverflow ustawia się TextOverflow.Ellipsis:

val textMeasurer = rememberTextMeasurer()

Spacer(
    modifier = Modifier
        .drawWithCache {
            val measuredText =
                textMeasurer.measure(
                    AnnotatedString(longTextSample),
                    constraints = Constraints.fixed(
                        width = (size.width / 3f).toInt(),
                        height = (size.height / 3f).toInt()
                    ),
                    overflow = TextOverflow.Ellipsis,
                    style = TextStyle(fontSize = 18.sp)
                )

            onDrawBehind {
                drawRect(pinkColor, size = measuredText.size.toSize())
                drawText(measuredText)
            }
        }
        .fillMaxSize()
)
CanvasSnippets.kt

Tekst jest teraz rysowany w ograniczeniach z wielokropkiem na końcu:

Narysuj obraz

Aby narysować wzór ImageBitmap za pomocą DrawScope, wczytaj obraz za pomocą polecenia ImageBitmap.imageResource(), a następnie wywołaj drawImage:

val dogImage = ImageBitmap.imageResource(id = R.drawable.dog)

Canvas(modifier = Modifier.fillMaxSize(), onDraw = {
    drawImage(dogImage)
})
CanvasSnippets.kt

Narysuj kształty podstawowe

W DrawScope jest wiele funkcji rysowania kształtów. Aby narysować kształt, użyj jednej ze wstępnie zdefiniowanych funkcji rysowania, np. drawCircle:

val purpleColor = Color(0xFFBA68C8)
Canvas(
    modifier = Modifier
        .fillMaxSize()
        .padding(16.dp),
    onDraw = {
        drawCircle(purpleColor)
    }
)
CanvasSnippets.kt

Interfejs API	Odpowiedź
drawCircle()
drawRect()
drawRoundedRect()
drawLine()
drawOval()
drawArc()
drawPoints()

Narysuj ścieżkę

Ścieżka to seria instrukcji matematycznych, których wynikiem jest rysunek. DrawScope może narysować ścieżkę przy użyciu metody DrawScope.drawPath().

Załóżmy, że chcesz narysować trójkąt. Możesz wygenerować ścieżkę za pomocą funkcji takich jak lineTo() i moveTo(), korzystając z rozmiaru obszaru rysowania. Następnie wywołaj funkcję drawPath(), używając tej nowo utworzonej ścieżki, aby uzyskać trójkąt.

Spacer(
    modifier = Modifier
        .drawWithCache {
            val path = Path()
            path.moveTo(0f, 0f)
            path.lineTo(size.width / 2f, size.height / 2f)
            path.lineTo(size.width, 0f)
            path.close()
            onDrawBehind {
                drawPath(path, Color.Magenta, style = Stroke(width = 10f))
            }
        }
        .fillMaxSize()
)
CanvasSnippets.kt

Uzyskuję dostęp do Canvas obiektu

DrawScope nie zapewnia bezpośredniego dostępu do obiektu Canvas. Możesz użyć polecenia DrawScope.drawIntoCanvas(), aby uzyskać dostęp do samego obiektu Canvas, w którym można wywoływać funkcje.

Jeśli na przykład masz niestandardowy obiekt Drawable, który chcesz narysować na obszarze roboczym, możesz otworzyć obszar roboczy i wywołać funkcję Drawable#draw(), przekazując obiekt Canvas:

val drawable = ShapeDrawable(OvalShape())
Spacer(
    modifier = Modifier
        .drawWithContent {
            drawIntoCanvas { canvas ->
                drawable.setBounds(0, 0, size.width.toInt(), size.height.toInt())
                drawable.draw(canvas.nativeCanvas)
            }
        }
        .fillMaxSize()
)
CanvasSnippets.kt

Więcej informacji

Więcej informacji o rysowaniu w Compose znajdziesz w tych materiałach:

• Modyfikatory graficzne – poznaj różne typy modyfikatorów rysowania.
• Pędzel – dowiedz się, jak dostosować sposób malowania treści.
• Custom Layouts and Graphics in Compose – Android Dev Summit 2022 – dowiedz się, jak utworzyć niestandardowy interfejs w narzędziu Compose przy użyciu układów i grafiki.
• JetLagged Sample – przykładowy kod pokazujący, jak narysować wykres niestandardowy.

Polecane dla Ciebie

• Uwaga: tekst linku wyświetla się, gdy JavaScript jest wyłączony
• Modyfikatory graficzne
• Grafika w funkcji tworzenia wiadomości
• Wyrównywanie wierszy w Jetpack Compose