Lesson 37 – Draw: text on a path in kotlin

If we want to have text that is not horizontal, we must create a path indicating the points where the text will pass.

1 – We created a project called: Proyecto041

We delete the TextView that automatically adds the Android Studio and define the ConstraintLayout id with the value: layout1:

 

Lesson 37 - Draw: text on a path in kotlin - Lesson 37 - Draw: text on a path in kotlin - Lesson 37 - Draw: text on a path in kotlin -

Now we encode the class where the whole logic is:

package com.coding180.project041


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


class MainActivity: AppCompatActivity () {

    override fun onCreate (savedInstanceState: Bundle?) {
        super.onCreate (savedInstanceState)
        setContentView (R.layout.activity_main)
// coding180.com
        val layout1 = findViewById (R.id.layout1) as android.support.constraint.ConstraintLayout
        val background = Canvass (this)
        layout1.addView (background)
    }

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

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

We create an object of class Path and we indicate the first point of the way calling the method moveTo:

            Val path = Path ()
            Path.moveTo (0f, (high / 2) .toFloat ())

Then we indicate all the other points in a consecutive way by calling the lineTo method:

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

Then to graph the text we call the method drawTextOnPath and we pass in the second parameter the reference of the object of type Path:

            Canvas.drawTextOnPath ("Hello World", path, 0f, 0f, brush1)

The output of the program is:

 

Lesson 37 - Draw: text on a path in kotlin - Lesson 37 - Draw: text on a path in kotlin - Lesson 37 - Draw: text on a path in kotlin -

,,,,,,,,,,,,,,,,,,,,,,,

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

No ratings yet.

Please rate this

Leave a Reply

Your email address will not be published. Required fields are marked *