Como colocar texto en un canvas de Android - CableNaranja

Cómo colocar texto en un canvas de #Android

¡Comparte nuestro contenido!

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)

La penúltima vez que hablamos de Android, descubrimos como poner un background sobre un canvas. En esta ocasión, aprendemos a colocar texto sobre un canvas básico, útil si estamos desarrollando alguna aplicación de dibujo o un videojuego. Ahora bien, para no comenzar de cero ni repetir lo básico, partiremos justo donde termina el artículo: Como crear un canvas en Android Studio ¡A trabajar!

Un pincel para manejarlo todo

Descargamos o abrimos el projecto creado en el artículo anterior, luego nos movemos a la clase el Canvas y añadimos un objeto Paint para manipular nuestro texto.

Paint pincelTexto = new Paint();

Este objeto, es capaz de manipular todas las propiedades básicas de nuestro texto. Por supuesto, si necesitamos manipular muchas variables de texto sobre nuestro canvas, entonces mejor crear más de uno.

Estableciendo tamaño, tipo de fuente y alineación

Lo primero, es elegir el tipo de fuente, así que también vamos a añadir una variable de tipo Typeface, un miembro de la clase android.graphics.

Typeface tipoFuente;

Dentro del método onDraw de nuestra clase, vamos a definir la primera fuente, usando el método create del objeto Typeface que acepta dos valores, la familia de fuentes y el estilo a aplicar.

tipoFuente = Typeface.create(Typeface.SERIF,Typeface.NORMAL);

Respecto a la familia de fuentes, sólo acepta los valores: SERIF, MONOSPACE y SANS_SERIF. En cuanto al estilo acepta: NORMAL, BOLD, ITALIC y BOLD_ITALIC.

Ahora, aplicamos nuestra fuente al pincel de texto, esto lo hacemos con el método setTypeface.

pincelTexto.setTypeface(tipoFuente);

Establecemos el tamaño de letra con el método setTextSize.

pincelTexto.setTextSize(40);

Y centramos el texto con el método setTextAlign que acepta los valores Paint.Align.CENTER, Paint.Align.LEFT y Paint.Align.RIGHT.

pincelTexto.setTextAlign(Paint.Align.CENTER);

Finalmente, pintamos el texto de color azul.

pincelTexto.setColor(Color.BLUE);

Colocando el texto y aplicando el pincel

Para escribir texto, el objeto Canvas contiene el método drawText que contiene los siguientes argumentos:

  • text: La cadena de texto
  • x: El valor en el eje X
  • y: El valor en el eje Y
  • paint: Un objeto de tipo Paint con sus valores definidos.

Por ejemplo, el siguiente código coloca el texto en el centro de la pantalla.

canvas.drawText("Hola mundo", getWidth() / 2, 40, pincelTexto);

Corremos nuestro código escrito, y se debe ver como sigue:

Como colocar texto en un canvas de Android - CableNaranja

Adjuntar una fuente al proyecto

Dado que las fuentes que soporta Typeface son muy limitadas, vamos a utilizar una fuente como Cinerama, la cual hemos descargado de Dafont. Para ello, sobre nuestro proyecto, presionamos el botón derecho del ratón, seleccionamos New, luego Folder y finalmente Font Resources Folder.

Como colocar texto en un canvas de Android - CableNaranja

Presionamos Finish en la siguiente ventana:

Como colocar texto en un canvas de Android - CableNaranja

Y la carpeta fonts, aparece en nuestro directorio res.

Como colocar texto en un canvas de Android - CableNaranja

Ahora, arrastremos la fuente de nuestro equipo, hacia nuestro proyecto.

Como colocar texto en un canvas de Android - CableNaranja

Le damos OK a la ventana de confirmación

Como colocar texto en un canvas de Android - CableNaranja

Y la fuente ya aparece en nuestro directorio res

Como colocar texto en un canvas de Android - CableNaranja

Para que no tengamos problemas con la mayúscula al principio del nombre de la fuente, vamos a renombrarla. Para ello, presionamos el botón derecho del ratón sobre nuestra fuente, seleccionamos Refactor y luego Rename.

Como colocar texto en un canvas de Android - CableNaranja

Ponemos la letra C en minúscula y presionamos el botón Refactor.

Como colocar texto en un canvas de Android - CableNaranja

Es hora de añadir la fuente, para lograrlo, usaremos el método getFont del objeto ResourcesCompact, el cual lleva dos parámetros: el contexto que podemos obtenerlo con la función getContext y la fuente que en este caso será R.font.cinerama.

tipoFuente = ResourcesCompat.getFont(getContext(), R.font.cinerama);

Aplicamos el tipo de fuente.

pincelTexto.setTypeface(tipoFuente);

Le ponemos un tamaño de fuente algo grande.

pincelTexto.setTextSize(80);

Con el método setARGB le ponemos un color naranja

pincelTexto.setARGB(255, 255, 51, 0);

Y escribimos un texto en el canvas con un poco más de valor en Y para que no se amontone con los objetos que ya hay en escena.

canvas.drawText("CableNaranja", getWidth() / 2, 520, pincelTexto);

¡Y así queda el resultado final!

Como colocar texto en un canvas de Android - CableNaranja

¿Te ha resultado? Déjanos saber en los comentarios aquí abajo, en nuestra cuenta de twitter @cablenaranja7 o en nuestra página de facebook.

¡Comparte nuestro contenido!

Entradas relacionadas

2 comentarios en "Cómo colocar texto en un canvas de #Android"

  1. cuando coloco la dena a pintar con el drawtext, la cadena sale con algunos espacios, por ejemplo: “Hola mundo” podria salir como: “Ho la mun do”, a que se debe esto?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *