Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Android / Dibujando con Canvas

Dibujando con Canvas

Por jc mouse jueves, abril 13, 2017

La clase Canvas (Lienzo)  de Android es una superficie que nos permite pintar figuras, texto e imágenes utilizando para ello la clase Paint, esta clase nos permite definir parámetros como el color, estilo o grosor del trazado de un gráfico vectorial. Su uso es sencillo, primero hay que definir una clase que extienda de View la cual puede estar contenida dentro de la misma Activity (o fuera de ella); Y a continuación sobreescribir el método onDraw (Similar a lo que hacíamos en java desktop al sobreescribir paintComponent), dentro de onDraw, vamos describiendo las primitivas que queremos pintar con Paint y las vamos añadiendo al lienzo (Canvas) para pintarlas.

A continuación mostramos un ejemplo de lo explicado más arriba. Creamos un proyecto en Android Studio con la clase por defecto MainActivity y reemplazamos el código por el siguiente:

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends AppCompatActivity {

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

        MyCanvasView myCanvasView = new MyCanvasView(this);
        setContentView(myCanvasView);
    }

    private class MyCanvasView extends View {

        /**
         * Constructor de clase
         * */
        public MyCanvasView(Context context) {
            super(context);
        }

        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);

            Paint paint = new Paint();
            paint.setColor(Color.WHITE);//color blanco
            canvas.drawPaint(paint);//pinta fondo

            //Texto
            paint.setColor(Color.RED);
            paint.setTextSize(42);//tamaño de texto
                            //texto , X, Y, Paint
            canvas.drawText("Hola Mundo Cruel!!!", 10, 56, paint);//pinta texto

            //linea
            paint.setAntiAlias(true);//para evitar efecto sierra
            paint.setStyle(Paint.Style.STROKE);//estilo
            paint.setStrokeWidth(10);//grosor de linea
            paint.setColor(Color.BLUE);
                            //x1 , y1, x2, y2
            canvas.drawLine(0, 100, canvas.getWidth(), 100, paint);

            // rectangulo
            paint.setAntiAlias(true);
            paint.setColor(Color.RED);
            paint.setStyle(Paint.Style.FILL);//relleno
                            // x, y, ancho , alto
            canvas.drawRect(40, 140, canvas.getWidth() - 40, 280, paint);

            // Circulo
            paint.setAntiAlias(true);
            paint.setColor(Color.GREEN);
            paint.setStyle(Paint.Style.STROKE);//borde
            paint.setStrokeWidth(3.6f);
                             // centro X, centro Y, radio
            canvas.drawCircle(canvas.getWidth() / 2 , 400, 100, paint);

            //poligono
            Path path = new Path();
            paint.setColor(Color.MAGENTA);
            paint.setStyle(Paint.Style.FILL);
            path.moveTo(canvas.getWidth() / 2, 550);
            path.lineTo(canvas.getWidth() / 2 + 100, 700);
            path.lineTo(canvas.getWidth() / 2 - 100, 700);
            path.close();
            canvas.drawPath(path, paint);

            //imagen
            Bitmap bmp = BitmapFactory.decodeResource(getResources(),
                    R.mipmap.ic_launcher );//Icono de android
                              //imagen, X, Y
            canvas.drawBitmap(bmp,canvas.getWidth() / 2,760,paint);

        }
    }

}//end  Main

ejecutamos y podemos ver a continuación el resultado

canvas android bolivia

enjoy!!!

Tags

Artículos similares

Leer datos de Firebase desde Android

En este post crearemos una aplicación en Android Studio para conectarnos con nuestra base de datos de Firebase y leer al[...]

Tomar fotos con la camara y guardar en la sdcard

En este post realizaremos una aplicación android que hará uso de la cámara del celular para tomar una foto y guardarla e[...]

CUF: Código Único en Kotlin

En este post implementamos en lenguaje Kotlin (lenguaje de programación de tipado estático que corre sobre la máquina vi[...]

Primeros pasos con Vue CLI: Crea tu Entorno de Trabajo

En un post anterior [Introducción a VueJS framework para el desarrollo FrontEnd] realizamos una breve introducción a Vue[...]

Laberinto del Terror (Código Fuente + juego)

El laberinto del terror es un juego en el que haciendo uso del ratón y de tu pulso de borracho debes cruzar distintos la[...]

Crear Miniaturas Thumbnails de Videos (Código Fuente)

VLC Media Player es un reproductor multimedia de código abierto muy popular desarrollado por el proyecto VideoLAN. VLCJ [...]