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.

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