Grafika w sekcji Utwórz

Wiele aplikacji musi mieć możliwość precyzyjnego kontrolowania tego, co jest wyświetlane na ekranie. Może to być coś tak prostego jak umieszczenie na ekranie kwadratu lub koła w odpowiednim miejscu. Może to być też skomplikowane rozmieszczenie elementów graficznych w różnych stylach.

Rysunek podstawowy z modyfikatorami i DrawScope

Głównym sposobem tworzenia elementów niestandardowych w sekcji Komponowanie jest używanie modyfikatorów, takich jak Modifier.drawWithContent, Modifier.drawBehind i Modifier.drawWithCache.

Aby na przykład narysować coś za kompozycją, możesz użyć modyfikatora drawBehind, aby rozpocząć wykonywanie poleceń rysowania:

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

Jeśli potrzebujesz tylko kompozytowa, która rysuje, możesz użyć kompozytowa Canvas. Komponent Canvas to wygodna szata dla Modifier.drawBehind. Element Canvas umieszczasz w układzie w taki sam sposób jak każdy inny element interfejsu tworzenia wiadomości. W sekcji Canvas możesz rysować elementy z dokładną kontrolą nad ich stylem 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. Obiekt DrawScope zawiera kilka przydatnych pól, takich jak size, oraz obiekt Size określający bieżące wymiary obiektu DrawScope.

Aby coś narysować, możesz użyć jednej z wielu funkcji rysowania w 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 rysowania znajdziesz w dokumentacji Modyfikatory grafiki.

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 obiekcie DrawScope pozycja i rozmiar są podawane przez domyślne wartości parametrów. Parametry domyślne zwykle umieszczają element w miejscu [0, 0] na kanwie i zawierają domyślną wartość size, która wypełnia całą powierzchnię rysunku, jak w przykładzie powyżej – prostokąt jest umieszczony w lewym górnym rogu. Aby dostosować rozmiar i położenie elementu, musisz zrozumieć system współrzędnych w Compose.

Punkt początkowy układu współrzędnych ([0,0]) znajduje się w lewym górnym rogu obszaru rysunku. 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

Podstawowe przekształcenia

DrawScope oferuje przekształcenia, które umożliwiają zmianę miejsca lub sposobu wykonywania poleceń rysowania.

Skala

Użyj parametru DrawScope.scale(), aby zwiększyć rozmiar operacji rysowania. Operacje takie jak scale() są stosowane do wszystkich operacji rysowania w odpowiedniej funkcji lambda. Na przykład ten kod zwiększa wartość scaleX 10 razy, a wartość scaleY – 15 razy:

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

Przetłumacz

Aby przesuwać operacje rysowania w górę, w dół, w lewo lub w prawo, użyj przycisku DrawScope.translate(). Na przykład kod poniżej 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óć

Użyj opcji DrawScope.rotate() , aby obracać rysunek wokół punktu obrotu. 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 parametru DrawScope.inset(), aby dostosować domyślne parametry bieżącego DrawScope, zmieniając w ten sposób granice rysunku i odpowiednio przesuwają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 wypełnienie do poleceń rysowania:

Wiele przekształceń

Aby zastosować do rysunków wiele przekształceń, użyj funkcji DrawScope.withTransform(), która tworzy i zachowuje pojedyncze przekształcenie, łącząc wszystkie zmiany. Użycie funkcji withTransform() jest wydajniejsze niż wywoływanie zagnieżdżonych funkcji w przypadku poszczególnych przekształceń, ponieważ wszystkie przekształcenia są wykonywane razem w ramach pojedynczej operacji, a nie wymagają obliczania i zapisywania przez funkcję Compose poszczególnych 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

Rysowanie tekstu

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 obiekt TextMeasurer za pomocą obiektu rememberTextMeasureri wywołaj funkcję drawText z użyciem narzędzia do pomiaru:

val textMeasurer = rememberTextMeasurer()

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

Tekst pomiaru

Rysowanie tekstu działa trochę inaczej niż pozostałe polecenia do rysowania. Zazwyczaj podajesz polecenie rysowania rozmiar (szerokość i wysokość), aby narysować kształt lub obraz. W przypadku tekstu istnieje kilka parametrów, które kontrolują rozmiar renderowanego tekstu, takich jak rozmiar czcionki, czcionka, ligatury i odstępy między literami.

W Compose możesz użyć elementu 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 zajmowanego przez tekst:

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świetlenie różowego tła tekstu:

Zmiana ograniczeń, rozmiaru czcionki lub dowolnej właściwości wpływającej na zmierzony rozmiar powoduje zgłoszenie nowego rozmiaru. Możesz ustawić stały rozmiar zarówno w polu width, jak i height, aby tekst był zgodny z ustawionym TextOverflow. Na przykład kod poniżej renderuje tekst na wysokości ⅓ i szerokości ⅓ obszaru kompozycyjnego oraz ustawia wartość TextOverflow na 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 wyświetlany w ograniczeniach z wielokropkiem na końcu:

Narysuj obraz

Aby narysować ImageBitmap za pomocą DrawScope, załaduj obraz za pomocą ImageBitmap.imageResource(), a następnie wywołaj funkcję drawImage:

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

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

Rysowanie podstawowych kształtów

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	Urządzenie wyjściowe
drawCircle()
drawRect()
drawRoundedRect()
drawLine()
drawOval()
drawArc()
drawPoints()

Rysuj ścieżkę

Ścieżka to seria instrukcji matematycznych, która po wykonaniu tworzy rysunek. DrawScope może narysować ścieżkę za pomocą metody DrawScope.drawPath().

Załóżmy, że chcesz narysować trójkąt. Ścieżkę możesz wygenerować za pomocą funkcji takich jak lineTo() i moveTo(), korzystając z wielkości obszaru rysunku. 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

Dostęp do obiektu Canvas

DrawScope nie zapewnia bezpośredniego dostępu do obiektu Canvas. Możesz użyć funkcji DrawScope.drawIntoCanvas(), aby uzyskać dostęp do obiektu Canvas, którego możesz używać do wywoływania funkcji.

Jeśli np. masz niestandardową funkcję Drawable, która ma rysować na płótnie, możesz uzyskać dostęp do obrazu 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 grafiki – informacje o różnych typach modyfikatorów rysowania.
• Pędzel – dowiedz się, jak dostosować sposób malowania treści.
• Niestandardowe układy i grafiki w Compose – Android Dev Summit 2022 – dowiedz się, jak utworzyć niestandardowy interfejs użytkownika w Compose za pomocą układów i grafik.
• JetLagged Sample – przykładowy kod pokazujący, jak narysować wykres niestandardowy.