Anuncios

Bienvenidos sean a este post, hoy hablaremos sobre una de las clases que usaremos para manipular las imagenes en nuestros juegos.

Anuncios

En este post veremos un ejemplo de como aplicar a Canvas pero si desean saber mas sobre esta clase les recomiendo este post, en ese explico mas profundamente como trabaja y como esta compuesto con ejemplo incluido.

Anuncios

Para hacer las pruebas vamos a crear una app con las siguientes caracteristicas:

  • Dispositivos: Phone and Tablet
  • Actividad: Empty Activity
  • Nombre: Demo de Canvas
  • Nombre de paquete: org.example.demodecanvas
  • API Minimo: API 14 (Android 4.0)
Anuncios

Una vez creada nuestra app vamos a modificar el codigo de MainActivity de la siguiente forma:

MainActivity

package org.example.demodecanvas;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends Activity {

    ImageView miImageView;
    Bitmap miBitmapBlanco;
    Canvas miCanvas;
    Paint miPaint;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}
Anuncios
Anuncios

Primero tendremos los paquetes que usaremos para obtener las clases para nuestros objetos que veremos a continuacion, estos pueden agregarlos asi como aparecen o a medida que agreguen los objetos eligen los paquetes para ser usados.

Exceptuando esto nuestra primera modificacion sera en la definicion de la clase donde cambiaremos a AppCompatActiviry por Activity, como podran ver aparecera el paquete correspondiente y se agregara al listado antes mencionado, y deben eliminar el paquete de color gris porque no sera utilizado, despues antes del metodo onCreate vamos a declarar nuestros cuatro objetos:

    ImageView miImageView;
    Bitmap miBitmapBlanco;
    Canvas miCanvas;
    Paint miPaint;

Estos objetos seran los encargados de permitirnos “dibujar” en pantalla, para nuestra siguiente modificacion modificaremos a onCreate de la siguiente forma:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        int anchoEnPixels = 800;
        int altoEnPixels = 600;

        miBitmapBlanco = Bitmap.createBitmap(anchoEnPixels,
                altoEnPixels, Bitmap.Config.ARGB_8888);
        miCanvas = new Canvas(miBitmapBlanco);
        miImageView = new ImageView(this);
        miPaint = new Paint();
    }
Anuncios
Anuncios

En las primeras dos variables definiremos un ancho (anchoEnPixels) y un alto (altoEnPixels) para nuestro Bitmap, luego definiremos al objeto miBitmapBlanco donde le pasamos el ancho y alto configurado anteriormente y el ultimo parametro permite configurar la paleta de colores a 256 combinaciones posibles, luego creamos el lugar en memoria para miCanvas y le asignaremos el Bitmap creado anteriormente, lo mismo hacemos luego para miImageView pero en este caso le pasamos como contexto a this para poder usar la vista actual, por ultimo le asignamos el lugar a miPaint, ahora procederemos a agregar el siguiente bloque despues de la linea anterior:

        miCanvas.drawColor(Color.argb(255,0,0,255));
        miPaint.setTextSize(100);
        miPaint.setColor(Color.argb(255,255,255,255));
        miCanvas.drawText("Hola, Mundo!",100,100,miPaint);
        miPaint.setColor(Color.argb(255,212,207,62));
        miCanvas.drawCircle(400,250,100,miPaint);
Anuncios

En la primer linea setearemos el color de miCanvas, para este caso usaremos al metodo argb de la clase Color, este metodo de un modo muy basico setea los colores en base a los valores que informemos:

  • El primer valor setea el alfa de la imagen, es decir el nivel de transparencia del mismo
  • El segundo controla el valor del color rojo, si es 0 significa sin color rojo y 255 el color rojo al maximo, en el medio estan todas las gamas posibles
  • El tercero hace lo mismo que el anterior pero con el verde
  • El cuarto lo mismo pero con el color azul
Anuncios

En este caso seteamos el color de miCanvas en azul porque le pasamos el maximo y a los dos anteriores con el cero, despues seteamos el tamaño de texto de miPaint, la siguiente linea se encarga de setear el color para miPaint y para este caso el color elegido es blanco porque seteamos todos los colores al maximo.

Anuncios
Anuncios

Nuestra siguiente linea sera de las primeras en actuar, esta se encarga de escribir (aunque ahi dice dibujar) un texto en pantalla, donde primero le pasaremos el texto a mostrar, luego la posicion en el eje X, despues la posicion en el eje Y y finalmente el pincel que se encarga de “dibujar” y para este caso es el objeto miPaint, la siguiente linea vuelve a cambiar el color de nuestro “pincel” llamado miPaint y esta combinacion nos genera un color amarillo, para finalmente dibujar un circulo por medio de drawCircle al cual le pasaremos primero la poscion en el eje x, luego en el eje y, despues el radio del circulo y finalmente el pincel para dibujarlo, como hicimos con el texto, para finalizar agregaremos estas lineas despues del bloque anterior:

miImageView.setImageBitmap(miBitmapBlanco);
setContentView(miImageView);

Para este caso, la primera linea se encarga de setear a miBitmapBlanco como la imagen de tipo Bitmap para miImageView y luego por medio de setContentView le diremos que muestre lo almacenado en miImageView, antes de finalizar veamos como quedo nuestro codigo final:

MainActivity

package org.example.demodecanvas;

import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends Activity {

    ImageView miImageView;
    Bitmap miBitmapBlanco;
    Canvas miCanvas;
    Paint miPaint;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        int anchoEnPixels = 800;
        int altoEnPixels = 600;

        miBitmapBlanco = Bitmap.createBitmap(anchoEnPixels,
                altoEnPixels, Bitmap.Config.ARGB_8888);
        miCanvas = new Canvas(miBitmapBlanco);
        miImageView = new ImageView(this);
        miPaint = new Paint();

        miCanvas.drawColor(Color.argb(255,0,0,255));
        miPaint.setTextSize(100);
        miPaint.setColor(Color.argb(255,255,255,255));
        miCanvas.drawText("Hola, Mundo!",100,100,miPaint);
        miPaint.setColor(Color.argb(255,212,207,62));
        miCanvas.drawCircle(400,250,100,miPaint);

        miImageView.setImageBitmap(miBitmapBlanco);
        setContentView(miImageView);
    }
}
Anuncios
Anuncios

Con esto explicado, procedamos a compilar y probar nuestra app ya sea con un equipo o con un emulador, en cualquiera de los casos deberan obtener un resultado como este:

Anuncios

Donde podemos ver como crea una imagen de tipo Bitmap con un tamaño de 800×600, pintada de azul, escribio Hola, Mundo! con blanco y por ultimo hizo un circulo de color amarillo, prueben de jugar con los valores para ver como afecta las dimensiones y los colores sobre cada uno de los elementos.

Anuncios

En resumen, hoy hemos visto una breve explicacion sobre como es Canvas, los objetos necesarios para poder trabajar, como se deben definir, como afecta cada uno de ellos a los otros, como trabajan y que podemos realizar, antes de finalizar te recuerdo que si queres saber un poco mas sobre esta clase te recomiendo este post donde lo explico mas a fondo, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Anuncios

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.

Tambien podes donar

Es para mantenimiento del sitio, gracias!

$1.00