自定义控件详解(七):drawText()

比较基础的一个方法。即绘制文本

使用如下:

Paint paint = new Paint();   

paint.setColor(Color.RED);   // 红色字体
paint.setStyle(Paint.Style.FILL); // 类型
paint.setStrokeWidth(1);       // 画笔线条宽度
paint.setTextSize(60);         // 绘制文本大小

// 绘制内容
canvas.drawText("听着music睡 ' blogs" , 100 , 200 , paint);

效果;

  可以看下方法:

 这篇只讨论第三个方法。

 可以看到 4个参数,第二个、第三个参数 是float类型,实际上就是 绘制的文本的绘制参考坐标。注意这个坐标 不是文本的左上角的那个点,float y 代表 基线的Y位置。

 验证一下:

 绘制一条蓝色的基线,绘制一个文本。

        Paint paint = new Paint();
 
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.FILL);
        paint.setStrokeWidth(1);
        paint.setTextSize(60);

        int baseLine = 100 ;// 基线的Y坐标
        canvas.drawText("abcdefghi",30 , baseLine , paint);  // 绘制 (30,baseLine) 为参考点的文本
        paint.setColor(Color.BLUE);
        canvas.drawLine(30,baseLine ,300,baseLine,paint); // 绘制基线

 可以看到,绘制文本的参数(floatx , floaty) 指的是基线的左起点坐标而不是左上角。

扩展:

drawtext除了基线还有另外4条线,称为4格线。

分别是ascent,descent,top,bottom

  • ascent: 系统建议的,绘制单个字符时,字符应当的最高高度所在线
  • descent:系统建议的,绘制单个字符时,字符应当的最低高度所在线
  • top: 可绘制的最高高度所在线
  • bottom: 可绘制的最低高度所在线

怎么获取这4个线的y轴坐标呢,有一个类 FontMetrics

这些属性的值即 与基线的相对y轴距离(可能为负值)

示例:

        int baseLineY = 100 ;

        Paint.FontMetrics fm = paint.getFontMetrics();
        float ascent = baseLineY + fm.ascent ; // 制顶线
        float descent = baseLineY+fm.descent ; //制低线
        float top = baseLineY + fm.top ; // 最顶线
        float bottom = baseLineY + fm.bottom ; // 最低限

        // 基线
        paint.setColor(Color.RED);
        canvas.drawLine(baseLineX , baseLineY , 1000 , baseLineY , paint);

        // 制顶线
        paint.setColor(Color.BLUE);
        canvas.drawLine(baseLineX,ascent , 1000 , ascent , paint);

        // 制底线
        paint.setColor(Color.GREEN);
        canvas.drawLine(baseLineX,descent , 1000 , descent , paint);

        // 最顶线
        paint.setColor(Color.YELLOW);
        canvas.drawLine(baseLineX,top,1000,top  , paint);

        // 最底线
        paint.setColor(Color.MAGENTA);
        canvas.drawLine(baseLineX  , bottom  , 1000 , bottom ,paint);

        //写文字
        paint.setColor(Color.BLACK);
        canvas.drawText("听着music睡 ' blogs" ,baseLineX,baseLineY , paint);

可以看到:

黄色的最顶线top

蓝色的制顶线ascent

红色的基线baseline

绿色的制低线descent

粉色的最低限bottom

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏进击的君君的前端之路

CSS理解之margin

17520
来自专栏Android干货

安卓开发小效果--走马灯

285120
来自专栏Android先生

Android开发人员初识前端

<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更...

14330
来自专栏Java后端技术

CSS语法小记

    1.选择符(Selector):指明这组样式所要针对的对象。可以是一个XHTML标签,例如h1,img;也可以是定义了特定的id或者class的标签,如...

8410
来自专栏菜鸟计划

CSS基础语法(二) CSS的9种选择器

样式表的选择器 1.类选择器 根据HTML标签的class属性选择样式应用的属性  .类值{ … } 2.ID选择器 根据HTML标签的ID属性选择样式应用的元...

36330
来自专栏Android干货

自定义控件详解(四):Paint 画笔路径效果

18140
来自专栏吾爱乐享

php学习之html属性-表格(六)

44520
来自专栏林德熙的博客

win10 uwp 获得元素绝对坐标

有时候需要获得一个元素,相对窗口的坐标,在修改他的位置可以使用。 那么 UWP 如何获得元素坐标? 我提供了一个方法,可以获得元素的坐标。

12820
来自专栏Java帮帮-微信公众号-技术文章全总结

与Ajax同样重要的jQuery(1)

jQuery框架 jQuery 1.4 是企业主流版本,从jQuery1.6 开始引入大量新特性。最新版本 2.1.1,这里讲解以1.8.3为主(新版本主要是浏...

33360
来自专栏向治洪

react-native 之布局总结

前言 之前我们讲了很多react-native的基础控件,为了方便大家的理解,我们来对react-native的布局做一个总结,观看本节知识,你将看到。 宽度单...

79780

扫码关注云+社区

领取腾讯云代金券