Aprende los conceptos básicos del dibujo con Android Canvas Class

Sumérgete en el uso de la Canvasclase de Android puede desbloquear superpoderes mágicos que nunca supiste que tenías. ¿Imagina poder dibujar cualquier cosa * que su corazón desee solo con algunas formas básicas, caminos y mapas de bits? Bueno, Android Canvas te brinda esa capacidad. 

¿Qué es un lienzo?

Canvases una clase en Android que realiza dibujos en 2D de diferentes objetos en la pantalla. El dicho "un lienzo en blanco" es muy similar a lo que es un objeto Canvas en Android. Básicamente es un espacio vacío para dibujar.

La Canvasclase no es un concepto nuevo, esta clase en realidad está envolviendo un problema SKCanvas. El SKCanvasproviene de SKIA , que es una biblioteca de gráficos 2D que se utiliza en muchas plataformas diferentes. SKIA se usa en plataformas como Google Chrome, Firefox OS, Flutter, Fuschia, etc. Una vez que comprenda cómo Canvasfunciona en Android, los mismos conceptos de dibujo se aplican a muchas otras plataformas diferentes.

Consejo : Consulte el código fuente de SKIA para obtener una comprensión
más profunda de la implementación de Canvas.

Es útil saber que SKIA se usa en el código subyacente para Android, por lo que cuando te quedas atascado tratando de entender cómo funciona una determinada API, puedes mirar la fuente de SKIA para obtener una comprensión más profunda.

Sistema de coordenadas de lienzo

 El sistema de coordenadas de Android Canvas

El sistema de coordenadas del lienzo de Android comienza en la esquina superior izquierda, donde [0,0] representa ese punto. El yeje es positivo hacia abajo y el xeje positivo hacia la derecha.

Todos los elementos dibujados en un lienzo se colocan en relación con el punto [0,0].

Al trabajar con el lienzo, está trabajando con px y no con dp , por lo que cualquier método como la traducción o el cambio de tamaño se realizará en tamaños de píxel. Esto significa que debe traducir los valores de dp a px antes de llamar a cualquier operación de lienzo. Esto asegurará que su dibujo se vea consistente en dispositivos con diferentes densidades de píxeles.

Los comandos de dibujo del lienzo dibujarán sobre elementos dibujados previamente. El último comando de dibujo será el elemento superior dibujado en su lienzo. Depende de usted asegurarse de que sus elementos estén distribuidos correctamente (Alternativamente, es posible que desee utilizar algunos de los mecanismos de diseño integrados para esto, como por ejemplo LinearLayout).

¿Cómo uso un lienzo?

Para dibujar en un lienzo en Android, necesitará cuatro cosas:

1. Un mapa de bits o una vista: para mantener los píxeles donde se dibujará el lienzo.
2. Lienzo: para ejecutar los comandos de dibujo.
3. Comandos de dibujo: para indicar al lienzo qué dibujar.
4. Paint: para describir cómo dibujar los comandos.

Obtenga acceso a una instancia de Canvas

Para obtener acceso a una Canvasinstancia, deberá crear una clase que se extienda desde View. Esto le permitirá anular el onDrawmétodo, que tiene Canvasun parámetro. 

constructor de clase CustomView @JvmOverloads (contexto: contexto, 
    atributos: AttributeSet? = null, defStyleAttr: Int = 0) 
    : View (context, attrs, defStyleAttr) { 


    // Se llama cuando la vista debe mostrar su contenido. 
    anular la diversión onDraw (lienzo: lienzo?) { 
        super.onDraw (lienzo) 
        // DIBUJAR MATERIA AQUÍ 
    } 
}


Luego puede incluir esta vista dentro de su XML de diseño y esto invocará automáticamente el onDrawmétodo de la Vista personalizada. 

<za.co.riggaroo.customviews.CustomView 
        android: layout_width = "200dp" 
        android: layout_height = "300dp" 
        app: layout_constraintBottom_toBottomOf = "parent" 
        app: layout_constraintLeft_toLeftOf = "parent" 
        app: layout_constraintRight_toRightOf 
        ". padre "/>

También puede obtener acceso a un Canvasobjeto creando programáticamente uno en código, como este:

val bitmap = Bitmap.createBitmap (ancho, alto, Bitmap.Config.ARGB_8888) 
val canvas = Canvas (mapa de bits)


Vale la pena señalar en este punto que cualquier Canvascreado mediante programación 

sin usar un View, será procesado por software y no por hardware. Esto puede afectar 

la apariencia de algunos de los comandos de dibujo. Por ejemplo, algunos comandos 

simplemente no son compatibles con la representación de hardware , o solo son 

compatibles desde un cierto nivel de API. Para obtener más información sobre las 

diferencias entre la representación  de hardware y la de software, lea esta publicación.

¿Qué puedo dibujar en un lienzo?

Hay muchas cosas diferentes a las que puedes recurrir Canvas. Una de las operaciones de dibujo más comunes es dibujar un mapa de bits (imagen) en el lienzo. El método para hacerlo simplemente se llama drawBitmapy toma el objeto de mapa de bits que se carga con los mecanismos integrados de Android o con Glide.

canvas.drawBitmap (mapa de bits, nulo, rect, pintura)

El segundo parámetro aquí nos permite pasar la parte del mapa de bits que desea renderizar, cuando se pasa nulltodo el mapa de bits. El tercer parámetro es un RectFobjeto que representa la escala y la traducción del mapa de bits que desea dibujar en la pantalla. 

Sugerencia : Asegúrese de que su RectFobjeto que pasa a la drawBitmapfunción
esté escalado con la relación de aspecto correcta; de lo contrario, su salida podría ampliarse

Debe tener cuidado con esto, ya que puede estirar fácilmente el mapa de bits, ya que las llamadas de Canvas no tienen en cuenta la relación de aspecto de la imagen proporcionada. Debe asegurarse de rectque lo que se pasa se escala correctamente. El cuarto parámetro es el paintobjeto, cubriremos el propósito de este parámetro pronto.

Existen muchos otros Canvasmétodos de dibujo que pueden brindarle unas vistas espectaculares. No los cubriremos todos aquí, pero aquí hay otros dos ejemplos de métodos de dibujo en la Canvasclase:

Para dibujar un círculo en la vista, dele un punto central x,y , su sizey un paintobjeto:

canvas.drawCircle (x, y, tamaño, pintura)

Otro es el drawRect()método. Esto dibuja un rectángulo en la pantalla:

canvas.drawRect (rect, pintura)

Esta no es la lista completa de métodos de dibujo, sino solo un pequeño resaltado de algunos de ellos para que se sienta más cómodo con los conceptos, no dude en navegar en la documentación de Canvas para obtener una lista completa de todos ellos.

Pintar

En mi opinión, la Paintclase es posiblemente la clase de gráficos más interesante y también es mi favorita, por esa misma razón. Hay tanto que un Paintobjeto puede hacer que realmente puede hacer que sus operaciones de dibujo brillen.

La Paintclase generalmente contiene información de color y estilo. El Paintobjeto se utiliza para dibujar objetos (es decir, mapa de bits, texto, rutas, etc.) en un Canvas.

Para crear un Paintobjeto:

private val textPaint = 
    Paint (). apply { 
        isAntiAlias ​​= true 
        color = Color.RED 
        style = Paint.Style.STROKE 
    }

Este objeto debe crearse antes de usarlo Canvas#onDraw(). No se recomienda crearlo onDraw()ya que no debería estar haciendo asignaciones de objetos en ese método. 

isAntiAlias ​​Flag

Consejo: Use la isAntiAliasbandera para asegurarse de que su dibujo tenga bordes suaves.

La isAntiAliasbandera es bastante importante. Si está dibujando objetos en su lienzo y observa que los bordes de sus objetos tienen bordes irregulares, es probable que no haya establecido esta bandera en verdadero. Esta bandera indica a la pintura para suavizar los bordes del objeto que está dibujando en el lienzo.

La Paintclase tiene más que solo esas tres propiedades, hay muchas más cosas que puede hacer con ella. Por ejemplo, también puede establecer propiedades relacionadas con la representación de texto, como typeface, letterSpacing(kerning) y textSize.

private val textPaint = 
    Paint (). apply { 
        isAntiAlias ​​= true 
        textSize = fontSize 
        letterSpacing = letterSpace 
        typeface = newTypeface 
        setShadowLayer (blurValue, x, y, Color.BLACK) 
    }

Operaciones no admitidas

Consejo: compruebe que las API de Canvas / Paint que está utilizando funcionan en diferentes versiones de API. Vea este sitio para más información.

Vale la pena señalar que el Paint#setShadowlayer()método no funciona de manera consistente en los niveles de API y los comandos de dibujo. Funciona al dibujar texto en un lienzo, pero la aplicación de la sombra a otros comandos, como por ejemplo drawBitmap, no produce los mismos resultados en los niveles de API.

La razón de la inconsistencia entre los niveles de API es porque las API de Canvas están agrupadas con la plataforma Android y, por lo tanto, no se actualizan hasta que se actualiza el sistema operativo. Consulte la lista en esta página para obtener más información sobre qué API funcionan en qué versiones de Android.

Una vez que haya creado el Paintobjeto, pase ese objeto a sus Canvas#draw*()llamadas y el dibujo tomará las propiedades que ha especificado en la pintura.