美文网首页
Android 自定义View学习(三)——Paint 绘制文字

Android 自定义View学习(三)——Paint 绘制文字

作者: Yue_Q | 来源:发表于2018-10-25 16:33 被阅读0次

    参考: Paint 绘制文字属性

    1. 实现字体垂直居中

    (1)x 轴居中:

    x轴居中.png
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //拿到字符串的宽度
        float stringWidth = mPaint.measureText(text);
        float x =(getWidth()-stringWidth)/2;
        canvas.drawText(text, x ,getHeight()/2 ,mPaint);
    }
    

    利用measureText(String text)这个方法,很容易拿到要绘制文字的宽度,再根据(getWidth()-stringWidth)/2简单计算,就可以得到在X轴起始绘制坐标

    (2)y 轴居中:

    image.png

    想要在Y轴居中,就要确定出绘制文字baseline时的所在Y轴的坐标。

    在Android中,和文字高度相关的信息都存在FontMetrics对象中。
    确定 Y轴 中心:

    y轴位置确定图.png

    由于文字绘制是从baseline开始,所以想要文字的正中心和DrawTextView的中心重合,baseline就不能和getHeight()/2重合,而且baseline要在getHeight()/2下方。
    但要在下方多少?就是2号线和3号线之间的距离。

    |ascent|=descent+ 2 * ( 2号线和3号线之间的距离 )

     @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
    //        文字的x轴位置
            float stringWidth = paint.measureText(text);
            float x =(getWidth()-stringWidth)/2;
            //文字的y轴坐标
            Paint.FontMetrics fontMetrics = paint.getFontMetrics();
            float y = getHeight() / 2 + (Math.abs(fontMetrics.ascent) - fontMetrics.descent) / 2;
            canvas.drawText(text, x ,y ,paint);
        }
    

    2. 其他方法

    2.1 setTextAlign(Align align) 设置对齐方式

    1. Paint.Align.LEFT 左对齐
    2. Paint.Align.CENTER 中心对齐,绘制从
    3. Paint.Align.RIGHT 右对齐

    这个方法影响的是两端的绘制起始。LEFT就是从左端开始,所以使用这三个属性时,在drawText(test,x,y,paint);要注意x坐标,否则,绘制会出现错乱
    LEFT对应0,CENTER对应getWidth()/2, RIGHT对应getWidth()

    2.2 setStyle() 设置画笔样式

    • Paint.Style.FILL 只绘制图形内容
    • Paint.Style.STROKE 只绘制图形轮廓(描边)
    • Paint.Style.FILL_AND_STROKE 既绘制轮廓也绘制内容
      Paint.Style.STROKE.png

    2.3 setFlags(int flags) 设置画笔的flag

    • ANTI_ALIAS_FLAG 抗锯齿
    • DITHER_FLAG 防抖动

    2.4 PathEffect setPathEffect(PathEffect effect) 设置路径效果

    7种路径效果.png
    需要注意的是,绘制路径时,pathPaint.setStyle(Paint.Style.STROKE)画笔的风格要空心,否则,后果画出的不是线,而是一个不规则的区域。

    这7种路径效果,暂时还不能区分,先暂时知道有这么7种效果,等到实现具体需求了再深入了解

    • CornerPathEffect 拐角处变圆滑
    • DashPathEffect 可以用来绘制虚线,用一个数组来设置各个点之间的间隔,phase控制绘制时数组的偏移量
    • PathDashPathEffectDashPathEffect类似 ,可以设置显示的点的图形,例如圆形的点
    • DisCreatePathEffect 线段上会有许多杂点
    • ComposePathEffect 组合两个PathEffect,将两个组合成一个效果

    3 其他

    剩下的方法,试一下就晓得效果了

    • setTextScaleX(float f) 设置缩放,0f到1f为缩小,大于1f为放大
    • setUnderlineText(booelan b) 设置下划线
    • setStrikeThruText (boolean strikeThruText) 设置文本删除线
    • setTextSize(float f) 设置文字字体大小
    • getFontSpacing()得到行间距
    • descent()得到descent的值
    • ascent() 得到asccent的值
    • getLetterSpacing() 字母间距
      关于字体的常用的方法差不多就这些了。漏掉的,用到了再补充。

    相关文章

      网友评论

          本文标题:Android 自定义View学习(三)——Paint 绘制文字

          本文链接:https://www.haomeiwen.com/subject/rxlctqtx.html