Search code examples
androidcanvasclockbaseline

where are the numbers ' baseline?


i study the app like this ,the clock UI .

    /**
     * draw the hour text (12、3、6、9)
     * draw the arc
     */
    private void drawTimeText() {
        //draw the hour text 
        String timeText = "12";
        mTextPaint.getTextBounds(timeText, 0, timeText.length(), mTextRect);
        int textLargeWidth = mTextRect.width();//两位数字的宽
        mCanvas.drawText("12", getWidth() / 2 - textLargeWidth / 2, mPaddingTop + mTextRect.height(), mTextPaint);
        timeText = "3";

        mTextPaint.getTextBounds(timeText, 0, timeText.length(), mTextRect);
        int textSmallWidth = mTextRect.width();//一位数字的宽
        mCanvas.drawText("3", getWidth() - mPaddingRight - mTextRect.height() / 2 - textSmallWidth / 2,
                getHeight() / 2 + mTextRect.height() / 2, mTextPaint);

        mCanvas.drawText("6", getWidth() / 2 - textSmallWidth / 2, getHeight() - mPaddingBottom, mTextPaint);
        mCanvas.drawText("9", mPaddingLeft + mTextRect.height() / 2 - textSmallWidth / 2,
                getHeight() / 2 + mTextRect.height() / 2, mTextPaint);


      //draw the arc
        mCircleRectF.set(mPaddingLeft + mTextRect.height() / 2 + mCircleStrokeWidth / 2,
                mPaddingTop + mTextRect.height() / 2 + mCircleStrokeWidth / 2,
                getWidth() - mPaddingRight - mTextRect.height() / 2 + mCircleStrokeWidth / 2,
                getHeight() - mPaddingBottom - mTextRect.height() / 2 + mCircleStrokeWidth / 2);
        for (int i = 0; i < 4; i++) {
            mCanvas.drawArc(mCircleRectF, 5 + 90 * i, 80, false, mCirclePaint);
        }

i don't know when draw the hour text "3",

mCanvas.drawText("3", getWidth() - mPaddingRight - mTextRect.height() / 2 - textSmallWidth / 2,
                    getHeight() / 2 + mTextRect.height() / 2, mTextPaint);

use canvas.drawText(),

void drawText (String text, 
                int start, 
                int end, 
                float x, 
                float y, 
                Paint paint)

"y" means the baseline of number ,i don't know the rules of number's baseline ,like "3",where is the baseline of number ? i search google the "baseline",but it just about English alphabet baseline , nothing about the number baseline.


Solution

  • The baseline for numbers is the same as for letters as far as I'm aware. Most font's number will all sit on the baseline, but some will extend below the baseline much like a 'g' or a 'j' does in most fonts (some 'old style' or 'script' fonts are a good example of this)......

    enter image description hereenter image description here

    The dotted lines here are the baselines.

    Don't forget, when you send the y coordinate into the drawText method, it's expecting the baseline and not the top of the characters. Hope this helps.