UI系列 07:(1) drawText的学习

Published: 17 Jul 2017 Category: UI

经常使用Canvas的draw***方法去绘制一些图像图形,绘制的坐标是从Canvas左上角开始计算的,如果想要把一个图像放到某个位置,直接drawBitmap传递图片左上角的坐标就行了。那drawText就不一样,如果你传递进去字符串,会发现文字的位置和你指定的不一样

文字计算是基于baseline来计算的,看下图: MacDown logo

我们在画文本时:

canvas.drawText("你好,对的", 0, 0, paint);

将只会看到基于baseline为y坐标的字母g的一小部分,那么如何正常画出文本了

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
//        paint = new Paint();
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);

        String content = "dangwen";
        Rect rect = new Rect();
        // 获取包裹文本最小矩形的宽高,坐标等信息
        paint.getTextBounds(content, 0, content.length(), rect);

        Log.e("rect", "left = " + rect.left + ", top = " + rect.top + ", right = " + rect.right + ", bottom = " + rect.bottom);
        Log.e("rect", "width = " + rect.width() + ", height" + rect.height());

//        canvas.drawText("dangwen", 0, rect.height() - rect.bottom, paint);
        canvas.drawText("dangwen", 0, 0, paint);
    }

如上段代码,我们只需要正确设置文本Y坐标就可以了