06自定义View之文字绘制

Posted 清风百草

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了06自定义View之文字绘制相关的知识,希望对你有一定的参考价值。

(1)android绘制文字
(2)文字绘制之认知baseline
(3)文字绘制之测量
(4)文字绘制之渐变绘制
(5)画布裁剪
(6)属性动画
(7)过度绘制

【06】自定义View之文字绘制

1.自定义View

(1)extends View

(2)extends ViewGroup

2.文字绘制

(1)绘制

  • extends AppCompatTextView
  • onMeasure():确定控件显示大小
  • onLayout():确定控件摆放位置
  • onDraw():显示什么

(2)画布:canvas
决定绘制什么形状

(3)画笔:paint
用来设置绘制风格

(4)绘制文字重中之重,它是以基准线为中心的。

2.1绘制文字

    /**
     * Draw the text, with origin at (x,y), using the specified paint. The origin is interpreted
     * based on the Align setting in the paint.
     *
     * @param text The text to be drawn
     * //x:表示轴起点
     * @param x The x-coordinate of the origin of the text being drawn
     * //y:表示baseline的值
     * @param y The y-coordinate of the baseline of the text being drawn
     * @param paint The paint used for the text (e.g. color, size, style)
     */
    public void drawText(@NonNull String text, float x, float y, @NonNull Paint paint) 
        super.drawText(text, x, y, paint);
    

(1)baseline是什么

  • 红色的线就是baseline,就是说大部分的文字都以这根线为基准对齐的线。
  • baseline,就是无论多少个文字,都能在水平线上确保文字基于这条线对齐
  • 可以超出基准线,文字往上往下都可以

2.1.1文字测量

Paint.FontMetrics

/**
     * Class that describes the various metrics for a font at a given text size.
     * Remember, Y values increase going down, so those values will be positive,
     * and values that measure distances going up will be negative. This class
     * is returned by getFontMetrics().
     */
    public static class FontMetrics 
        /**
        top:表示从baseline基准线到文字最顶端的尺寸
         * The maximum distance above the baseline for the tallest glyph in
         * the font at a given text size.
         */
        public float   top;
        /**
         * The recommended distance above the baseline for singled spaced text.
         */
        public float   ascent;
        /**
         * The recommended distance below the baseline for singled spaced text.
         */
        public float   descent;
        /**
         * The maximum distance below the baseline for the lowest glyph in
         * the font at a given text size.
         */
        public float   bottom;
        /**
         * The recommended additional space to add between lines of text.
         */
        public float   leading;
    

top:表示从baseline基准线到文字最顶端的尺寸
bottom:表示从baseline基准线到文字最底端的尺寸
ascent:表示从baseline到大部分文字最顶端的尺寸。
descent:表示从baseline到大部分文字最底端的尺寸。

top/bottom:无论什么文字,不会超出上界下界。
ascent/descent:正常文字的上界与下界。

文字的高度= top+bottom

如果基准线baseline为0,

top的值往上走,Android值为负(-)
bottom的值往下走,Android值为正(+)

计算文字实际的高度应该是什么样子呢?

  • 文字最大的高度=bottom - top 。
  • 文字正常的高度=descent - ascent。

3.文字颜色渐变绘制

3.1屏幕显示与Canvas的关系

(1)屏幕画布是有很多层叠加到一起的。

(2)如何判断绘制的内容处在同一层级
一层
canvas.save();
…这里边儿的内容处在同一层级
canvas.restore();

一层
canvas.save();
…这里边儿的内容处在同一层级
canvas.restore();

    /**
     * 1.文字画到屏幕中心
     * (1)如何分层
     * canvas.save();
     * canvas.restore();
     * 处在以上代码中的内容,可以理解为它们处在同一个层次
     * 
     * @param canvas
     */
    private void drawCenterText(final Canvas canvas)
        canvas.save();
        Paint paint = new Paint();
        //单位是像素
        paint.setTextSize(80);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.RED);
        paint.setAntiAlias(true);

        /**
         *1.文字绘制在view的中心
         * (1)textAlign只能设置水平方向的,因此该需求不能使用这种方法
         * (2)需要计算文字的高度
         * (3)Paint.FontMetrics是用于文字测量的
         * (4)文字的正常高度:fontMetrics.descent - fontMetrics.ascent
         */
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();

        //确保居中
        //baseline =getHeight()/2+(fontMetrics.descent - fontMetrics.ascent)/2 - fontMetrics.descent;
        //划简的写法
        float baseline = getHeight()/2-(fontMetrics.descent + fontMetrics.ascent)/2;

        //x轴的居中
        paint.setTextAlign(Paint.Align.LEFT);
        float width = paint.measureText(mText);
        float x = getWidth()/2 - width/2;
        canvas.drawText(mText,x,baseline,paint);
        canvas.restore();
    

3.2绘制渐变

(1)文字本身是没办法只绘制一半的
(2)通过从左往右一点一点的裁剪。

3.2.1Canvas画布的剪裁

(1)clipRect函数是android.graphics.Canvas类下一个用于对画布进行矩形裁剪的方法。
(2)它裁剪了我们想要的绘制区域 , 有点类似ps里面的遮罩效果

    /**
     * 1.文字画到屏幕中心
     * (1)如何分层
     * canvas.save();
     * canvas.restore();
     * 处在以上代码中的内容,可以理解为它们处在同一个层次
     *
     * @param canvas
     */
    private void drawCenterText1(final Canvas canvas)
        canvas.save();
        Paint paint = new Paint();
        //单位是像素
        paint.setTextSize(80);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.BLACK);
        paint.setAntiAlias(true);

        /**
         *1.文字绘制在view的中心
         * (1)textAlign只能设置水平方向的,因此该需求不能使用这种方法
         * (2)需要计算文字的高度
         * (3)Paint.FontMetrics是用于文字测量的
         * (4)文字的正常高度:fontMetrics.descent - fontMetrics.ascent
         * 2.绘制渐变
         * (1)裁剪
         */
        Paint.FontMetrics fontMetrics = paint.getFontMetrics();

        //确保居中
        //baseline =getHeight()/2+(fontMetrics.descent - fontMetrics.ascent)/2 - fontMetrics.descent;
        //划简的写法
        float baseline = getHeight()/2-(fontMetrics.descent + fontMetrics.ascent)/2;

        //x轴的居中
        paint.setTextAlign(Paint.Align.LEFT);
        float width = paint.measureText(mText);
        float left = getWidth()/2 - width/2;

        canvas.drawText(mText,left,baseline,paint);
        canvas.restore();
    
/**
     * 通过裁剪绘制遮罩层
     * @param canvas
     */
    private void drawCenterText2(final Canvas canvas)
        canvas.save();
        Paint paint = new Paint();
        paint.setTextSize(80);
        paint.setStyle(Paint.Style.FILL);
        paint.setColor(Color.RED);
        paint.setAntiAlias(true);

        Paint.FontMetrics fontMetrics = paint.getFontMetrics();

        //确保居中
        //baseline =getHeight()/2+(fontMetrics.descent - fontMetrics.ascent)/2 - fontMetrics.descent;
        //划简的写法
        float baseline = getHeight()/2-(fontMetrics.descent + fontMetrics.ascent)/2;

        //x轴的居中
        paint.setTextAlign(Paint.Align.LEFT);
        float width = paint.measureText(mText);
        float left = getWidth()/2 - width/2;
        //裁剪的右边为
        float right = left + width*percent;

        /**
         * 裁剪:右边应该裁剪多少呢?
         *
         */
        Rect rect = new Rect((int)left,0,(int)right,getHeight());
        canvas.clipRect(rect);

        canvas.drawText(mText,left,baseline,paint);
        canvas.restore();
    
 private SimpleColorChangeTextView mView1;

    @Override
    protected void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_jrtt_main);
        mView1 = findViewById(R.id.tv_color_change_view);

        //播放属性动画
        Handler handler = new Handler();
        handler.postDelayed(new Runnable() 
            @Override
            public void run() 
                onStartLeft(null);
            
        ,1000);
    

    /**
     * 属性动画
     * @param view
     */
    public void onStartLeft(View view)
        //属性动画,通过属性动画的方式改变自定义View中percent的值,是通过反射改变percent属性的值。
        ObjectAnimator.ofFloat(mView1,"percent",0,1).setDuration(2000).start();
    

3.3补充点

  • invalidate()方法调用时,会导致onDraw()方法重复调用

  • 在onDraw()中创建对象会导致GC,会导致内存抖动,最终导致卡顿,甚至崩溃。

  • 过度绘制

(1)同一个像素点,绘制了多次2次
真彩色:没有过度绘制
蓝色:过度绘制1次
绿色:过度绘制2次
粉色:过度绘制3次
红色:过度绘制4次或更多次

5.打赏鼓励

感谢您的细心阅读,您的鼓励是我写作的不竭动力!!!

5.1微信打赏

5.2支付宝打赏

以上是关于06自定义View之文字绘制的主要内容,如果未能解决你的问题,请参考以下文章

06自定义View之文字绘制

06自定义View之文字绘制

Flutter自定义View之——价格选择器|双向滑动|手势处理

Flutter自定义View之——价格选择器|双向滑动|手势处理

Flutter自定义View之——价格选择器|双向滑动|手势处理

Android自定义View学习五---图片文本绘制