[Qt教程] 第13篇 2D绘图(三)绘制文字

[Qt教程] 第13篇
2D绘图(三)绘制文字

楼主

 发表于 2013-4-25 23:04:46 | 查看:
720| 回复: 0


绘制文字

版权声明


该文章原创于Qter开源社区,作者yafeilinux,转载请注明出处!

导语


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

环境:Windows Xp + Qt 4.8.4+QtCreator 2.6.2

目录


一、基本绘制

二、控制文字的位置

三、使用字体

正文


一、基本绘制

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

void MainWindow::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 MainWindow::paintEvent(QPaintEvent *)

{

    QPainter painter(this);

    //设置一个矩形

    QRectF rect(20, 20, 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::green);

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)绘制了文字。后面又将坐标系统平移并旋转,然后再次绘制了文字。运行程序,效果如下图所示。

结语


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



涉及到的源码下载:  painter_1.zip (2.34
KB, 下载次数: 6) 
时间: 2024-10-30 11:45:52

[Qt教程] 第13篇 2D绘图(三)绘制文字的相关文章

[Qt教程] 第19篇 2D绘图(九)图形视图框架(上)

[Qt教程] 第19篇 2D绘图(九)图形视图框架(上) 楼主  发表于 2013-5-4 15:26:20 | 查看: 1798| 回复: 26 图形视图框架(上) 版权声明 导语 在前面讲的基本绘图中,我们可以自己绘制各种图形,并且控制它们.但是,如果需要同时绘制很多个相同或不同的图形,并且要控制它们的移动,检测它们的碰撞和叠加:或者我们想让自己绘制的图形可以拖动位置,进行缩放和旋转等操作.实现这些功能,要是还使用以前的方法,那么会十分困难.解决这些问题,可以使用Qt提供的图形视图框架.  

[Qt教程] 第20篇 2D绘图(十)图形视图框架(下)

[Qt教程] 第20篇 2D绘图(十)图形视图框架(下) 楼主  发表于 2013-5-4 15:43:02 | 查看: 861| 回复: 0 图形视图框架(下) 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 环境:Windows Xp + Qt 4.8.4+QtCreator 2.6.2 目录 三.场景(QGraphicsScene) (一)场景层 (二)索引算法 (三)边界矩形 (四)图形项查找 (五)事件处理和传播 (

[Qt教程] 第12篇 2D绘图(二)渐变填充

[Qt教程] 第12篇 2D绘图(二)渐变填充 楼主  发表于 2013-4-23 17:59:31 | 查看: 689| 回复: 1 渐变填充 版权声明 该文章原创于Qter开源社区,作者yafeilinux,转载请注明出处! 导语 在前一节提到了在画刷中可以使用渐变填充.QGradient类就是用来和QBrush一起指定渐变填充的.Qt现在支持三种类型的渐变填充: 线性渐变(linear gradient)在开始点和结束点之间插入颜色: 辐射渐变(radial gradient)在焦点和环绕

[Qt教程] 第11篇 2D绘图(一)绘制简单图形

[Qt教程] 第11篇 2D绘图(一)绘制简单图形 楼主  发表于 2013-4-23 12:52:35 | 查看: 1398| 回复: 5 绘制简单图形 版权声明 该文章原创于Qter开源社区,作者yafeilinux,转载请注明出处! 导语 Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕和绘图设备上进行绘制,它主要基于QPainter.QPaintDevice和QPaintEngine这三个类.其中QPainter用来执行绘图操作:QPaintDevice提供绘图设备,它是一个二

[Qt教程] 第16篇 2D绘图(六)坐标系统

[Qt教程] 第16篇 2D绘图(六)坐标系统 楼主  发表于 2013-5-2 20:08:12 | 查看: 738| 回复: 0 坐标系统 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 前面一节我们讲解了图片的显示,其中很多地方都用到了坐标的变化.这一节我们将讲解Qt的坐标系统,分为两部分来讲解:第一部分主要讲解前面一节的那几个函数,它们分别是translate()平移变换.scale()比例变换.rotate()旋转变

[Qt教程] 第15篇 2D绘图(五)绘制图片

[Qt教程] 第15篇 2D绘图(五)绘制图片 楼主  发表于 2013-5-2 17:59:00 | 查看: 886| 回复: 3 绘制图片 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 Qt提供了四个类来处理图像数据:QImage.QPixmap.QBitmap和QPicture,它们也都是常用的绘图设备.其中QImage主要用来进行I/O处理,它对I/O处理操作进行了优化,而且也可以用来直接访问和操作像素:QPixma

[Qt教程] 第17篇 2D绘图(七)涂鸦板

[Qt教程] 第17篇 2D绘图(七)涂鸦板 楼主  发表于 2013-5-2 21:37:41 | 查看: 1255| 回复: 16 涂鸦板 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语        通过前面几节的学习,大家应该已经对Qt中2D绘图有了一定的认识,这一节我们将应用前面讲到的内容,编写一个简单的涂鸦板程序,这一节只是实现最基本的鼠标画线功能. 环境:Windows Xp + Qt 4.8.4+QtCreat

[Qt教程] 第18篇 2D绘图(八)双缓冲绘图

[Qt教程] 第18篇 2D绘图(八)双缓冲绘图 楼主  发表于 2013-5-2 22:07:23 | 查看: 789| 回复: 1 双缓冲绘图 版权声明 该文章原创于Qter开源社区(www.qter.org),作者yafeilinux,转载请注明出处! 导语 在前面一节中,讲述了如何实现简单的涂鸦板,这一次我们将实现在涂鸦板上绘制图形,这里以矩形为例进行讲解.在后面还会提出双缓冲绘图的概念. 环境:Windows Xp + Qt 4.8.4+QtCreator 2.6.2 目录 一.绘制矩

[Qt教程] 第23篇 数据库(三)利用QSqlQuery类执行SQL语句

[Qt教程] 第23篇 数据库(三)利用QSqlQuery类执行SQL语句 楼主  发表于 2013-5-15 22:39:29 | 查看: 813| 回复: 0 利用QSqlQuery类执行SQL语句 版权声明 该文章原创于作者yafeilinux,转载请注明出处! 导语        SQL即结构化查询语言,是关系数据库的标准语言.前面两节中已经在Qt里利用QSqlQuery类执行了SQL语句,这一节我们将详细讲解该类的使用.需要说明,因为我们重在讲解Qt中的数据库使用,而非专业的讲解数据库