Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

Gray-Ice

个人博客兼个人网站

先来看看效果:
图片正在加载中...
这是我在主窗口上绘制的一个图形,其中顶部和左边的灰线可以随着主窗口的重绘而跟着变化。
先来看看代码吧:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// widget.h
class Widget : public QWidget
{
Q_OBJECT

public:
Widget(QWidget *parent = nullptr);
~Widget();

private:
Ui::Widget *ui;
protected:
// 绘图事件
void paintEvent(QPaintEvent *event);
};

// widget.cpp
#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
}

Widget::~Widget()
{
delete ui;
}

void Widget::paintEvent(QPaintEvent *event)
{
// 创建画家(画画全靠它)
QPainter p;
// 创建画笔(其实就是拥有各种属性的工具,如颜色,刷子,样式等)
QPen pen;
// 开始绘画。参数是绘画设备。这里由于我们要直接在窗口上绘制,所以是this。看不懂没关系,待会儿看一下我保存图片的代码就明白这个参数是什么了。begin()会开始绘画,如果开始成功返回true,其他情况会返回false
p.begin(this);
// 设置画笔的粗细
pen.setWidth(10);
// 设置画笔的颜色,这里设置的是一个RGB颜色。当然你也可以使用RGBA。详情得看QColor的帮助文档
pen.setColor(QColor(200, 200, 200));
// 设置画笔的样式。这个样式会让画出来的线隔一定长度有一个断裂的效果
pen.setStyle(Qt::DashLine);
// 给画家选中画笔。因为画笔我们设置了各种各样的属性,所以当画家使用该画笔时,画出的东西就会具有画笔上的属性
p.setPen(pen);
// 画两条线。第一个是参数是x轴,第二个是y轴。第三个也是x轴,第四个是y轴。因为两点构成一条直线,所以这是两个点的坐标。width()返回当前绘图设备的宽度。
p.drawLine(10, 10, width(), 10);
p.drawLine(10, 10, 10, height()); // height返回当前屏幕的高度
p.drawRect(100, 100, 300, 60); // 画个矩形
p.setBrush(Qt::Dense1Pattern); // 设置刷子。不同的刷子有不同的特效。
// 画一个圆。第一个参数是其圆心的坐标。第二个和第三个参数分别是圆的x方向和y方向距离圆心的长度。
p.drawEllipse(QPoint(150, 130), 30, 30);
// 结束绘画
p.end();
}

这里我主要用到了paintEvent事件。它在控件被重绘时触发。千万不要在这里面调用重绘函数,因为这将导致其一直重绘。
这次我的注释很全,所以直接看注释即可。
然后就是绘图设备是什么东西了,在我眼里,绘图设备就是绘图的目标,因为解释起来太麻烦了,所以直接看代码吧,看完就明白了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
// 设置画布大小
QPixmap xmap(200, 200);
// 用白色填充画布
xmap.fill(Qt::white);
// 创建画家
QPainter p;
// 开始绘画。绘图设备为QPixmap类型的变量xmap
p.begin(&xmap);
// 创建画笔
QPen pen;
// 自定义画笔
pen.setWidth(10);
// 使用画笔
p.setPen(pen);
// 画线
p.drawLine(10, 20, 30, 40);
// 结束绘画
p.end();
// 保存文件
xmap.save("./new.jpg");
}

我在构造函数里添加了一段代码,其功能是绘制一个图像并保存在统计目录下的名为new.jpg的文件中。
这是画出来的图像:
图片正在加载...
根据以上代码我们可以得知,”绘图设备”就是”画在哪里”的意思。

本篇完。

评论



愿火焰指引你