[Qt2D绘图]-04绘制文字&&绘制路径

注：学习自《Qt Creator 快速入门》第三版。

 

文档中的示例参考

Qt Example推荐：Painter Paths Example和Vector Deformation

 

大纲：

    绘制文字

    绘制路径

        path的填充规则

        QPainter中与path有关的常用函数

 

本篇涉及的Qt类： QPainter QFont QPainterPath

 

绘制文字 (QPainter::darwText())

除了绘制图形以外，还可以使用QPainter::darwText()函数来绘制文字，

还可以使用QPainter::setFont()设置文字所使用的字体，使用QPainter::fontInfo()函数可以获取字体的信息,它返回QFontInfo类对象。

绘制文字时会默认使用抗锯齿。

 

drawText()函数有很多重载。这里演示一个：

void QPainter::drawText(const QRectF &rectangle, int flags, const QString &text, QRectF *boundingRect = nullptr)

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

如果绘制的文字和它的布局不用经常改动，那么也可以使用drawStaticText。

 painter.drawStaticText(QPoint(120, 120),
                         QStaticText(QString("hello use drawStaticText")));

 

绘制路径 (QPainter::drawPath(path))

如果要绘制一个复杂的图形，尤其是要重复绘制复杂的图形，可以使用QPainterPath类,并使用QPainter: :drawPath()进行绘制。

QPainterPath类为绘制操作提供了一个容器,可以用来创建图形并且重复使用。

一个绘图路径就是由多个矩形、椭圆、线条或者曲线等组成的对象,一个路径可以是封闭的，如矩形和椭圆;也可以是非封闭的，如线条和曲线。

 

void Widget::paintEvent(QPaintEvent *event) {
QPainter painter(this);
  painter.setRenderHint(QPainter::Antialiasing);


  QPainterPath path;
  // 创建一个QPainterPath对象后就会以坐标原点为当前点进行绘制，
  // 可以使用moveTo()函数改变当前点，移动当前点到点(50，250)
  path.moveTo(50, 250);
  // 从当前点即(50，250)绘制一条直线到点(50，230).完成后当前点更改为(50，230)
  path.lineTo(50, 230);
  //从当前点和点(120，60)之间绘制一条三次贝塞尔曲线
  path.cubicTo(QPointF(105, 40), QPointF(115, 80), QPointF(120, 60));

  path.lineTo(130, 130);
  //向路径中添加一个椭圆
  path.addEllipse(QPointF(130.0, 130.0), 30, 30);
  // 绘制path
  painter.drawPath(path);

  //平移坐标系统后再次绘制路径
  path.translate(200, 0);
  painter.setPen(Qt::darkBlue);
  painter.drawPath(path);
}

 

关于path路径"制作"，主要是QpainterPath类的使用.

 

常用的方法:

可以使用lineTo()、arcTo()、cubicTo( )和quadTo()等函数将直线或者曲线添加到路径中;

cubicTo (const QPointF &cl, const QPointF &c2, const QPointF &endPoint)函数可以在当前点和endPoint点之间添加一个3次贝塞尔曲线;

quadTo()函数可以绘制一个二次贝塞尔曲线;

可以使用addEllipse()、addPath()、addRect()、addRegion()、addText()和addPolygon()来向路径中添加一些图形或者文字。

它们都从当前点开始进行绘制,绘制完成后以结束点作为新的当前点。这些图形都是由一组直线或者曲线组成.

currentPosition()函数获取当前点;

使用moveTo()函数改变当前点;

当组建好路径后可以使用drawPath()函数来绘制路径;

可以使用translate()函数将路径平移。

这也是QPainterPath的主要作用。

 

注：关于贝塞尔曲线来看一个书上的图：

 

path的填充规则 (Qt::FillRule)

path的填充有两个填充规则:

Qt::OddEvenFill(默认)和Qt::WindingFill。

QPainter painter(this);
  QPainterPath path;
// 此path没有设置fillrule。则使用默认的Qt::OddEvenFill
  path.addEllipse(10,50,100,100);
  path.addRect(50,100,100,100);
painter.setBrush(Qt::cyan);
  painter.drawPath(path);
  

//此path手动设置填充规则
  painter.translate(180,0);
  path.setFillRule(Qt::WindingFill);
  painter.drawPath(path);

运行结果：

 

FillRule的理论部分：

Qt::OddEvenFill使用的是奇偶填充规则.

具体来说就是:如果要判断一个点是否在图形中,那么可以从该点向图形外引一条水平线，如果该水平线与图形的交点的个数为奇

数,那么该点就在图形中。这个规则是默认值;

Qt::WindingFill使用的是非零弯曲规则.

具体来说就是:如果要判断一个点是否在图形中,那么可以从该点向图形外引一条水平线,

如果该水平线与图形的边线相交,这个边线是顺时针绘制的，就记为1;是逆时针绘制的就记为一1。然后将所有数值相加，如果结果不为0,那么该点就在图形中。

 

图10- 19是这两种规则的示意图,对于Qt::OddEvenFill规则,第一个交点记为1,第二个交点记为2;

对于Qt::WindingFill规则，因为椭圆和矩形都是以顺时针进行绘制的，所以各个交点对应的边都使用1来代表。

 

关于QPainter 的与path有关的常用函数：

QPainter::fillPath()来填一个路径;
QPainter::strokePath()函数来绘制路径的轮廓;
QPainterPath::elementAt()来获取路径中的一个元素;
QPainterPath::elementCount()获取路径中元素的个数;
QPainterPath::contains()函数来判断一个点是否在路径中;
QPainterPath::toFillPolygon()函数将路径转换为一个多边形。
...

 

本篇笔记的源代码

代码会整理到GitHub，如果没有请等待：https://github.com/tudouloveloli/QtExampleCode