37 - Dibujar: texto sobre un camino

Si queremos disponer texto que no esté horizontal debemos crear un camino indicando los puntos donde pasará el texto.

1 - Creamos un proyecto llamado: Proyecto041

Borramos el TextView que agrega automáticamente el Android Studio y definimos el id del ConstraintLayout con el valor: layout1:

Canvas Android

Ahora codificamos la clase donde se encuentra toda la lógica:

package com.tutorialesprogramacionya.proyecto041

import android.content.Context
import android.graphics.Canvas
import android.graphics.Paint
import android.graphics.Path
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import androidx.constraintlayout.widget.ConstraintLayout

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val fondo = Lienzo(this)
        val layout1=findViewById<ConstraintLayout>(R.id.layout1)
        layout1.addView(fondo)
    }

    class Lienzo(context: Context) : View(context) {

        override fun onDraw(canvas: Canvas) {
            canvas.drawRGB(0, 0, 255)
            val alto = getHeight()
            val camino = Path()
            camino.moveTo(0f, (alto / 2).toFloat())
            camino.lineTo(40f, (alto / 2 - 30).toFloat())
            camino.lineTo(80f, (alto / 2 - 60).toFloat())
            camino.lineTo(120f, (alto / 2 - 90).toFloat())
            camino.lineTo(160f, (alto / 2 - 120).toFloat())
            camino.lineTo(220f, (alto / 2 - 150).toFloat())
            camino.lineTo(280f, (alto / 2 - 180).toFloat())
            camino.lineTo(340f, (alto / 2 - 210).toFloat())
            val pincel1 = Paint()
            pincel1.setARGB(255, 255, 0, 0)
            pincel1.setTextSize(80f)
            canvas.drawTextOnPath("Hola Mundo", camino, 0f, 0f, pincel1)
        }
    }
}

Creamos un objeto de la clase Path e indicamos el primer punto del camino llamando al método moveTo:

            val camino = Path()
            camino.moveTo(0f, (alto / 2).toFloat())

Luego indicamos todos los otros puntos en forma consecutiva llamando al método lineTo:

            camino.lineTo(40f, (alto / 2 - 30).toFloat())
            camino.lineTo(80f, (alto / 2 - 60).toFloat())
            camino.lineTo(120f, (alto / 2 - 90).toFloat())
            camino.lineTo(160f, (alto / 2 - 120).toFloat())
            camino.lineTo(220f, (alto / 2 - 150).toFloat())
            camino.lineTo(280f, (alto / 2 - 180).toFloat())
            camino.lineTo(340f, (alto / 2 - 210).toFloat())

Luego para graficar el texto llamamos al método drawTextOnPath y le pasamos en el segundo parámetro la referencia del objeto de tipo Path:

            canvas.drawTextOnPath("Hola Mundo", camino, 0f, 0f, pincel1)

La salida del programa es:

Canvas Android

Este proyecto lo puede descargar en un zip desde este enlace: proyecto041.zip