Usando Canvas en Android _ Carlos Piñán

Programacin de Videojuegos Diseo de Logos El Blog de HansyCarlos PinCosas sobre mi y algunas cosas de inters.

Inicio Android Usando Canvas en Android

NovedadesDemo Pseudo 3DHTML5 Parte 1InstalandoOpenCobol enWindows 7DevFestLima 2012 Un gran eventoIniciando con Cobolen Windows 7Qu es Dart?Usando Canvas enAndroid

Comentaristascpinan en Iniciandocon Cobol enWindows 7jose en Iniciando conCobol en Windows 7

Usando Canvas en Android | Carlos Pin http://www.carlospinan.com/2012/08/24/canvas-android/

1 de 12 25/4/2013 16:18

Usando Canvas en AndroidPublicado en 24 agosto, 2012 por cpinan Sin Comentarios

Hola a todos, este ser mi primer artculo, puntualmente aqu voya poner cosas pequeas, guas, formas de uso, y cosas querecomiende la gente.

Si desean informacin de como hacer juegos, voy a ir colocandoaqu algunas tcnicas para el desarrollo de juegos y otros tipspero casi todo lo voy a intentar poner en la siguiente pgina:

Programacin de Videojuegos

Continuando con el artculo vamos a aprender a usar Canvas conAndroid, con Canvas en este artculo vamos a aprender a dibujarrectngulos a usar el paint, a usar escalas, a dibujar en un View yotras cosas.

Muy bien continuando, vamos a trabajar con un Canvas muysimple usando un View para el canvas aun no vamos a utilizarSurfaceView ni OpenGL.

Primero veamos el resultado:

CategorasAndroidBlogCobolDartHTML 5Novedades

Encuesta

Sobre qu tema tegustara tratar?

Desarrollo enAndroid

SEOCocos2DHTML 5WordPress

Ver resultados


2 de 12 25/4/2013 16:18

Ese es el resultado, se ha logrado rpido, veamos el cdigo:

Esta es la clase Activity:

123456789

1011121314151617181920212223242526272829303132

package com.carlospinan.canvasandroidpost; import java.util.Timer; import java.util.TimerTask; import android.app.Activity; import android.os.Bundle; /** * * @author Carlos Eduardo Pian Indacochea * */ public class MainActivity extends Activity { private CanvasView canvasView; private Timer timer; private static final long FPS = 24; @Override protected void onCreate(Bundle savedInstanceState) {


3 de 12 25/4/2013 16:18

333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192

super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); _init(); } /** * Inicializacin de los datos */ private void _init() { canvasView = (CanvasView) findViewById(R.id.canvasView); _startTimer(); } /** * Inicializa el timer para poder refrescar el canvas cada 24 F * por segundo) */ private void _startTimer() { timer = new Timer(); timer.schedule(new TimerTask() { @Override public void run() { canvasView.postInvalidate(); } }, 1000, 1000 / FPS); } @Override protected void onPause() { super.onPause(); if (timer != null) { timer.purge(); timer.cancel();


4 de 12 25/4/2013 16:18

Esta es la clase Canvas para la Vista:

93949596979899

100101102103104105106107108109110111

} } @Override protected void onResume() { super.onResume(); if (timer != null) { _startTimer(); } } }

123456789

10111213141516171819202122232425262728293031323334353637

package com.carlospinan.canvasandroidpost; import android.content.Context; import android.content.res.Resources; import android.graphics.Bitmap; import android.graphics.BitmapFactory; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.graphics.RectF; import android.util.AttributeSet; import android.view.View; /** * Esta es la vista en Canvas * * @author Carlos Eduardo Pian Indacochea * */ public class CanvasView extends View { // Tamao de la pantalla que va a tener por defecto.


5 de 12 25/4/2013 16:18

383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697

private static final float DWIDTH = 480, DHEIGHT = private Resources resources; private Paint paintObject, paintPath; private Bitmap bmpIcon; private RectF rect01; private Path path01; /** * Constructor del CanvasView * * @param context * @param attrs */ public CanvasView(Context context, AttributeSet attrs) { super(context, attrs); resources = context.getResources(); _init(); } /** * Inicializa los valores para ser pintados en el Canvas */ private void _init() { paintObject = new Paint(); paintObject.setARGB(255, 255, 0, 0); bmpIcon = BitmapFactory.decodeResource(resources, R.drawable.ic_launcher); rect01 = new RectF(250, 500, 350, 600); path01 = new Path(); path01.moveTo(50, 400); path01.lineTo(225, 650); paintPath = new Paint();


6 de 12 25/4/2013 16:18

Este es el cdigo del Manifest:

9899

100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137

paintPath.setColor(0xFF00FF00); paintPath.setStyle(Paint.Style.STROKE); paintPath.setStrokeWidth(3); } @Override public void onDraw(Canvas canvas) { super.onDraw(canvas); // Este cdigo sirve para escalar la pantalla y dibujar en la canvas.save(); canvas.scale(canvas.getWidth() / DWIDTH, canvas.getHeight() / canvas.drawColor(0xFF000000); canvas.drawCircle(100, 100, 50, paintObject); if (bmpIcon != null) { canvas.drawBitmap(bmpIcon, 200, 200, null); } canvas.drawRect(rect01, paintObject); canvas.drawPath(path01, paintPath); canvas.restore(); } }

123456789

10111213141516

Este es el cdigo del Layout:

Como pueden ver es bastante simplevoy a dejar el cdigo adjunto

17181920212223242526272829303132333435363738394041424344454647

aqu: CanvasAndroidPost

Bueno voy a explicar un poco del cdigo del Canvas por nmerode lnea (creo que al copiar y pegar el cdigo a la entradaaparecen algunos de HTML as que los eliminan siencuentran alguno)

Para seguir con la explicacin me voy a basar en las lneas delcdigo en el editor de Eclipse as que les recomiendo importarlopara seguirlo aunque ya deje comentada algunas cosas, hay queabrir la clase CanvasView y vamos a analizarla para saber comofunciona:

1) Primero vemos que en la lnea 20 donde declaramos la clasehacemos que la clase herede de View esto nos permite trabajarcon elementos propios del View tanto como el Canvas, podramoshaberlo hecho con SurfaceView pero es un primer ejemplo as quelo vamos a ver de a pocos.

2) Lnea 23: Vemos que hemos puesto 2 variables estticasfinales, esto nos sirve para poder calcular el tamao fijo de lapantalla y poder escalar todo el contenido con respecto a lavariacin (dX y dY) de las pantallas, es un concepto deproporciones que lo uso para poder escalar cuando usoSurfaceView o canvas.

3) Desde la lnea 24 hasta la lnea 29 es la declaracin devariables que vamos a usar en el recorrido de nuestra primeraaplicacin usando Canvas.

4) Lnea 39: Cargamos los recursos de la clase contexto (ElMainActivity) ya que los activities pueden cargar los recursosdesde los Drawable.

5) Podemos ver el mtodo privado _init() en el cual inicializamostodas las variables y tambin la forma de cargar un Bitmap desdelos Drawable.

6) Vayamos al mtodo onDraw veremos un canvas.save() y uncanvas.restore() esto sirve para salvar la matriz actual delcanvas, esto te puede servir para aplicar rotaciones, escaladas,etc.; en diferentes lados, es decir, puedes usar mltiples canvas


9 de 12 25/4/2013 16:18

Twittear 0 Curtir 11 0StumbleUpon

Qu es Dart?

dentro de la vista aunque normalmente me gusta usar 1 a menosque me vea forzado a usar ms de uno que me ha pasado enpocas ocasiones.

7) Veremos el canvas.scale(x,y) que sirve para escalar la pantallalos valores de 1.0f y 1.0f indica que se escale al tamao actual,pero nosotros queremos que se reescale la pantalla dependiendode los valores definidos en el punto 2 de nuestra explicacin,recomiendo repasar este concepto ya que aunque simpleprobablemente te ayude mucho en el futuro.

8) Bueno es todo, fue muy simple, vern que los dibujados seentienden y son bastantes simples, les recomiendo revisarinformacin de Edu4Java que explica como hacer un juego conAndroid usando SurfaceView mientras por mi parte voy a arreglarun poco el juego que presente en el DevFestLima para ponerlo enel Blog y dividirlo por captulos.

Bueno es todo en esta ocasin, espero les haya servido estaclase de como usar Canvas con Android.

Hasta la prxima.

Te gust? Comprtelo!

Etiquetado con: android, canvas

Publicado en: Android, Blog

Deja un comentario

Like Send 11 people like this.

ShareShare


10 de 12 25/4/2013 16:18

Tu direccin de correo electrnico no ser publicada. Loscampos necesarios estn marcados *

Nombre *

Correo electrnico *

Sitio web

Comentario

Puedes usar las siguientes etiquetas y atributos HTML:

In an effort to prevent automatic filling, you should perform a task

displayed below.


11 de 12 25/4/2013 16:18

2013 Carlos Pin Responsive Theme Funciona conWordPress


12 de 12 25/4/2013 16:18

Documents

Usando Canvas en Android _ Carlos Piñán