Android Question Canvas Draw Text Center Is Not Centering

Mahares

Expert
Licensed User
Longtime User
Below is my full project. I would like to use ‘CENTER’ for ‘World Cup 2018’ in cvs.DrawText line, but the only way I can do it is to manipulate the position x and use LEFT. How can I use ‘CENTER’ and achieve a horizontally centered text. I only want to make use of the core lib. I do not wish to use XUI lib.
Thank you
B4X:
Sub Activity_Resume
    CreateBitmap
End Sub

Sub Activity_Pause (UserClosed As Boolean)
    If UserClosed Then Activity.Finish
End Sub

Sub Activity_Create(FirstTime As Boolean)  
End Sub

Sub CreateBitmap As Canvas
   Dim bmp As Bitmap
   bmp.InitializeMutable(200dip, 200dip)
   Dim cvs As Canvas
   cvs.Initialize2(bmp)
   Dim r As Rect
   r.Initialize(0, 0, bmp.Width, bmp.Height)
   cvs.DrawRect(r, Colors.Transparent, False, 5dip)
   DrawBitmap(cvs, LoadBitmap(File.DirAssets, "worldcuprussia2018.png"))
    cvs.DrawText("World Cup 2018",0,cvs.Bitmap.Height/2,Typeface.DEFAULT_BOLD,12,Colors.blue,"CENTER")
'   cvs.DrawText("World Cup 2018",0,cvs.Bitmap.Height/2,Typeface.DEFAULT_BOLD,12,Colors.blue,"LEFT")
   Activity.SetBackgroundImage(cvs.Bitmap)
   Return cvs
End Sub

Sub DrawBitmap (cvs As Canvas, bmp As Bitmap)
   Dim r As Rect
   r.Initialize(0, 0, cvs.Bitmap.Width, cvs.Bitmap.Height)
   cvs.DrawBitmap(bmp, Null, r)
End Sub
 

Attachments

  • WorldCupRussia2018.png
    WorldCupRussia2018.png
    57.1 KB · Views: 500
  • CenterProblem.png
    CenterProblem.png
    35.2 KB · Views: 420

Mahares

Expert
Licensed User
Longtime User
This post might be helpful in answering your question
The link is quite old from 2010 and does not address the 'CENTER' position. I am attaching the full project. Perhaps someone can figure it out.
 

Attachments

  • CanvasTextNotCentered062218.zip
    65.5 KB · Views: 358
Upvote 0

stevel05

Expert
Licensed User
Longtime User
As Jeffrey said, the alignment in relation to drawing on a canvas defines how the text is positioned relative to the specified x point.

You would need to change

B4X:
cvs.DrawText("World Cup 2018",0,cvs.Bitmap.Height/2,Typeface.DEFAULT_BOLD,12,Colors.blue,"CENTER")

to

B4X:
cvs.DrawText("World Cup 2018",cvs.Bitmap.Width/2,cvs.Bitmap.Height/2,Typeface.DEFAULT_BOLD,12,Colors.blue,"CENTER")

The text will then be drawn centered on the x position (cvs.Bitmap.Width/2), which is at the center of the bitmap,

To test it, change the Alignment from "CENTER" to "LEFT" or "RIGHT" to see the difference.
 
Last edited:
Upvote 0

Jeffrey Cameron

Well-Known Member
Licensed User
Longtime User
The link is quite old from 2010 and does not address the 'CENTER' position.
Correct, but it did nicely illustrate the origin point of the drawtext method which is what I was attempting to emphasize.

It should also be noted that the text is drawn starting from the origin point, UP and left/right from the origin point. So, if you wish to correctly center the text on the Y axis you should add 1/2 of the text height to your Y value (see Canvas.MeasureStringHeight).
 
Upvote 0
Top