Usando Canvas en Android | Carlos Pin

http://www.carlospinan.com/2012/08/24/canvas-android/

Carlos Pin
Cosas sobre mi y algunas cosas de inters.

Programacin de Videojuegos

Diseo de Logos

El Blog de Hansy

Inicio Android Usando Canvas en Android

Novedades
Demo Pseudo 3D HTML5 Parte 1 Instalando OpenCobol en Windows 7 DevFestLima 2012 Un gran evento Iniciando con Cobol en Windows 7 Qu es Dart? Usando Canvas en Android

Comentaristas
cpinan en Iniciando con Cobol en Windows 7 jose en Iniciando con Cobol en Windows 7

1 de 12

25/4/2013 16:18

Usando Canvas en Android | Carlos Pin

http://www.carlospinan.com/2012/08/24/canvas-android/

Usando Canvas en Android

Publicado en 24 agosto, 2012 por cpinan Sin Comentarios

Categoras
Android Blog Cobol Dart HTML 5 Novedades

Hola a todos, este ser mi primer artculo, puntualmente aqu voy a poner cosas pequeas, guas, formas de uso, y cosas que recomiende la gente. Si desean informacin de como hacer juegos, voy a ir colocando aqu algunas tcnicas para el desarrollo de juegos y otros tips pero casi todo lo voy a intentar poner en la siguiente pgina: Programacin de Videojuegos Continuando con el artculo vamos a aprender a usar Canvas con Android, con Canvas en este artculo vamos a aprender a dibujar rectngulos a usar el paint, a usar escalas, a dibujar en un View y otras cosas. Muy bien continuando, vamos a trabajar con un Canvas muy simple usando un View para el canvas aun no vamos a utilizar SurfaceView ni OpenGL. Primero veamos el resultado:

Encuesta
Sobre qu tema te gustara tratar? Desarrollo en Android SEO Cocos2D HTML 5 WordPress

Ver resultados

2 de 12

25/4/2013 16:18

Usando Canvas en Android | Carlos Pin

http://www.carlospinan.com/2012/08/24/canvas-android/

Ese es el resultado, se ha logrado rpido, veamos el cdigo: Esta es la clase Activity: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 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

Usando Canvas en Android | Carlos Pin

http://www.carlospinan.com/2012/08/24/canvas-android/

33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92

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

Usando Canvas en Android | Carlos Pin

http://www.carlospinan.com/2012/08/24/canvas-android/

93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111

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

Esta es la clase Canvas para la Vista: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 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

Usando Canvas en Android | Carlos Pin

http://www.carlospinan.com/2012/08/24/canvas-android/

38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97

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

Usando Canvas en Android | Carlos Pin

http://www.carlospinan.com/2012/08/24/canvas-android/

98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137

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(); } }

Este es el cdigo del Manifest: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <?xml version="1.0" encoding="utf8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/and package="com.carlospinan.canvasandroidpost" android:versionCode="1" android:versionName="1.0" > <usessdk android:minSdkVersion="8" android:targetSdkVersion="16" />

7 de 12

25/4/2013 16:18

Usando Canvas en Android | Carlos Pin

http://www.carlospinan.com/2012/08/24/canvas-android/

17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

<application android:allowBackup="true" android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen <activity android:name="com.carlospinan.canvasandroidpost.MainActivity" android:label="@string/app_name" android:screenOrientation="portrait" > <intentfilter> <action android:name="android.intent.action.MAIN" <category android:name="android.intent.category.LAUNCHER" </intentfilter> </activity> </application> </manifest>

Este es el cdigo del Layout: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/ xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <com.carlospinan.canvasandroidpost.CanvasView android:id="@+id/canvasView" android:layout_width="match_parent" android:layout_height="match_parent" > </com.carlospinan.canvasandroidpost.CanvasView </FrameLayout>

Como pueden ver es bastante simple voy a dejar el cdigo adjunto

8 de 12

25/4/2013 16:18

Usando Canvas en Android | Carlos Pin

http://www.carlospinan.com/2012/08/24/canvas-android/

aqu: CanvasAndroidPost
Bueno voy a explicar un poco del cdigo del Canvas por nmero de lnea (creo que al copiar y pegar el cdigo a la entrada aparecen algunos &nbsp; de HTML as que los eliminan si encuentran alguno)

Para seguir con la explicacin me voy a basar en las lneas del cdigo en el editor de Eclipse as que les recomiendo importarlo para seguirlo aunque ya deje comentada algunas cosas, hay que abrir la clase CanvasView y vamos a analizarla para saber como funciona: 1) Primero vemos que en la lnea 20 donde declaramos la clase hacemos que la clase herede de View esto nos permite trabajar con elementos propios del View tanto como el Canvas, podramos haberlo hecho con SurfaceView pero es un primer ejemplo as que lo vamos a ver de a pocos. 2) Lnea 23: Vemos que hemos puesto 2 variables estticas finales, esto nos sirve para poder calcular el tamao fijo de la pantalla y poder escalar todo el contenido con respecto a la variacin (dX y dY) de las pantallas, es un concepto de proporciones que lo uso para poder escalar cuando uso SurfaceView o canvas. 3) Desde la lnea 24 hasta la lnea 29 es la declaracin de variables que vamos a usar en el recorrido de nuestra primera aplicacin usando Canvas. 4) Lnea 39: Cargamos los recursos de la clase contexto (El MainActivity) ya que los activities pueden cargar los recursos desde los Drawable. 5) Podemos ver el mtodo privado _init() en el cual inicializamos todas las variables y tambin la forma de cargar un Bitmap desde los Drawable. 6) Vayamos al mtodo onDraw veremos un canvas.save() y un canvas.restore() esto sirve para salvar la matriz actual del canvas, 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

Usando Canvas en Android | Carlos Pin

http://www.carlospinan.com/2012/08/24/canvas-android/

dentro de la vista aunque normalmente me gusta usar 1 a menos que me vea forzado a usar ms de uno que me ha pasado en pocas ocasiones. 7) Veremos el canvas.scale(x,y) que sirve para escalar la pantalla los valores de 1.0f y 1.0f indica que se escale al tamao actual, pero nosotros queremos que se reescale la pantalla dependiendo de los valores definidos en el punto 2 de nuestra explicacin, recomiendo repasar este concepto ya que aunque simple probablemente te ayude mucho en el futuro. 8) Bueno es todo, fue muy simple, vern que los dibujados se entienden y son bastantes simples, les recomiendo revisar informacin de Edu4Java que explica como hacer un juego con Android usando SurfaceView mientras por mi parte voy a arreglar un poco el juego que presente en el DevFestLima para ponerlo en el Blog y dividirlo por captulos.

Bueno es todo en esta ocasin, espero les haya servido esta clase de como usar Canvas con Android. Hasta la prxima.

Like

Send

11 people like this.

Te gust? Comprtelo!

Twittear

Curtir

11

Share

StumbleUpon
Qu es Dart?
Etiquetado con: android, canvas Publicado en: Android, Blog

Deja un comentario

10 de 12

25/4/2013 16:18

Usando Canvas en Android | Carlos Pin

http://www.carlospinan.com/2012/08/24/canvas-android/

Tu direccin de correo electrnico no ser publicada. Los campos necesarios estn marcados * Nombre *

Correo electrnico *

Sitio web

Comentario

Puedes usar las siguientes etiquetas y atributos HTM L : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

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

11 de 12

25/4/2013 16:18

Usando Canvas en Android | Carlos Pin

http://www.carlospinan.com/2012/08/24/canvas-android/

2013 Carlos Pin

Responsive Theme Funciona con WordPress

12 de 12

25/4/2013 16:18