找回密码
 立即注册
收起左侧

第13篇 Qt5之2D绘图(三)绘制文字

7
回复
3213
查看
[复制链接]
累计签到:826 天
连续签到:4 天
来源: 2017-3-29 00:43:04 显示全部楼层 |阅读模式
版权声明

该文章原创于Qt开源社区(www.qter.org),作者yafeilinux,转载请注明出处!


导语

Qt中除了绘制图形以外,还可以使用QPainter::darwText()函数来绘制文字,也可以使用QPainter::setFont()设置文字所使用的字体,使用QPainter::fontInfo()函数可以获取字体的信息,它返回QFontInfo类对象。在绘制文字时会默认使用抗锯齿。


环境:Windows 7 + Qt 5.8.0(包含QtCreator 4.2.1


目录

一、基本绘制
二、控制文字的位置
三、使用字体


正文


一、基本绘制


我们接着在上一节的项目上进行讲解,首先将paintEvent()函数更改如下:

void Widget::paintEvent(QPaintEvent *){   
      QPainter painter(this);   
      painter.drawText(100, 100,  "qter.org-yafeilinux");
}

这样就在(100, 100)的位置绘制了一个字符串。效果如下图所示。




二、控制文字的位置


1.      我们先到QPainter的帮助文档页面,然后查看drawText()函数的重载形式,找到:QPainter::drawText ( const QRectF &rectangle, int flags, const QString & text, QRectF * boundingRect = 0 ),如下图所示。




       它的第一个参数指定了绘制文字所在的矩形;第二个参数指定了文字在矩形中的对齐方式,它由Qt::AlignmentFlag枚举类型进行定义,不同对齐方式也可以使用“|”操作符同时使用,这里还可以使用Qt::TextFlag定义的其他一些标志,比如自动换行等;第三个参数就是所要绘制的文字,这里可以使用“\n”来实现换行;第四个参数一般不用设置。


2.下面来看一个例子。为了更明显地看到文字在指定矩形中的位置,我们绘制出这个矩形。将paintEvent()函数更改如下:


void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    //设置一个矩形
    QRectF rect(50, 50, 300, 200);
    //为了更直观地看到字体的位置,我们绘制出这个矩形
    painter.drawRect(rect);
    painter.setPen(QColor(Qt::red));
    //这里先让字体水平居中
    painter.drawText(rect, Qt::AlignHCenter, "yafeilinux");
}


       现在运行程序,效果如下图所示。




       可用的对齐方式如下图所示。



三、使用字体


为了绘制漂亮的文字,可以使用QFont类来设置文字字体。大家也可以先在帮助文档中查看该类的介绍。下面将最常用的一些设置进行演示。

       paintEvent()函数中继续添加如下代码:

QFont font("宋体", 15, QFont::Bold, true);
//设置下划线
font.setUnderline(true);
//设置上划线
font.setOverline(true);
//设置字母大小写
font.setCapitalization(QFont::SmallCaps);
//设置字符间的间距
font.setLetterSpacing(QFont::AbsoluteSpacing, 10);
//使用字体
painter.setFont(font);
painter.setPen(Qt::blue);
painter.drawText(120, 80, tr("yafeilinux"));
painter.translate(50, 50);
painter.rotate(90);
painter.drawText(0, 0, tr("helloqt"));

    这里创建了QFont字体对象,使用的构造函数为QFont::QFont ( const QString & family,int pointSize = -1, int weight = -1, bool italic = false ),第一个参数设置字体的family属性,这里使用的字体族为宋体,可以使用QFontDatabase类来获取所支持的所有字体;第二个参数是点大小,默认大小为12;第三个参数为weight属性,这里使用了粗体;最后一个属性设置是否使用斜体。然后我们又使用了其他几个函数来设置字体的格式,最后调用setFont()函数来使用该字体,并使用drawText()函数的另一种重载形式在点(120, 80)绘制了文字,需要注意的是setCapitalization()函数,其取值为:QFont::MixedCase默认;QFont::AllUppercase所有字母大写;QFont::AllLowercase所有字母小写;QFont::SmallCaps小写字母变为大写但不改变字体原始的大小;QFont::Capitalize首字母大写。后面又将坐标系统平移并旋转,然后再次绘制了文字。运行程序,效果如下图所示。




结语


    这一节最后的例子中使用了rotate()函数来旋转坐标系统,从而绘制出了纵向的文字。旋转会在后面的篇章中介绍到。

源码下载:






本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

累计签到:14 天
连续签到:1 天
2019-2-27 16:15:33 显示全部楼层
亚飞老师,这句:
//设置字母大小写
font.setCapitalization(QFont::SmallCaps);
这里如果如此设置后,我后面绘制的字母如果本身就是大写,那就会变得更大,这怎么解决呢?
回复 支持 反对

使用道具 举报

累计签到:826 天
连续签到:4 天
2019-2-27 21:57:35 显示全部楼层
staticnull 发表于 2019-2-27 16:15
亚飞老师,这句:
//设置字母大小写
font.setCapitalization(QFont::SmallCaps);

发个截图看看!
回复 支持 反对

使用道具 举报

累计签到:14 天
连续签到:1 天
2019-2-28 13:50:16 显示全部楼层
本帖最后由 staticnull 于 2019-2-28 13:53 编辑

发不出来?我晕。。。。。
回复 支持 反对

使用道具 举报

累计签到:826 天
连续签到:4 天
2019-2-28 18:53:52 显示全部楼层
staticnull 发表于 2019-2-28 13:50
发不出来?我晕。。。。。

点击回复,点击高级模式,就可以上传图片了。
回复 支持 反对

使用道具 举报

累计签到:14 天
连续签到:1 天
2019-2-28 21:34:14 显示全部楼层
yafeilinux 发表于 2019-2-28 18:53
点击回复,点击高级模式,就可以上传图片了。

就是这样,原本就是大写字母就会比其他的大一些!谢谢老师

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

点评

使用 QFont::AllUppercase 就行了。  详情 回复 发表于 2019-3-18 11:10
回复 支持 反对

使用道具 举报

累计签到:826 天
连续签到:4 天
2019-3-18 11:10:32 显示全部楼层
staticnull 发表于 2019-2-28 21:34
就是这样,原本就是大写字母就会比其他的大一些!谢谢老师

使用 QFont::AllUppercase 就行了。
回复 支持 反对

使用道具 举报

累计签到:14 天
连续签到:1 天
2019-3-21 23:20:49 显示全部楼层
yafeilinux 发表于 2019-3-18 11:10
使用 QFont::AllUppercase 就行了。

get,谢谢亚非老师
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册