自定义view 之 canvas.drawText

[email protected]

自定义view 绘制字符，水平位置

        mPaint.setTextAlign(Paint.Align.CENTER);
        mPaint.setAntiAlias(true);
        mPaint.setColor(Color.RED);
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setTextSize(120);
        canvas.drawText("testbaseline",400,200,mPaint);
// 400,200 为用来描述 view 内容的位置 相对点， setTextAlign 来描述相对位置（文字和）
    

Screenshot_2019-11-19-14-52-17-489.png

蓝色线的交叉即为相对的点

自定义view 绘制字符，垂直方向

如开头的图片的.为字符的基线

        Paint.FontMetrics  fontMetrics=mPaint.getFontMetrics();
        Log.e("baseline","ascent: "+fontMetrics.ascent);
        Log.e("baseline","bottom "+fontMetrics.bottom);
        Log.e("baseline","top "+fontMetrics.top);
        Log.e("baseline","descent "+fontMetrics.descent);
        Log.e("baseline","leading "+fontMetrics.leading);

        E/baseline: ascent: -109.92
        E/baseline: bottom 31.08
        E/baseline: top -107.88
        E/baseline: descent 36.12
        E/baseline: leading 0.0

可以看到 leading 通常的值为0 top 的值为负数，这个需要注意

可以看出
基线到中线的距离=(Descent+Ascent)/2-Descent

推倒过程为，由于leading =0 ，所以 不考虑
基线到中线的距离+Descent=(Descent+Ascent)/2

基线到中线的距离=

由于文字的位置是基于baseline的，所以想让文字父容器的中间；
内容的中间线和父容器的中间重合；
canvas.drawText 为y 设置baseline =height/2+(Descent+Ascent)/2-Descent