Auf Canvas-Objekte zeichnen

Dieses Codelab ist Teil des Kurses „Advanced Android in Kotlin“. Sie profitieren von diesem Kurs, wenn Sie die Codelabs nacheinander durcharbeiten. Das ist aber nicht zwingend erforderlich. Alle Kurs-Codelabs finden Sie auf der Landingpage für Codelabs auf Android-Geräten für Fortgeschrittene.

Dieses Codelab ist Teil einer Serie, die dich durch das Erstellen benutzerdefinierter Ansichten, das Zeichnen auf einem Canvas, das Zuschneiden von Canvas-Objekten und die Verwendung von Shadern für coole Effekte führt. Wir empfehlen, alle Codelabs in der richtigen Reihenfolge durchzugehen, da sie Schritt für Schritt ausgeführt werden.

Die Codelabs in dieser Reihe sind:

• 2.1 Benutzerdefinierte Ansichten erstellen
• 2.2 Zeichnen auf Canvas-Objekte
• 2.3 Clips für Canvas-Objekte
• 2.4 Effekte mit Shadern erstellen [TBD]

Einführung

In Android stehen Ihnen verschiedene Verfahren zur Implementierung benutzerdefinierter 2D-Grafiken und Animationen in Ansichten zur Verfügung.

Neben der Verwendung von Drawables können Sie auch Zeichnungen mit den Zeichenmethoden der Klasse Canvas erstellen. Die Canvas ist eine 2D-Zeichnungsoberfläche, die Methoden zum Zeichnen bietet. Das ist sinnvoll, wenn sich deine App von selbst regelmäßig neu zeichnen muss, da sich die Änderungen im Laufe der Zeit für den Nutzer ändern. In diesem Codelab lernen Sie, wie Sie auf einem View-Element eine Leinwand erstellen und zeichnen.

Folgende Vorgänge können auf einem Canvas ausgeführt werden:

• Fülle die gesamte Fläche mit Farben.
• Zeichnen Sie Formen wie Rechtecke, Bögen und Pfade, die wie in einem Paint-Objekt definiert definiert sind. Das Objekt Paint enthält die Stil- und Farbinformationen zum Zeichnen von Geometrien (z. B. Linie, Rechteck, Oval und Pfade) oder beispielsweise die Schriftart.
• Transformationen wie Übersetzung, Skalierung oder benutzerdefinierte Transformationen anwenden.
• Sie können eine Clip- oder Pfadform auf den Canvas anwenden, um dessen sichtbare Teile zu definieren.

• Mit Canvas werden Formen definiert, die Sie auf dem Bildschirm zeichnen können.
• Farbe definiert die Farbe, den Stil, die Schriftart usw. jeder gezeichneten Form.

Android-Zeichnen (super vereinfacht!)

Das Zeichnen in Android oder einem anderen modernen System ist ein komplexer Prozess, der mehrere Abstraktionen in sich zieht und bei den Hardwareoptimierungen eingesetzt wird. Das Zeichnen von Android ist ein faszinierendes Thema, über das viel geschrieben wird. Es wird jedoch im Rahmen dieses Codelabs nicht gezeigt.

Für dieses Codelab und die zugehörige App, die auf einem Canvas zur Anzeige im Vollbildmodus zeichnen, können Sie sich das folgende Beispiel vorstellen.

1. Sie benötigen eine Ansicht, die zeigt, was gemalt wird. Hierbei kann es sich um eine der Ansichten des Android-Systems handeln. Alternativ können Sie in diesem Codelab eine benutzerdefinierte Ansicht erstellen, die als Inhaltsansicht für Ihre App (MyCanvasView) dient.
2. Wie alle Ansichten enthält diese Ansicht einen eigenen Canvas (canvas).
3. Die einfachste Methode zum Zeichnen auf dem Canvas einer Ansicht besteht darin, dass Sie die Methode onDraw() überschreiben und auf dem Canvas zeichnen.
4. Wenn Sie eine Zeichnung erstellen, müssen Sie den zuvor gezeichneten Inhalt im Cache speichern. Es gibt mehrere Möglichkeiten, Ihre Daten im Cache zu speichern. Eine davon wird in einer Bitmap (extraBitmap) gespeichert. Eine andere ist das Speichern eines Verlaufs der gezeichneten Daten als Koordinaten oder Anweisungen.
5. Mithilfe der Canvas Zeichnungen API kannst du die Caching-Bitmap (extraBitmap) erstellen. Dazu erstellst du eine Caching-Canvas (extraCanvas) für deine Caching-Bitmap.
6. Anschließend zeichnen Sie auf Ihrem Caching-Canvas (extraCanvas) auf Ihrer Caching-Bitmap (extraBitmap).
7. Damit alles auf dem Bildschirm gezeichnet wird, weisest du den Canvas (canvas) der Ansicht an, die Caching-Bitmap (extraBitmap) zu zeichnen.

Was Sie bereits wissen sollten

• Wie Sie eine App mit einer Aktivität, einem einfachen Layout und mit Android Studio erstellen.
• Ereignis-Handler mit Datenansichten verknüpfen
• So erstellen Sie eine benutzerdefinierte Ansicht.

Lerninhalte

• Hiermit wird ein Canvas-Element erstellt und als Reaktion auf Berührung des Nutzers gezeichnet.

Aufgaben

• Erstelle eine App, bei der als Reaktion auf den Nutzer, der den Bildschirm berührt, Linien auf dem Bildschirm gezeichnet werden.
• Zeichne Bewegungsereignisse auf und zeichnet daraufhin als Reaktion auf einem Canvas Linien, die in einer benutzerdefinierten Vollbildansicht auf dem Bildschirm angezeigt werden.

Die App MiniPaint verwendet eine benutzerdefinierte Ansicht, um entsprechend dem Screenshot unten eine Linie als Reaktion auf Nutzerbewegungen anzuzeigen.

Schritt 1: MiniPaint-Projekt erstellen

1. Erstellen Sie ein neues Kotlin-Projekt namens MiniPaint, das die Vorlage Empty Activity (Leere Aktivität) verwendet.
2. Öffnen Sie die Datei app/res/values/colors.xml und fügen Sie die folgenden zwei Farben hinzu.

<color name="colorBackground">#FFFF5500</color>
<color name="colorPaint">#FFFFEB3B</color>

3. styles.xml öffnen
4. Ersetzen Sie im übergeordneten Element des angegebenen AppThemeStils DarkActionBar durch NoActionBar. Dadurch wird die Aktionsleiste entfernt, sodass Sie im Vollbildmodus zeichnen können.

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

Schritt 2: MyCanvasView-Klasse erstellen

In diesem Schritt erstellen Sie die benutzerdefinierte Ansicht "MyCanvasView" zum Zeichnen.

1. Erstelle im app/java/com.example.android.minipaint-Paket eine neue Kotlin-Datei/-Klasse mit dem Namen MyCanvasView.
2. Richten Sie die MyCanvasView-Klasse auf die View-Klasse aus und übergeben Sie die context: Context. Akzeptieren Sie die vorgeschlagenen Importe.

import android.content.Context
import android.view.View

class MyCanvasView(context: Context) : View(context) {
}

Schritt 3: MyCanvasView als Inhaltsansicht festlegen

Um zu sehen, was du in MyCanvasView zeichnen möchtest, musst du es als Inhaltsansicht für MainActivity festlegen.

1. Öffne strings.xml und definiere einen String, der für die Inhaltsbeschreibung der Ansicht verwendet werden soll.

<string name="canvasContentDescription">Mini Paint is a simple line drawing app.
   Drag your fingers to draw. Rotate the phone to clear.</string>

2. MainActivity.kt öffnen
3. Löschen Sie in onCreate() setContentView(R.layout.activity_main).
4. Erstelle eine Instanz von MyCanvasView.

val myCanvasView = MyCanvasView(this)

5. Darunter fordern Sie den Vollbildmodus für das Layout myCanvasView an. Setzen Sie dazu das Flag SYSTEM_UI_FLAG_FULLSCREEN auf myCanvasView. So wird die Ansicht vollständig vom Bildschirm ausgefüllt.

myCanvasView.systemUiVisibility = SYSTEM_UI_FLAG_FULLSCREEN

6. Fügen Sie eine Inhaltsbeschreibung hinzu.

myCanvasView.contentDescription = getString(R.string.canvasContentDescription)

7. Darunter kannst du die Inhaltsansicht auf myCanvasView setzen.

setContentView(myCanvasView)

Hinweis:Sie müssen die Größe der Datenansicht in Zeichnungen kennen, aber die Größe der Datenansicht in onCreate() können Sie nicht ermitteln, da die Größe derzeit nicht ermittelt werden kann.

8. Führen Sie Ihre App aus. Sie sehen einen völlig weißen Bildschirm, da der Canvas keine Größe hat und Sie noch nichts gezeichnet haben.

Schritt 1: onSizeChanged() überschreiben

Die Methode onSizeChanged() wird vom Android-System aufgerufen, wenn sich die Größe einer Ansicht ändert. Da die Ansicht ohne Größe beginnt, wird die Methode onSizeChanged() der Ansicht auch aufgerufen, nachdem die Aktivität sie erstellt und aufgebläht hat. Diese onSizeChanged()-Methode ist daher der ideale Ort, um den Canvas der Ansicht zu erstellen und einzurichten.

1. In MyCanvasView können Sie auf Klassenebene Variablen für einen Canvas und eine Bitmap definieren. Nennen Sie sie extraCanvas und extraBitmap. Hier sehen Sie eine Bitmap und einen Canvas für das Caching der Daten.

private lateinit var extraCanvas: Canvas
private lateinit var extraBitmap: Bitmap

2. Definieren Sie eine Variable backgroundColor auf Kursebene für die Hintergrundfarbe des Canvas und initialisieren Sie sie mit der zuvor definierten colorBackground.

private val backgroundColor = ResourcesCompat.getColor(resources, R.color.colorBackground, null)

3. Überschreibe in „MyCanvasView“ die Methode „onSizeChanged()“. Diese Callback-Methode wird vom Android-System mit den geänderten Bildschirmabmessungen aufgerufen, d. h. mit einer neuen Breite und Höhe (zum Ändern) und der alten Breite und Höhe (zum Ändern).

override fun onSizeChanged(width: Int, height: Int, oldWidth: Int, oldHeight: Int) {
   super.onSizeChanged(width, height, oldWidth, oldHeight)
}

4. Erstellen Sie in onSizeChanged() eine Instanz von Bitmap mit der neuen Breite und Höhe (der Bildschirmgröße) und weisen Sie sie extraBitmap zu. Das dritte Argument ist die Bitmap-Farbkonfiguration. ARGB_8888 speichert jede Farbe in 4 Byte und wird empfohlen.

extraBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)

5. Erstellen Sie eine Canvas-Instanz aus extraBitmap und weisen Sie sie extraCanvas zu.

 extraCanvas = Canvas(extraBitmap)

6. Geben Sie die Hintergrundfarbe an, in der extraCanvas gefüllt werden soll.

extraCanvas.drawColor(backgroundColor)

7. Mit onSizeChanged() werden bei jeder Ausführung der Funktion eine neue Bitmap und ein Canvas erstellt. Du benötigst eine neue Bitmap, da sich die Größe geändert hat. Es handelt sich dabei jedoch um ein Speicherleck. Dabei verbleiben die alten Bitmaps. Reparieren Sie extraBitmap, bevor Sie den nächsten erstellen, indem Sie diesen Code direkt nach dem Aufruf von super hinzufügen.

if (::extraBitmap.isInitialized) extraBitmap.recycle()

Schritt 2: onDraw() überschreiben

Alle Zeichnungen für MyCanvasView werden in onDraw() ausgeführt.

Rufen Sie zuerst den Canvas auf und füllen Sie den Bildschirm mit der Hintergrundfarbe, die Sie in onSizeChanged() festgelegt haben.

1. Überschreiben Sie onDraw() und zeichnen Sie den Inhalt des im Cache gespeicherten extraBitmap auf dem mit der Ansicht verknüpften Canvas. Die Methode drawBitmap() Canvas gibt es in mehreren Versionen. In diesem Code kannst du die Bitmap, die x- und y-Koordinaten (in Pixeln) der linken oberen Ecke und die null für die Paint angeben, da diese später festgelegt werden.

override fun onDraw(canvas: Canvas) {
   super.onDraw(canvas)
canvas.drawBitmap(extraBitmap, 0f, 0f, null)
}

Der Canvas, der an onDraw() übergeben und vom System zum Anzeigen der Bitmap verwendet wird, unterscheidet sich von der Oberfläche, die Sie in der onSizeChanged()-Methode erstellt und von Ihnen zum Zeichnen auf der Bitmap verwendet haben.

Hinweis:Das für ein Zeichnen auf einem Canvas verwendete 2D-Koordinatensystem wird in Pixeln angegeben. Der Ausgangspunkt (0,0) befindet sich oben links in Canvas.

2. Führen Sie Ihre App aus. Anschließend sollte der gesamte Bildschirm mit der angegebenen Hintergrundfarbe gefüllt sein.

Zum Zeichnen benötigen Sie ein Paint-Objekt, das angibt, wie gezeichnet wird, und ein Path-Element, das angibt, was gezeichnet werden soll.

Schritt 1: Paint-Objekt initialisieren

1. Definieren Sie in MyCanvasView.kt auf oberster Ebene eine Konstante für die Strichbreite.

private const val STROKE_WIDTH = 12f // has to be float

2. Definieren Sie auf Klassenebene von MyCanvasView die Variable drawColor, in der die Farbe gezeichnet werden soll, und initialisieren Sie sie mit der colorPaint-Ressource, die Sie zuvor definiert haben.

private val drawColor = ResourcesCompat.getColor(resources, R.color.colorPaint, null)

3. Fügen Sie auf Kursebene unten eine Variable paint für ein Paint-Objekt ein und initialisieren Sie sie so:

// Set up the paint with which to draw.
private val paint = Paint().apply {
   color = drawColor
   // Smooths out edges of what is drawn without affecting shape.
   isAntiAlias = true
   // Dithering affects how colors with higher-precision than the device are down-sampled.
   isDither = true
   style = Paint.Style.STROKE // default: FILL
   strokeJoin = Paint.Join.ROUND // default: MITER
   strokeCap = Paint.Cap.ROUND // default: BUTT
   strokeWidth = STROKE_WIDTH // default: Hairline-width (really thin)
}

• Die color der paint ist die drawColor, die Sie zuvor definiert haben.
• isAntiAlias definiert, ob die Kantenglättung angewendet wird. Mit der Einstellung isAntiAlias auf true werden die Ränder der gezeichneten Elemente geglättet (ohne Beeinträchtigung der Form).
• isDither, wenn „true“, wirkt sich darauf aus, wie Farben mit höherer Genauigkeit als das Gerät analysiert werden. Durch Dithering wird der Farbbereich der Bilder am häufigsten auf die 256 (oder weniger) Farben reduziert.
• Mit style wird die Art des Malens auf einen Strich festgelegt. Das ist im Grunde eine Linie. Mit Paint.Style wird angegeben, ob das zu zeichnende ursprüngliche Element gefüllt, strichelt oder beides (in derselben Farbe) ist. Standardmäßig wird das Objekt gefüllt, auf das der Paint angewendet wird. Mit „Füllung“ färben Sie die Form innen ein, während „Schlag & Strich“ der Kontur folgt.
• strokeJoin von Paint.Join gibt an, wie Linien und Kurvensegmente in einem Strich dargestellt werden. Der Standardwert ist MITER.
• Mit strokeCap wird die Form des Endes der Linie als Kappe festgelegt. Mit Paint.Cap werden der Anfang und das Ende von Strichlinien und -pfaden angegeben. Der Standardwert ist BUTT.
• strokeWidth gibt die Breite des Strichs in Pixeln an. Standardmäßig ist die Breite der Haare sehr dünn. Daher wird die zuvor festgelegte Konstante STROKE_WIDTH festgelegt.

Hinweis: Durch Dithering wird das Zusammenspiel von Pixeln in zwei Farben erzeugt, um den Eindruck zu erwecken, dass eine dritte Farbe vorhanden wäre. Ein einfaches Beispiel ist ein Bild mit nur Schwarz-Weiß in der Farbvorlage. Durch die Kombination von Schwarz-Weiß-Pixeln in komplexen Mustern kann mit einem Grafikprogramm ein grauer Wert erzeugt werden. Lesen Sie diesen Artikel zur Dithering.

Hinweis: In der Dokumentation zu Farben finden Sie eine Liste aller Attribute, die festgelegt werden können.

Schritt 2: Pfadobjekt initialisieren

Der Path ist der Pfad dessen, was der Nutzer zeichnet.

1. Füge in MyCanvasView eine Variable path hinzu und initialisieren Sie sie mit einem PathObjekt, um den Pfad zu speichern, der gezeichnet wird, wenn Sie dem Nutzer auf dem Bildschirm folgen. Importieren Sie android.graphics.Path für die Path.

private var path = Path()

Schritt 1: Auf Bewegung auf dem Display reagieren

Die Methode onTouchEvent() in einer Ansicht wird aufgerufen, wenn der Nutzer das Display berührt.

1. Überschreibe in MyCanvasView die onTouchEvent()-Methode, um die x- und y-Koordinaten der in event übergebenen Werte im Cache zu speichern. Verwende dann einen when-Ausdruck, um Bewegungsereignisse zu verarbeiten, indem du entweder auf dem Bildschirm nach unten gehst, den Bildschirm bewegst oder die Touch-Geste auf dem Bildschirm loslässt. Mithilfe dieser Ereignisse wird auf dem Bildschirm eine Linie gezeichnet. Rufen Sie für jeden Ereignistyp eine Dienstprogrammmethode auf, wie im Code unten dargestellt. Eine vollständige Liste aller Touch-Ereignisse finden Sie in der Dokumentation zu der MotionEvent-Klasse.

override fun onTouchEvent(event: MotionEvent): Boolean {
   motionTouchEventX = event.x
   motionTouchEventY = event.y

   when (event.action) {
       MotionEvent.ACTION_DOWN -> touchStart()
       MotionEvent.ACTION_MOVE -> touchMove()
       MotionEvent.ACTION_UP -> touchUp()
   }
   return true
}

2. Fügen Sie auf Kursebene die fehlenden Variablen motionTouchEventX und motionTouchEventY zum Caching der X- und Y-Koordinaten des aktuellen Touch-Ereignisses hinzu (MotionEvent-Koordinaten). Initialisiere sie mit 0f.

private var motionTouchEventX = 0f
private var motionTouchEventY = 0f

3. Erstellen Sie Stubs für die drei Funktionen touchStart(), touchMove() und touchUp().

private fun touchStart() {}

private fun touchMove() {}

private fun touchUp() {}

4. Dein Code sollte erstellt und ausgeführt werden, du siehst aber noch keinen andersfarbigen Hintergrund.

Schritt 2: „touchStart()“ implementieren

Diese Methode wird aufgerufen, wenn der Nutzer zum ersten Mal den Bildschirm berührt.

1. Fügen Sie auf Kursebene Variablen hinzu, um die neuesten x- und y-Werte im Cache zu speichern. Nachdem sich der Nutzer nicht mehr bewegt und die Berührung aufgehoben hat, ist dies der Ausgangspunkt für den nächsten Pfad (das nächste Segment der Linie, die gezeichnet werden soll).

private var currentX = 0f
private var currentY = 0f

2. Implementiere die touchStart()-Methode. Setzen Sie path zurück, bewegen Sie sich zu den x-y-Koordinaten des Touch-Ereignisses (motionTouchEventX und motionTouchEventY) und weisen Sie diesem Wert currentX und currentY zu.

private fun touchStart() {
   path.reset()
   path.moveTo(motionTouchEventX, motionTouchEventY)
   currentX = motionTouchEventX
   currentY = motionTouchEventY
}

Schritt 3: „touchMove()“ implementieren

1. Fügen Sie auf Kursebene eine touchTolerance-Variable hinzu und legen Sie sie auf ViewConfiguration.get(context).scaledTouchSlop fest.

private val touchTolerance = ViewConfiguration.get(context).scaledTouchSlop

Wenn Sie einen Pfad verwenden, ist es nicht erforderlich, jedes Pixel zu zeichnen, und jedes Mal, wenn eine Aktualisierung des Bildschirms erforderlich ist. Stattdessen können (und werden) Sie einen Pfad zwischen Punkten kombinieren, um eine bessere Leistung zu erzielen.

• Wenn Sie den Finger kaum bewegen, müssen Sie nicht zeichnen.
• Wenn du mit dem Finger weniger als die touchTolerance-Strecke bewegst, nicht zeichnen.
• scaledTouchSlop gibt den Abstand in Pixeln an, den eine Berührung überschreitet, bevor das System annimmt, dass der Nutzer scrollt.

2. Definieren Sie die touchMove()-Methode. Berechne die Entfernung, die du zurückgelegt hast (dx, dy), erstelle eine Kurve zwischen den beiden Punkten und speichere sie in path. Aktualisiere dann die laufende currentX und die currentY. Zeichnen Sie dann die path. Rufen Sie dann invalidate() auf, um das erneute Entfernen des Bildschirms mit der aktualisierten path zu erzwingen.

private fun touchMove() {
   val dx = Math.abs(motionTouchEventX - currentX)
   val dy = Math.abs(motionTouchEventY - currentY)
   if (dx >= touchTolerance || dy >= touchTolerance) {
       // QuadTo() adds a quadratic bezier from the last point,
       // approaching control point (x1,y1), and ending at (x2,y2).
       path.quadTo(currentX, currentY, (motionTouchEventX + currentX) / 2, (motionTouchEventY + currentY) / 2)
       currentX = motionTouchEventX
       currentY = motionTouchEventY
       // Draw the path in the extra bitmap to cache it.
       extraCanvas.drawPath(path, paint)
   }
   invalidate()
}

Hier finden Sie weitere Informationen:

1. Die zurückgelegte Strecke berechnen (dx, dy).
2. Wenn die Bewegung weiter als die Touch-Toleranz erfolgte, fügen Sie dem Pfad ein Segment hinzu.
3. Legen Sie als Startpunkt für das nächste Segment den Endpunkt dieses Segments fest.
4. Erstellen Sie mit quadTo() statt lineTo() eine nahtlos gezeichnete Linie ohne Ecken. Weitere Informationen finden Sie unter Bezierkurven.
5. Rufe invalidate() auf (eventuell onDraw() aufrufen) und zeichnen Sie die Ansicht neu.

Schritt 4: „touchUp()“ implementieren

Hebt er die Touchbedienung auf, wird der Pfad zurückgesetzt. Es wird nichts gezeichnet, sodass keine Entwertung erforderlich ist.

1. Implementiere die touchUp()-Methode.

private fun touchUp() {
   // Reset the path so it doesn't get drawn again.
   path.reset()
}

2. Führen Sie den Code aus und zeichnen Sie mit dem Finger auf dem Bildschirm. Wenn Sie das Gerät drehen, wird der Bildschirm gelöscht, da der Zeichenstatus nicht gespeichert wird. In dieser Beispiel-App ist dies bewusst so, dass der Nutzer den Bildschirm einfach schließen kann.

Schritt 5: Rahmen um die Skizze zeichnen

Während der Nutzer auf dem Bildschirm zeichnet, erstellt deine App den Pfad und speichert ihn in der Bitmap extraBitmap. Mit der Methode onDraw() wird die zusätzliche Bitmap im Canvas der Ansicht angezeigt. In onDraw() können Sie mehr zeichnen. Du kannst beispielsweise Formen zeichnen, nachdem du die Bitmap gezeichnet hast.

In diesem Schritt zeichnen Sie einen Rahmen um den Rand des Bilds.

1. Füge in MyCanvasView eine Variable namens frame hinzu, die ein Rect-Objekt enthält.

private lateinit var frame: Rect

2. Erstellen Sie am Ende von onSizeChanged() einen Platzhalter und fügen Sie Code hinzu, um mithilfe der neuen Abmessungen und des Einfügens den Rect für den Frame zu erstellen.
   

// Calculate a rectangular frame around the picture.
val inset = 40
frame = Rect(inset, inset, width - inset, height - inset)

3. Zeichnen Sie in onDraw() nach der Bitmap ein Rechteck.
   

// Draw a frame around the canvas.
canvas.drawRect(frame, paint)

4. Führen Sie Ihre App aus. beachten Sie den Frame.

Aufgabe (optional): Daten in einem Pfad speichern

In der aktuellen App werden die Zeicheninformationen in einer Bitmap gespeichert. Das ist zwar eine gute Lösung, aber es ist nicht die einzige Möglichkeit, Zeichnungen zu speichern. Wie Sie den Verlauf Ihrer Zeichnungen speichern, hängt von der App und Ihren verschiedenen Anforderungen ab. Wenn Sie z. B. Formen zeichnen, können Sie eine Liste der Formen mit Ort und Abmessungen speichern. Für die MiniPaint App könnten Sie den Pfad als Path speichern. Hier ist ein allgemeiner Überblick über den Vorgang, wenn du ihn ausprobieren möchtest.

1. Entferne in MyCanvasView den gesamten Code für extraCanvas und extraBitmap.
2. Fügen Sie Variablen für den bisherigen Pfad und den aktuellen Pfad hinzu.

// Path representing the drawing so far
private val drawing = Path()

// Path representing what's currently being drawn
private val curPath = Path()

3. Zeichnen Sie in onDraw() anstelle der Bitmap die gespeicherten und aktuellen Pfade.

// Draw the drawing so far
canvas.drawPath(drawing, paint)
// Draw any current squiggle
canvas.drawPath(curPath, paint)
// Draw a frame around the canvas
canvas.drawRect(frame, paint)

4. Fügen Sie in touchUp() den aktuellen Pfad zum vorherigen Pfad hinzu und setzen Sie den aktuellen Pfad zurück.

// Add the current path to the drawing so far
drawing.addPath(curPath)
// Rewind the current path for the next touch
curPath.reset()

5. Führen Sie Ihre App aus, und ja, es gibt keinen Unterschied.

Laden Sie den Code für das fertige Codelab herunter.

$  git clone https://github.com/googlecodelabs/android-kotlin-drawing-canvas

Alternativ können Sie das Repository als ZIP-Datei herunterladen, entpacken und in Android Studio öffnen.

Zip herunterladen

• Ein Canvas ist eine 2D-Zeichnungsoberfläche, die Methoden zum Zeichnen bietet.
• Das Canvas kann einer View-Instanz zugeordnet werden, von der sie angezeigt wird.
• Das Objekt Paint enthält die Stil- und Farbinformationen zum Zeichnen von Geometrien (z. B. Linie, Rechteck, Oval und Pfade) und Text.
• Ein gängiges Muster für das Arbeiten mit einem Canvas besteht darin, eine benutzerdefinierte Ansicht zu erstellen und die Methoden onDraw() und onSizeChanged() zu überschreiben.
• Überschreibe die Methode onTouchEvent(), um Berührungen von Nutzern zu erfassen und darauf zu reagieren, indem sie Elemente zeichnen.
• Sie können eine zusätzliche Bitmap zum Speichern von Informationen für Zeichnungen verwenden, die sich im Laufe der Zeit ändern. Alternativ können Sie Formen oder einen Pfad speichern.

Udacity-Kurs:

• Android-Apps mit Kotlin entwickeln

Android-Entwicklerdokumentation:

• Canvas-Klasse
• Bitmap-Klasse
• View-Klasse
• Paint-Klasse
• Bitmap.config-Konfigurationen
• Path-Klasse
• Wikipedia-Seite zu Bezierkurven
• Canvas und Drawables
• Artikel zur Graphics Architecture (erweitert)
• Drawables
• onDraw()
• onSizeChanged()
• MotionEvent
• ViewConfiguration.get(context).scaledTouchSlop

In diesem Abschnitt werden mögliche Hausaufgaben für Schüler oder Studenten aufgeführt, die an diesem von einem Kursleiter geleiteten Codelab arbeiten. Die Lehrkraft kann Folgendes tun:

• Bei Bedarf können Sie die entsprechenden Aufgaben zuweisen.
• Schülern mitteilen, wie sie Aufgaben für die Aufgabe abgeben
• Benoten Sie die Hausaufgaben.

Lehrkräfte können diese Vorschläge so oft oder so oft verwenden, wie sie möchten. anderen Aufgaben können sie nach Belieben zugewiesen werden.

Wenn Sie alleine an diesem Codelab arbeiten, können Sie Ihr Wissen mit diesen Hausaufgaben testen.

Diese Fragen beantworten

Frage 1

Welche der folgenden Komponenten sind für die Arbeit mit einer Canvas erforderlich? Wählen Sie alle zutreffenden Antworten aus.

▢ Bitmap

▢ Paint

▢ Path

▢ View

Frage 2

Welche Auswirkungen hat ein Anruf auf invalidate()?

▢ Die App wird ungültig.

▢ Damit wird die Zeichnung aus der Bitmap gelöscht.

▢ Gibt an, dass der vorherige Code nicht ausgeführt werden soll.

▢ Das System wird darüber informiert, dass es den Bildschirm neu zeichnen muss.

Frage 3

Welche Funktion haben die Objekte Canvas, Bitmap und Paint?

▢ 2D-Zeichnungsoberfläche, auf dem Bildschirm angezeigte Bitmap, Stilinformationen

▢ 3D-Zeichnungsoberfläche, Bitmap zum Speichern des Pfads, Gestaltung von Informationen zum Zeichnen

▢ 2D-Zeichnungsoberfläche, auf dem Bildschirm angezeigte Bitmap, Stil für die Ansicht

▢ Cache zum Zeichnen von Informationen, Bitmap zum Zeichnen, Stil für Zeichnen

Links zu weiteren Codelabs in diesem Kurs finden Sie auf der Landingpage des erweiterten Android-Tools in Kotlin.