第70课 文本绘制技巧

Posted 2020-08-26

1. QPainter拥有绘制文本的能力

（1）drawText（拥有多个重载形式）

（2）常见调用方式

　　①p.drawText(10,10, "Santa Claus");  //在坐标(10,10)处绘制文本

　　②p.drawText(0,0,100,30, Qt::AlignCenter, "Santa Claus"); //在矩形范围内并以居中对齐的方式绘制文本。

2. 绘制参数

（1）字体（QFont）、颜色（QColor）：控制文本大小、风格、颜色等

（2）坐标（QPoint）、角度（rotate）

　　①文本绘制的位置（对齐该坐标）

　　②以绘制坐标为圆心顺时针旋转

 

【编程实验】文本绘制初探

//main.cpp

#include "Widget.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Widget w;
    w.show();

    return a.exec();
}

View Code

//Widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>

class Widget : public QWidget
{
    Q_OBJECT
protected:
    void paintEvent(QPaintEvent *);
public:
    Widget(QWidget *parent = 0);
    ~Widget();
};

#endif // WIDGET_H

View Code

//Widget.cpp

#include "Widget.h"
#include <QPainter>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
}

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);

    painter.save(); //保存绘图环境

    painter.setPen(Qt::black);
    painter.setFont(QFont("Arial", 16));
    painter.rotate(0);
    painter.drawText(30, 40, "Santa Claus");

    painter.setPen(Qt::black);
    painter.setFont(QFont("Comic Sans MS", 20));
    painter.rotate(20);
    painter.drawText(30, 40, "Santa Claus");

    painter.restore();  //恢复绘图环境

    painter.drawText(130, 140, "Santa Claus");
}

Widget::~Widget()
{

}

3. 动态文本绘制

（1）解决方案

　　①在主窗口中绘制文本（QWidget）

　　②将文本中心绘制于窗口中心（width()/2, height()/2）

　　③动画效果通过连续控制字体参数完成（QFont）

　　④通过计时器强制更新文本绘制（QTimer）

（2）利用QFontMetrics获取字符串中指定字体的宽度和高度

/*指定字体*/
QFontMetrics metrics(font);

int w = metrics.width(text); //获取指定字符串的宽度
int h = metrics.height();    //获取指定字体的字符高度。

（3）坐标计算

 

【编程实验】动态文本绘制

//main.cpp

//Widget.h

//Widget.cpp

4. 小结

（1）QPainter能够根据需要任意绘制文本

（2）QPainter可以自定义文本颜色、位置、字体等参数

（3）QPainter绘制文本时可以通过参数控制实现动画效果。

（4）QPainter能够将文本绘制于图片（图片水印）