Press enter to see results or esc to cancel.

Lesson 37 – Draw: text on a path in kotlin

Share this
()

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 Lesson?

Click on a star to rate it!

Average rating / 5. Vote count:

Be the first to rate this post.!

As you found this post useful...

Follow us on social media!

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

Let us improve this lesson!

Tell us how we can improve this lesson?

Share this