16 Mai

Einfaches Zeichnen auf ein Canvas

In diesem zweiten praktischen Tutorial zur Android Programmierung möchte ich einen Schritt weiter gehen. Nachdem wir das erste Hello World Programm geschrieben haben werden wir nun etwas auf den Bildschirm zeichnen.

[ad#contentadbig]

Egal in welcher Programmiersprache man sich befindet, man verwendet eigentlich immer ein Canvas, die passende Übersetzung dafür lautet Leinwand, um etwas zu zeichnen. Auf einem Canvas kann man Linien, Kreise, Rechtecke, Texte und Bilder malen.
Das folgende Beispiel basiert auf der Idee von marakena.com. Ich selbst habe das Beispiel um eine gepufferte Verarbeitung erweitert. Ich finde es ist wichtig von Beginn an zu zeigen welche Methoden man nutzen sollte, anstatt sie erst später einzuführen.

public class DrawView extends View implements OnTouchListener
{
  Bitmap bitmap;
  Canvas bitmapCanvas;

  boolean isInitialized;
  Paint paint = new Paint();

  public DrawView(Context context)
  {
    super(context);
    setFocusable(true);
    setFocusableInTouchMode(true);

    this.setOnTouchListener(this);

    paint.setColor(Color.WHITE);
    paint.setAntiAlias(true);
    paint.setStyle(Style.FILL_AND_STROKE);
   
    isInitialized = false;
  }

  private void init()
  {
    bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.RGB_565);
   
    bitmapCanvas = new Canvas();
    bitmapCanvas.setBitmap(bitmap);
    bitmapCanvas.drawColor(Color.BLACK);
   
    isInitialized = true;

  }
 
  @Override
  public void onDraw(Canvas canvas)
  {
    if (!isInitialized)
      init();
   
    canvas.drawBitmap(bitmap, 0, 0, paint);
  }

  public boolean onTouch(View view, MotionEvent event)
  {
    bitmapCanvas.drawCircle(event.getX(), event.getY(), 5, paint);

   
    invalidate();
    return true;
  }
}
 

Wie man schon unschwer im Vergleich mit der Quelle erkennen kann erspart man sich das Neuzeichnen aller Punkte in der onDraw Methode. Zusätzlich wird beim ersten Aufruf der onDraw das gepufferte Bild und das dazugehörige Canvas erstellt. Wenn man nun etas auf dem Canvas malt und das Bild darstellt wird die Änderung ebenfalls angezeigt.
Der Ablauf das Programms ist entsprechend einfach. Wir haben zu Beginn einen schwarzen Bildschirm und mit einer Berührung auf einen beliebigen Punkt können wir einen weißen Punkt malen.
Etwas gewöhnungsbedürftig ist die Paint Klasse, diese gibt zum Beispiel an in welcher Farbe und in welchem Stil (gefüllt, nur der Rand oder nur der Innenraum) das Objekt (in unserem Fall ein Kreis) gezeichnet werden soll. Ich denke Pen, also Stift, hätte etwas besser gepasst als Paint, aber das kann man wohl nicht ändern.
Ansonsten ist das Programm selbsterklärend. Jeder der schonmal in Java gearbeitet hat sollte mit den aufgeführten Befehlen vertraut sein. Eine Anmerkung sollte ich jedoch noch zum Aufruf von invalidate() machen, denn dieser sorgt dafür, dass der Bildschirm neu gezeichnet wird. Ohne diese Befehl würde das onDraw nicht aufgerufen werden.

Nach diesen 2 Tutorial können wir also einen beliebigen Text und eine beliebige Zeichnung auf unseren Bildschirm darstellen. Zugleich haben wir auch den ersten Listner kennengelernt : den OnTouchListner. Dieser erzeugt bei Berührungen des Bildschirms Ereignisse, die wir verarbeiten können. Auf die Ereignisse werde ich in einem späteren Artikel nochmal gesondert eingehen und als nächstes werden wir uns die einzelnen Views anschauen.

Ich hoffe das Tutorial hat einigen geholfen. Das gesamte Testprojekt AndroidDrawExample kann heruntergeladen und beliebig modifiziert werden.




8 Kommentare zu “Einfaches Zeichnen auf ein Canvas”

  1. 1
    Tommy sagt:

    Hi Jens! Ich wollte nur sagen, dass ich deine Tutorials wirklich super finde! Du erklärst gut Schritt für Schritt und leicht verständlich! Ich freue mich über weitere Tutorials 🙂

  2. 2
    Jens sagt:

    Vielen Dank! Lob hört man immer gerne und ich bemühe mich in kürzeren Intervallen Tutorials zu veröffentlichen – aber das Wetter 🙂

  3. 3
    Michael Ziörjen sagt:

    Hi,

    vielen Dank für das Tutorial! War genau das, was ich gesucht hatte. Ich kenne mich leider noch überhaupt nicht aus mit Java und Android und da hilft jedes kleine Tutorial!

    Ich werde mir jedoch noch einige Bücher bestellen müssen, kannst du mir irgendeines empfehlen? Ich interessiere mich vorallem für Spieleentwicklung und habe darin auch die grösste Erfahrung (Actionscript, Flash, LUA).

    Ich wäre froh um eine Empfehlung da es doch schon einige Bücher auf dem Markt gibt.

    Vielen Dank und MFG,

    Michael

  4. 4
    Jens sagt:

    Mein Interessengebiet hat sich zumindestens im privaten Bereich auch eher Richtung Spieleentwicklung verlagert. Gute deutsche Bücher exisiteren in dem Bereich fast gar nciht auf dem Markt. Die ENtwicklung der Spiele selbst ist meist das kleinere Übel, man hat immer die gleichen Basisklassen auf denen man aufbauen kann.
    Zufällig ist gestern ein Tweet in meiner Timeline vorbei geflogen mit einer Bücherliste von Peter Norvig, dem Research Director von Google. Dort waren einige extrem interessante Bücher zum Thema AI drin. DIe Liste findest du unter http://books.google.com/books?uid=8640673873589796416 . Wenn man mit Java beginnen möchte ist Java in a Nutshell und Java ist auch eine Insel absolute Pflichtlektüre. Für den Grafikbereich, der mit Java nicht immer Problemlos ist empfehle ich Algorithmen und Grafik mit JAVA. Wobei es oftmals schon reicht die Grafiken vernünftig zu Buffern um auf entsprechende Frames zu kommen.
    Zu Android etwas zu finden ist da schon schwieriger. Es gibt entsprechende Bücher die jedoch meist nur Vertiefungen des Developer Guides sind. Es bringt am Anfang sehr viel sich die Google I/O Videos der Jahre 2008 bis 2010 zum Thema Android anzusehen (vorallen die beiden Vorträge von Chris Pruett). Ansonsten kann man sich noch das Gratis Ebook von Android Grundlagen und Programmierung runterladen. Alle Bücher die ich zum Thema Android gesehen habe kann man zum Einstieg verwenden, sind jedoch gänzlich ungeeignet für Vertiefungen.

  5. 5
    Bewegungspfade in Android – Game Development | Motorola Milestone | Android sagt:

    […] wurstor bei Google löscht per Remote eine AppJens bei Einfaches Zeichnen auf ein CanvasMichael Ziörjen bei Einfaches Zeichnen auf ein CanvasJens bei Android 2.2 Froyo fürs […]

  6. 6
    mattwien Android Game Dev Blog » Blog Archive » Wie alles begann… sagt:

    […] Und das wichtigste bei einem Spiel: Grafiken Zeichnen http://www.milestone-blog.de/android-development/einfaches-zeichnen-canvas/ […]

  7. 7
    Frank sagt:

    Vielen herzlichen Dank! 😉

  8. 8
    Peter sagt:

    Hallo,
    ich habe Deine Seite entdeckt und bin entzückt, weil Du exakt das beschreibst, wonach ich suche. Leider bin ich ein Java Anfänger. Ich sehe zwar, was die Klasse macht, aber wie nutze ich sie nun in meinem Programm?

    Ich habe ein Fenster mit 4 Tabs. Im 4. Tab soll man etwas mit einem Stift eingeben.

    Der letzte Eintrag ist zwar schon ein Jahr her, aber vielleicht kann mir jemand Abschubhilfe geben.
    Danke im voraus

Hinterlasse ein Kommentar