Prevent canvas from disjoining drawn text

Question

I am trying to draw grid of numbers into a canvas.

val textX = x * TILE_SIZE + TILE_SIZE / 2f
val textY = y * TILE_SIZE + TILE_SIZE / 2f 
canvas.drawText(number.toString(), textX, textY, textPaint)

This is my paint

private val textPaint: Paint by lazy {
    Paint().apply {
        isAntiAlias = false
        color = Color.WHITE
        textSize = TILE_SIZE * 0.1f
        textAlign = Paint.Align.CENTER
        style = Paint.Style.FILL
    }
}

But the canvas keeps disjointing my text and aligns it in a non regular grid. I double checked my position values. Is there something I am missing?

edit: I am aware I have alignment set to CENTER, but if you notice, the text in the 4th row has higher offset then in the previous row

I was able to resolve the text disjointing by adding a subPixelText flag, interestingly, when i set paints flag strikeThroughText

isStrikeThruText = true

I get following result:

This, I believe this shows that the coordinates are set properly but there might be some issue with the paint configuration due to the font size.

You should look at this post https://stackoverflow.com/questions/11120392/android-center-text-on-canvas . As answered the texts' baseline is placed on the coordinate you give it which causes it to be above the center of the cell. To truly center the text you should add some more to the Y coordinate depending on the text size. — Veselin Todorov, Apr 12 '18 at 13:01
Thanks, I have encountered this solution, but it doesn't resolve the disjointing and the vertical offset, in fact the problem persists even on the x-axis — Martin Rončka, Apr 12 '18 at 13:07
Probably the problem is in the x and y calculations. You should add the code where you calculate x and y. — Veselin Todorov, Apr 12 '18 at 13:17
x and y are int values from loop: for (x in 0 untill columnCount) and so on — Martin Rončka, Apr 12 '18 at 13:23
what does `Paint#getTextWidths(String text, float[] widths)` return in `widths` array? `Log.d` the content of that array — pskink, Apr 12 '18 at 13:23
Then what is number? For example: for 807 are you drawing 807 all at once or first 8 then 0 then 7? — Veselin Todorov, Apr 12 '18 at 13:26
Ok I might have a solution on the text disjointing, after setting isSubpixelText = true, each number now has equal width. This makes sense, since the text is really small. — Martin Rončka, Apr 12 '18 at 13:45

Martin Rončka · Answer 1 · 2018-04-12T16:19:15.420

There were two separate issues I have managed to solve:

Text disjointment - this was caused by having very small text, the result was that single letter has sometimes taken up too much space and shifted the next letter. Solution to this is changing paint subpixelText attribute:
```
isSubpixelText = true
```
Text misposition - after looking into Paint.FontMetrics I have realized that the ascent and descent values are recommended values set by the font and can be thus changed only within specified paint font. I solved this simply by switching to another font.

Edit: I ended up using StaticLayout, more on the topic here

Prevent canvas from disjoining drawn text

1 Answers1