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