Canvas

La clase Canvas representa una superficie donde podemos dibujar. Dispone de una serie de métodos que nos permiten representar líneas, círculos, texto, …Para dibujar en un Canvasnecesitaremos un pincel (Paint) donde definiremos el color, grosor de trazo, transparencia,… También podremos definir una matriz de 3x3 (Matrix) que nos permitirá transformar coordenadas aplicando una translación, escala o rotación. Otra opción consiste en definir un área conocida como Clip, de forma que los métodos de dibujo afecten solo a esta área.

Veamos a continuación algunos métodos de la clase Canvas. No se trata de un listado exhaustivo y muchos de estos métodos pueden trabajar con otros parámetros, por lo tanto se recomienda consultar la documentación del SDK para una información más detallada.

Para dibujar figuras geométricas:

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)

Para dibujar líneas y arcos:

drawLine(float iniX, float iniY, float finX, float finY,
                                                      Paint pincel)
drawLines(float[] puntos, Paint pincel)
drawArc(RectF ovalo, float iniAnglulo, float anglulo, 
                                                      boolean usarCentro,Paint pincel)
drawPath(Path trazo, Paint pincel)

Para dibujar texto:

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

Para rellenar todo el Canvas (a no ser que se haya definido un Clip)

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

Para dibujar imágenes:

 

drawBitmap(Bitmap bitmap, Matrix matriz, Paint pincel)

Si definimos un Clip, solo se dibujará en el área indicada:

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

Definir una matriz de transformación (Matrix) nos permitirá transformar coordenadas aplicando una translación, escala o rotación.

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

Puedes ver algunos aspectos relacionados en formato poli[Media]

 La clase canvas  en Android

 

Ejercicio paso a paso: Creación de una vista personalizada

A continuación se muestra un ejemplo donde se crea una vista que es dibujada por código por medio de un Canvas.

1.     Crea un nuevo proyecto con los siguientes datos:

Application name: EjemploGraficos

Package name: org.example.ejemplograficos

Minimun Requiered SDK: API 7 Android 2.1 (Eclair)

Activity Name: EjemploGraficosActivity

Layout Name: main.xml

2.     Reemplaza el código de la actividad por:

public class EjemploGraficosActivity extends Activity {
    @Override
    public 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) {
            //Dibujar aquí
        }
    }
}

Comienza con la creación de una Activity, pero en este caso, el objeto View que asociamos a la actividad mediante el método setContentView() no está definido mediante XML. Por el contrario, es creado mediante código a partir del constructor de la clase EjemploView.

La clase EjemploView extiende View, modificando solo el método onDraw() responsable de dibujar la vista. A lo largo del capítulo iremos viendo ejemplos de código que pueden ser escritos en este método.

3.     Si ejecutas la aplicación no se observará nada. Aprenderemos a dibujar en esta Canvasutilizando el objeto Paint descrito en la siguiente sección.

Nota sobre Java: Siempre que en un ejemplo aparezca un error indicándote que no se puede resolver un tipo, pulsa Ctrl-Shift-O para añadir los import de forma automática.