Bienvenidos sean a este post, hoy hablaremos sobre uno de los distintos tipos de clases disponibles para la API de graficos, la misma nos provee la posibilidad de manipular los graficos tanto en 2D como en 3D, como siempre en estos casos es conveniente comenzar con la manipulacion de los tipo 2D por su menor complejidad y permite un mejor entendimiento, veamos el tipo mencionado en el titulo.
Esta clase nos da la posibilidad de poder dibujar en un area determinada, para ello dispondremos de varios metodos para poder dibujar varios tipos de figuras, para hacerlo utilizaremos un pincel (paint) y por ultimo tambien podremos disponer de un area para trabajar solamente en ella llamado clip, lo veremos mas adelante, pero no se preocupen porque a continuacion veremos con detalle paintpath y algunos metodos disponibles, comencemos.

Para dibujar figuras geometricas:

  • drawCircle(float cx, float cy, float radio, Paint pincel)
  • drawOval(RectF ovalo, Paint pincel)
  • drawRect(RectF rect, Paint pincel)
  • drawPoint(float x, float y, Paint pincel)
  • drawPoints(float [] pts, Paint pincel)

Como pueden ver aca dibujaremos circulos, ovalos, rectangulos, punto y puntos respectivamente con las funciones antes mencionadas observen como definimos las coordenadas y luego por medio del pincel dibujamos la figura

Para dibujar lineas y arcos:

  • drawLine(float iniX, float iniY, float finX, float finY, Paint pincel)
  • drawLines(float [] pts, Paint pincel)
  • drawArc(RectF ovalo, float iniAngulo, float angulo, boolean usarCentro, Paint pincel)
  • drawPath(Path trazo, Paint pincel)

Este simplemente dibujara lineas y arcos con las coordenadas enviadas

Para dibujar texto:

  • drawText(String texto, float x, float y, Paint pincel)
  • drawTextOnPath(String texto, Path trazo, float desplazamHor, float desplazamVer, Paint pincel)
  • drawPosText(String texto, float [] posicion, Paint pincel)

Este es el metodo para “dibujar” o mejor dicho representar texto dentro de nuestra area de canvas

Para rellenar con color nuestra area:

  • drawColor(int color)
  • drawARGB(int alfa, int rojo, int verde, int azul)
  • drawPaint(Paint pincel)

-en este caso le pasamos el valor del color y dependiendo del metodo rellenara el area o el pincel

Para dibujar imagenes:

  • drawBitmap(Bitmap bitmap, Matrix matriz, Paint pincel)

Estas seran para dibujar en un clip definido:

  • boolean clipRect(RectF rectangulo)
  • boolean clipRegion(Region region)
  • boolean clipPath(Path trazo)

Las funciones anteriores se aplican solamente en el clip definido previamente

Como definir una matriz de transformacion, esta nos permite transformar coordenadas por medio de una translacion, escala o rotacion:

  • setMatrix(Matrix matriz)
  • Matrix getMatrix()
  • concat(Matrix matriz)
  • translate(float despazX, float despazY)
  • scale(float escalaX, float escalaY)
  • rotate(float grados, float centroX, float centroY)
  • skew(float despazX, float despazY)

Para averiguar el tamaño del canvas:

  • int getHeight()
  • int getWidth()

Ahora para continuar vamos a crear una nueva app donde despues haremos algunas practicas, comencemos a abrir Android Studio y luego seleccionemos Start a new Android Studio project

android00

Donde nos aparecera el siguiente cuadro

android07

Aca definiremos a Application name como EjemploGraficos, en Company domain utilizaremos example.org, o si disponen de alguno pueden usar ese como se ve en la imagen, el resto debera quedar como se ve en la imagen, una vez realizado pulsen Next y pasaremos al siguiente cuadro

android02

Aca deben seleccionar Phone and Tablet, elijan la version mas baja de la API que dispongan y despues pulsen Next para pasar al siguiente cuadro

android03

En este cuadro deben seleccionar Empty Activity, pulsen Next y pasaremos al cuadro final

android08

Aca modificaremos Activity Name por EjemploGraficosActivity, y layout name debe quedar como activity_main, una vez que quede como la imagen pulsamos Finish para generar nuestra app. Una vez creada nuestra app pasaremos a modificar nuestra clase EjemploGraficosActivity veamos su codigo actual:

package com.tinchicus.ejemplograficos;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class EjemploGraficosActivity extends AppCompatActivity {

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

Lo modificaremos con el siguiente codigo:

package com.tinchicus.ejemplograficos;

import android.content.Context;
import android.graphics.Canvas;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class EjemploGraficosActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(new EjemploView(this));
    }

    public class EjemploView extends View {
        public EjemploView(Context context){
            super(context);
        }

        @Override
        protected void onDraw(Canvas canvas){
            // Aca iran las proximas instrucciones
        }
    }
}

Con este codigo simple podremos hacer pruebas para dibujar en un canvas pero por ahora no lo podremos utilizar, ahora vamos a ver como trabaja el paint para ello vamos a hacer la siguiente modificacion en el metodo onDraw():

protected void onDraw(Canvas canvas){
    Paint pincel = new Paint();
    pincel.setColor(Color.BLUE);
    pincel.setStrokeWidth(8);
    pincel.setStyle(Paint.Style.STROKE);
    canvas.drawCircle(150,150,100,pincel);
}

Como pueden primero vamos a crear un objeto pincel de la clase Paint, lo iniciamos, luego le asignamos el color azul por medio de esa constante, luego definimos el ancho del mismo, seteamos el estilo y por ultimo utilizamos el metodo drawCircle() con unas coordenadas para dibujarlo obteniendo el siguiente resultado

android09

Si lo desean pueden modificar el metodo de dibujo (drawCircle) para poder experimentar con las variaciones o probar con otras figuras, ahora hablaremos sobre los colores.
Como vimos en el ejemplo anterior, el color fue definido por medio del metodo setColor() pero en la realidad la mejor practica es utilizar un archivo en el recurso values en lugar de hacerlo por codigo Java. Igualmente veremos algunos ejemplos mas con Java para luego verlo por medio de un archivo, pasemos a ver una modificacion en Java sobre nuestro metodo onDraw():

protected void onDraw(Canvas canvas){
    Paint pincel = new Paint();
    pincel.setColor(Color.BLUE);
    pincel.setStrokeWidth(8);
    pincel.setStyle(Paint.Style.STROKE);
    canvas.drawCircle(150,150,100,pincel);
    pincel.setColor(Color.argb(127,255,0,0));
    canvas.drawCircle(150,250,100,pincel);
}

Como pueden ver agregamos dos lineas donde le decimos que utilice el color Rojo, recuerden el primer campo es el alfa, el segundo es el colo rojo, el tercero es el verde y el cuarto es el azul para finalmente volver a dibujar un circulo veamos como queda el ejemplo

android10

Ahora vamos a hacer una modificacion mas sobre nuestro metodo:

protected void onDraw(Canvas canvas){
    Paint pincel = new Paint();
    pincel.setColor(Color.BLUE);
    pincel.setStrokeWidth(8);
    pincel.setStyle(Paint.Style.STROKE);
    canvas.drawCircle(150,150,100,pincel);
    pincel.setColor(Color.argb(127,255,0,0));
    canvas.drawCircle(150,250,100,pincel);
    pincel.setColor(0x7F00FF00);
    canvas.drawCircle(150,350,100,pincel);
}

Como pueden ver agregamos dos lineas mas, en este caso el setColor() lo seteamos por medio de un codigo hexadecimal, los ultimos seis digitos son los encargados de setear el color, en este caso usamos un verde, luego le dijimos que dibuje un circulo por medio de drawCircle() dandonos un resultado como se ve a continuacion

android11

Como vimos estos son los tres metodos de poder completar el setColor() y poder asignar un color, todo por medio de codigo Java ahora veamos por medio de un archivo XML. Primero vamos a abrir el archivo colors.xml ubicado en res/values/colors.xml donde tendremos el siguiente codigo:

< ?xml version="1.0" encoding="utf-8"? >
< resources >
    < color name="colorPrimary" >#3F51B5< /color >
    < color name="colorPrimaryDark" >#303F9F< /color >
    < color name="colorAccent" >#FF4081< /color >
< /resources >

Ahora le agregaremos la siguiente linea:

< color name="color_circulo" >#7FFFFF00< /color >

Quedando el codigo del archivo colors.xml de la siguiente forma:

< ?xml version="1.0" encoding="utf-8"? >
< resources >
    < color name="colorPrimary" >#3F51B5< /color >
    < color name="colorPrimaryDark" >#303F9F< /color >
    < color name="colorAccent" >#FF4081< /color >
    < color name="color_circulo" >#7FFFFF00< /color >
< /resources >

Ahora vamos a hacer una modificacion sobre el metodo onDraw(), en este caso vamos a eliminar varias lineas y vamos a reemplazar el metodo setColor() para utilizarlo con nuestro archivo:

protected void onDraw(Canvas canvas){
    Paint pincel = new Paint();
    pincel.setColor(getResources().getColor(R.color.color_circulo));
    pincel.setStrokeWidth(8);
    pincel.setStyle(Paint.Style.STROKE);
    canvas.drawCircle(150,150,100,pincel);
}

Como pueden ver modificamos el setColor() para obtener los recursos por medio de getResources(), getColor() y le diremos que utilice el elemento de color_circulo del archivo colors.xml por medio de R.color.color_circulo. Si probamos nuestra app obtendremos un resultado como el siguiente

android12

Ahora vamos a trabajar con otra clase llamada Path, la cual se encargara de definir un trazo (path) para definir un dibujo por medio de lineas y curvas y tambien se puede usar para poner texto sobre el trazado pero para verlo un poco mejor modifiquemos el metodo onDraw() de nuestro ejemplo de la siguiente forma:

protected void onDraw(Canvas canvas){
    Path trazo = new Path();
    trazo.addCircle(150,150,100, Path.Direction.CCW);
    canvas.drawColor(Color.WHITE);
    Paint pincel = new Paint();
    pincel.setColor(Color.BLUE);
    pincel.setStrokeWidth(8);
    pincel.setStyle(Paint.Style.STROKE);
    canvas.drawPath(trazo, pincel);
    pincel.setStrokeWidth(1);
    pincel.setStyle(Paint.Style.FILL);
    pincel.setTextSize(20);
    pincel.setTypeface(Typeface.SANS_SERIF);
    canvas.drawTextOnPath("Desarrollo de aplicaciones " +
            "para moviles con Android",trazo,10,40,pincel);
}

En esta modificacion utilizaremos un objeto llamado trazo de la clase Path, a la cual agregaremos un circulo por medio del metodo addCircle(), donde definimos el eje X, el eje Y, el radio, y la direccion a donde gira el circulo (CCW), luego pintamos el canvas de color blanco, despues creamos un objeto pincel de la clase Paint, luego le seteamos el color azul por medio de la constante Color.BLUE y el metodo setColor(), definimos su ancho, y por ultimo su estilo, para despues dibujar el trazo definido por medio de trazo y con el pincel. Ahora definiremos nuevamente el ancho de nuestro pincel, nuestro siguiente paso sera cambiar el estilo, ahora setearemos el tamaño del texto, en el siguiente caso seteamos el tipo de fuente, y por ultimo utilizaremos el metodo drawTextOnPath() para poner un texto sobre el trazo creado, primero ira nuestro texto, luego utilizaremos el objeto trazo, luego setearemos un offset horizontal y despues un offset vertical, para ubicarlo por encima del trazo, nuestro ultimo atributo es el objeto pincel para dibujarlo, si probamos nuestra app obtendremos el siguiente resultado

android14

Como pueden ver nuestro texto acompaña a la figura formada por el trazo (Path) y alrededor nuestro texto “dibujado”, ahora procederemos a hacer una pequeña modificacion para ver como trabaja la clase Path, veamos la modificacion al metodo onDraw():

protected void onDraw(Canvas canvas){
    Path trazo = new Path();
    trazo.moveTo(50,100);
    trazo.cubicTo(60,70,150,90,200,110);
    trazo.lineTo(300,200);
    canvas.drawColor(Color.WHITE);
    Paint pincel = new Paint();
    pincel.setColor(Color.BLUE);
    pincel.setStrokeWidth(8);
    pincel.setStyle(Paint.Style.STROKE);
    canvas.drawPath(trazo, pincel);
    pincel.setStrokeWidth(1);
    pincel.setStyle(Paint.Style.FILL);
    pincel.setTextSize(20);
    pincel.setTypeface(Typeface.SANS_SERIF);
    canvas.drawTextOnPath("Desarrollo de aplicaciones " +
            "para moviles con Android",trazo,10,40,pincel);
}

Como pueden ver en el codigo modificamos solamente las primera cuatro lineas, donde primero moveremos el cursor a las coordenadas informadas, luego por medio del metodo cubicTo() estableceremos tres puntos con las coordenadas x e y, y por ultimo con lineTo() uniremos esos puntos despues el resto es como lo vimos antes, ahora solo nos resta probar la app y obtendremos un resultado como se ve a continuacion

android15

Como pueden ver se modifico la forma de la figura y nuestro texto se adapto a la nueva forma, recuerden siempre presionar Alt+Enter cuando el editor se los sugiera para insertar los paquetes necesarios para utilizar las clases y sus respectivos metodos.
En resumen, hoy hemos visto que es y como se usa el tipo de grafico llamado canvas, algunos metodos y cuales son sus funciones, hemos armado un ejemplo y le hemos hecho algunas modificaciones para ver como trabaja, tambien hemos visto que es la clase Paint y Path, para que sirven y como se usan, espero les haya gustado, sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Anuncios