Viele Apps müssen in der Lage sein, genau zu steuern, was auf den Karten Bildschirm. Sie könnten zum Beispiel einen Kasten oder einen Kreis auf dem Bildschirm platzieren. oder eine aufwendige Anordnung grafischer Elemente in vielen verschiedenen Stilen.
Einfache Zeichnung mit Modifikatoren und DrawScope
Benutzerdefinierte Elemente lassen sich in „Schreiben“ hauptsächlich mit Modifikatoren zeichnen, z. B.
Modifier.drawWithContent
,
Modifier.drawBehind
und
Modifier.drawWithCache
Um beispielsweise etwas hinter der zusammensetzbaren Funktion zu zeichnen, können Sie die Funktion
drawBehind
-Modifikator, um mit der Ausführung von Zeichenbefehlen zu beginnen:
Spacer( modifier = Modifier .fillMaxSize() .drawBehind { // this = DrawScope } )
Wenn Sie nur eine zusammensetzbare Funktion benötigen,
Canvas
zusammensetzbar. Die zusammensetzbare Funktion Canvas
ist ein
praktischer Wrapper um Modifier.drawBehind
. Du platzierst Canvas
so wie bei jedem anderen UI-Element von „Compose“. Im
Canvas
können Sie Elemente zeichnen und dabei ihren Stil und
Standort.
Alle Zeichenmodifikatoren bieten DrawScope
, eine auf einen Bereich reduzierte Zeichenumgebung.
das seinen eigenen Zustand beibehält. So können Sie die Parameter für eine Gruppe
grafische Elemente. Das DrawScope
bietet mehrere nützliche Felder, z. B. size
,
Ein Size
-Objekt, das die aktuellen Abmessungen von DrawScope
angibt.
Um etwas zu zeichnen, können Sie eine der vielen Zeichenfunktionen in DrawScope
verwenden. Für
Beispiel: Mit dem folgenden Code wird ein Rechteck in der oberen linken Ecke des
Bildschirm:
Canvas(modifier = Modifier.fillMaxSize()) { val canvasQuadrantSize = size / 2F drawRect( color = Color.Magenta, size = canvasQuadrantSize ) }<ph type="x-smartling-placeholder">
![Rosa Rechteck, gezeichnet auf einem weißen Hintergrund, der ein Viertel des Bildschirms einnimmt](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_graphics_draw_rect.png?authuser=6&hl=de)
Weitere Informationen zu verschiedenen Modifikatoren für Zeichnungen finden Sie unter Grafikmodifikatoren. Dokumentation.
Koordinatensystem
Um etwas auf dem Bildschirm zu zeichnen, müssen Sie den Versatz (x
und y
) und die Größe des
Ihren Artikel. Bei vielen der Zeichenmethoden auf DrawScope
sind die Position und Größe
werden durch Standardparameterwerte bereitgestellt. Die Standardparameter sind in der Regel
Element am Punkt [0, 0]
auf dem Canvas positionieren und einen Standardwert für
size
, das wie im Beispiel oben den gesamten Zeichenbereich ausfüllt.
wird das Rechteck oben links positioniert. Um die Größe und Position der
müssen Sie mit dem Koordinatensystem in Compose vertraut sein.
Der Ursprung des Koordinatensystems ([0,0]
) befindet sich am Pixel ganz oben links in der
Zeichnungsbereich. Der Wert von x
steigt bei Bewegung nach rechts und y
im Laufe der Zeit an.
nach unten zeigen.
![Ein Raster mit dem Koordinatensystem oben links [0, 0] und unten rechts [Breite, Höhe].](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_coordinate_system_drawing.png?authuser=6&hl=de)
Wenn Sie zum Beispiel eine diagonale Linie von der oberen rechten Ecke
Canvas-Bereich unten links, können Sie den
DrawScope.drawLine()
-Funktion und geben Sie einen Start- und Endversatz mit
entsprechenden x- und y-Positionen:
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 ) }
Grundlegende Transformationen
DrawScope
bietet Transformationen, mit denen sich ändern lässt, wo oder wie die Zeichenbefehle verwendet werden
ausgeführt werden.
Skalieren
Verwenden Sie
DrawScope.scale()
um die Größe Ihrer Zeichenvorgänge um einen Faktor zu erhöhen. Vorgänge wie
scale()
gelten für alle Zeichenvorgänge innerhalb der entsprechenden Lambda-Funktion. Für
Beispiel: Durch den folgenden Code werden scaleX
um das 10-Fache und scaleY
um 15 erhöht.
Mal:
Canvas(modifier = Modifier.fillMaxSize()) { scale(scaleX = 10f, scaleY = 15f) { drawCircle(Color.Blue, radius = 20.dp.toPx()) } }<ph type="x-smartling-placeholder">
![Ein ungleichförmig skalierter Kreis](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_graphics_canvas_scale.png?authuser=6&hl=de)
Übersetzen
Verwenden Sie
DrawScope.translate()
um Ihre Zeichenoperationen nach oben, unten, links oder rechts zu verschieben. Beispiel: Der Parameter
Mit dem folgenden Code wird die Zeichnung um 100 Pixel nach rechts und 300 Pixel nach oben verschoben:
Canvas(modifier = Modifier.fillMaxSize()) { translate(left = 100f, top = -300f) { drawCircle(Color.Blue, radius = 200.dp.toPx()) } }<ph type="x-smartling-placeholder">
![Ein Kreis, der aus der Mitte verschoben wurde](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_graphics_canvas_translate.png?authuser=6&hl=de)
Drehen
Verwenden Sie
DrawScope.rotate()
um Ihre Zeichenvorgänge um einen Drehpunkt zu drehen. Beispiel: Der Parameter
Mit dem folgenden Code wird ein Rechteck um 45 Grad gedreht:
Canvas(modifier = Modifier.fillMaxSize()) { rotate(degrees = 45F) { drawRect( color = Color.Gray, topLeft = Offset(x = size.width / 3F, y = size.height / 3F), size = size / 3F ) } }<ph type="x-smartling-placeholder">
![Ein Smartphone mit einem um 45 Grad gedrehten Rechteck in der Mitte des Displays](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_graphics_canvas_rotate.png?authuser=6&hl=de)
rotate()
, um eine Drehung auf den aktuellen Zeichenbereich anzuwenden, wodurch das Rechteck um 45 Grad gedreht wird.
Einsatz
Mit DrawScope.inset()
können Sie die Standardparameter der aktuellen
DrawScope
, wobei die Grenzen der Zeichnung geändert und die Zeichnungen übersetzt werden
entsprechend:
Canvas(modifier = Modifier.fillMaxSize()) { val canvasQuadrantSize = size / 2F inset(horizontal = 50f, vertical = 30f) { drawRect(color = Color.Green, size = canvasQuadrantSize) } }
Mit diesem Code wird den Zeichenbefehlen effektiv ein Padding hinzugefügt:
<ph type="x-smartling-placeholder">![Ein Rechteck mit rundem Abstand.](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_graphics_canvas_inset.png?authuser=6&hl=de)
Mehrere Transformationen
Um mehrere Transformationen auf Ihre Zeichnungen anzuwenden, verwenden Sie die Methode
DrawScope.withTransform()
-Funktion, die ein
wendet eine einzelne Transformation an, in der alle gewünschten Änderungen kombiniert werden. Mit
withTransform()
ist effizienter als verschachtelte Aufrufe an einzelne Nutzer.
da alle Transformationen gemeinsam in einem
anstatt Compose einzeln zu berechnen und zu speichern,
verschachtelte Transformationen ein.
Mit dem folgenden Code werden beispielsweise sowohl eine Übersetzung als auch eine Rotation auf den Rechteck:
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 ) } }<ph type="x-smartling-placeholder">
![Ein Smartphone mit einem gedrehten Rechteck, das auf die Seite des Displays verschoben wurde](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_graphics_multiple_transforms.png?authuser=6&hl=de)
withTransform
können Sie sowohl eine Drehung als auch eine Verschiebung anwenden. Drehen Sie dazu das Rechteck und verschieben Sie es nach links.Gängige Zeichenvorgänge
Text zeichnen
Um Text in „Schreiben“ zu zeichnen, können Sie normalerweise die zusammensetzbare Funktion Text
verwenden. Sie können jedoch
Wenn Sie sich in einem DrawScope
befinden oder Ihren Text manuell mit
können Sie die Methode
DrawScope.drawText()
.
Wenn Sie Text zeichnen möchten, erstellen Sie mit rememberTextMeasurer
ein TextMeasurer
und rufen Sie drawText
mit dem Measurer auf:
val textMeasurer = rememberTextMeasurer() Canvas(modifier = Modifier.fillMaxSize()) { drawText(textMeasurer, "Hello") }<ph type="x-smartling-placeholder">
![Auf Canvas gezeichnete Hallo](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_graphics_draw_text.png?authuser=6&hl=de)
Text messen
Das Zeichnen von Text unterscheidet sich etwas von anderen Zeichenbefehlen. Normalerweise Geben Sie im Zeichenbefehl die Größe (Breite und Höhe) an, um die Form bzw. das Bild zu zeichnen. Bei Text gibt es einige Parameter, die die Größe des gerenderten Text, wie etwa Schriftgröße, Schriftart, Ligaturen und Buchstabenabstand.
Mit der Funktion „Schreiben“ erhalten Sie mit einem TextMeasurer
Zugriff auf die gemessenen
Textgröße abhängig von den oben genannten Faktoren. Wenn Sie einen Hintergrund zeichnen möchten
hinter dem Text können Sie anhand der gemessenen Informationen die Größe
Bereich, den der Text einnimmt:
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() )
Bei diesem Code-Snippet wird der Text mit einem rosa Hintergrund versehen:
<ph type="x-smartling-placeholder">![Mehrzeiliger Text, der 2⁄3 der gesamten Fläche einnimmt, mit einem Hintergrundrechteck](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_graphics_canvas_draw_text_measured.png?authuser=6&hl=de)
Anpassen der Einschränkungen, der Schriftgröße oder anderer Eigenschaften, die sich auf die gemessene Größe auswirken
führt zu einer neuen Größe. Sie können sowohl für width
als auch für
und height
. Der Text folgt dann auf TextOverflow
. Für
Beispiel: Der folgende Code rendert Text in 1⁄3 der Höhe und 1⁄3 der Breite
des zusammensetzbaren Bereichs und legt TextOverflow
auf TextOverflow.Ellipsis
fest:
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() )
Der Text wird jetzt in den Einschränkungen mit Auslassungspunkten am Ende gezeichnet:
<ph type="x-smartling-placeholder">![Auf rosafarbenem Hintergrund gezeichneter Text mit Auslassungspunkten, die den Text abgeschnitten haben.](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_graphics_canvas_draw_text_ellipsis.png?authuser=6&hl=de)
TextOverflow.Ellipsis
mit festen Einschränkungen bei der Textmessung.Bild zeichnen
Um ein ImageBitmap
mit DrawScope
zu zeichnen, laden Sie das Bild mithilfe von
ImageBitmap.imageResource()
und dann drawImage
aufrufen:
val dogImage = ImageBitmap.imageResource(id = R.drawable.dog) Canvas(modifier = Modifier.fillMaxSize(), onDraw = { drawImage(dogImage) })<ph type="x-smartling-placeholder">
![Ein auf Canvas gezeichnetes Bild eines Hundes](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_graphics_canvas_image.png?authuser=6&hl=de)
ImageBitmap
auf Canvas zeichnenGrundformen zeichnen
In DrawScope
gibt es viele Funktionen zum Zeichnen von Formen. Um eine Form zu zeichnen,
der vordefinierten Zeichenfunktionen wie drawCircle
:
val purpleColor = Color(0xFFBA68C8) Canvas( modifier = Modifier .fillMaxSize() .padding(16.dp), onDraw = { drawCircle(purpleColor) } )
API |
Ausgabe |
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
|
![]() |
Pfad zeichnen
Ein Pfad ist eine Reihe mathematischer Anweisungen, die einmal zu einer Zeichnung führen
ausgeführt haben. DrawScope
kann mit der Methode DrawScope.drawPath()
einen Pfad zeichnen.
Angenommen, Sie möchten ein Dreieck zeichnen. Sie können einen Pfad mit
Funktionen wie lineTo()
und moveTo()
unter Verwendung der Größe des Zeichenbereichs verwenden.
Rufen Sie dann drawPath()
mit diesem neu erstellten Pfad auf, um ein Dreieck zu erhalten.
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() )<ph type="x-smartling-placeholder">
![Ein auf dem Kopf stehendes lilafarbenes Dreieck mit dem Pfad „Schreiben“](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_graphics_canvas_draw_path.png?authuser=6&hl=de)
Path
in Compose wird erstellt und gezeichnet.Auf Canvas
-Objekt zugreifen
Mit DrawScope
haben Sie keinen direkten Zugriff auf ein Canvas
-Objekt. Sie können
DrawScope.drawIntoCanvas()
, um
auf das Canvas
-Objekt selbst, in dem Sie Funktionen aufrufen können.
Wenn Sie beispielsweise ein benutzerdefiniertes Drawable
-Element haben, das Sie auf dem
können Sie auf das Canvas zugreifen, Drawable#draw()
aufrufen und die
Canvas
-Objekt:
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() )<ph type="x-smartling-placeholder">
![Ein ovales schwarzes ShapeDrawable, das die gesamte Größe einnimmt](https://developer.android.com/static/develop/ui/compose/images/graphics/introduction/compose_graphics_canvas_draw_into_canvas.png?authuser=6&hl=de)
Drawable
zu zeichnen.Weitere Informationen
Weitere Informationen zu Zeichnungen in „Compose“ finden Sie in den folgenden Ressourcen:
- Grafikmodifikatoren - Erfahren Sie mehr über die verschiedenen Zeichenarten. Modifizierern.
- Pinsel: Hier erfährst du, wie du die Darstellung deiner Inhalte anpassen kannst.
- Benutzerdefinierte Layouts und Grafiken in Compose – Android Dev Summit 2022 – Anleitung zum Erstellen einer benutzerdefinierten UI in der Funktion „Mit Layouts erstellen“ und Grafiken.
- JetLagged Sample – Compose Sample, das zeigt, wie ein benutzerdefiniertes Diagramm.
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Grafikmodifikatoren
- Grafiken in „Compose“
- Ausrichtungslinien in Jetpack Compose