I am having trouble centering text, both horizontally and vertically. Here is my code:
var width = dc.getWidth();
var height = dc.getHeight();
var textWidth = dc.getTextWidthInPixels("12345",Gfx.FONT_NUMBER_THAI_HOT)+15; // all +15 does is give some padding to all sides of the box.
var textHeight = dc.getFontHeight(Gfx.FONT_NUMBER_THAI_HOT)+15; // all +15 does is give some padding to all sides of the box.
// Draw White Filled Box.
dc.setColor(Gfx.COLOR_WHITE, Gfx.COLOR_TRANSPARENT);
dc.fillRectangle((0 - ((textWidth-width)/2)), (0 - ((textHeight-height)/2)), textWidth, textHeight);
// Draw Black Outline.
dc.setColor(Gfx.COLOR_BLACK, Gfx.COLOR_TRANSPARENT);
dc.drawRectangle((0 - ((textWidth-width)/2)), (0 - ((textHeight-height)/2)), textWidth, textHeight);
//Draw the time.
dc.drawText(dc.getWidth() / 2, dc.getHeight() / 2, Gfx.FONT_NUMBER_THAI_HOT, "12345", Gfx.TEXT_JUSTIFY_VCENTER+Gfx.TEXT_JUSTIFY_CENTER); Examples:
If you look closely at the examples, the text isn't centered in the box. Sometimes the text is a few pixels too low, or too high. Mostly often to the right at bit. It differs on each device type.
With my previous watch faces, I had to manually add vertical offsets for the text for certain device types.
Any tips on getting centered text please?