目录
1.绘图
1.4 基础绘图事件
重写painEvent来绘图
1.4.1 painter
painter即一个画家
创建画家 QPainter painter(this) this 代表绘图设备
直线,圆,矩形,文字
直线:drawLine(起点,终点)
椭圆:drawEllipse(中心,水平轴半径,竖直轴半径)
//绘图事件
void Widget::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
//画线
painter.drawLine(QPoint(0,0),QPoint(100,100));
//画圆
painter.drawEllipse(QPoint(100,100),50,100);
}
矩形:drawRect(QRect)
文字:drawText(QRect,"QString")
//画矩形
//左上角坐标(20,10) 宽:60 高:50 的矩形
painter.drawRect(QRect(20,10,60,50));
//写字
//在指定矩形中写字
painter.drawText(QRect(10,200,100,100),"好好学习,天天向上");
1.4.2 QPen
画笔
创建画笔 QPen pen()
设置颜色pen.setColor()
设置宽度pen.setWidth()
设置风格pen.setStyle()
设置完之后需要画家拿起画笔 painter.setPen(pen)
其中风格在帮助文档可查,有如下几种
//设置画笔
QPen pen(QColor(255,0,0));
//设置画笔宽度
pen.setWidth(5);
//设置风格
pen.setStyle(Qt::DotLine);
//拿起画笔
painter.setPen(pen);
1.4.3 QBrush
画刷即填充区域
设置画刷:QBrush painter.setBrush()
设置画刷风格、颜色、等等
//画刷
QBrush brush(Qt::cyan);
//设置风格
brush.setStyle(Qt::Dense4Pattern);
//拿起画刷
painter.setBrush(brush);
1.5 高级绘图设置
设置抗锯齿(比较圆润)
设置画家位置
设置画家状态
画自己的资源图片
1.5.1 设置抗锯齿
painter.setRenderHit(QPainter)
参数如下
QPainter painter(this);
painter.drawEllipse(100,100,100,100);
//设置抗锯齿能力
painter.setRenderHint(QPainter::Antialiasing);
painter.drawEllipse(300,100,100,100);
1.5.2 设置画家位置
将画家的参照原点移动到某个位置
painter.translate(x,y);
移动前后创建两个相同的矩形
painter.drawRect(50,50,100,100);
//将画家的原点移动到某个位置(原来为左上角(0,0))
painter.translate(200,0);
painter.drawRect(50,50,100,100);
1.5.3 设置画家的状态
save(); 将画家此时的状态保存下来,参照原点位置、抗锯齿能力等等
restore() 恢复到上次保存时的状态
QPainter painter(this);
//保存画家此时的状态
painter.save();
painter.drawEllipse(100,100,100,100);
//设置抗锯齿能力
painter.setRenderHint(QPainter::Antialiasing);
painter.drawEllipse(300,100,100,100);
//恢复到上次保存的状态
painter.restore();
painter.drawEllipse(300,200,100,100);
如下,第一个和第三个没有抗锯齿能力,第二个有抗锯齿
1.5.4 画资源图片
1.画图: drawPixmap(x,y,QPixmap(图片路径))
2.链接按钮,点击按钮让图片移动
QPainter painter(this);
//画资源图片
painter.drawPixmap(0,0,QPixmap(":/images/Snipaste_2024-04-23_19-27-18.png"));
使用update() 来更新图片此时的位置
在头文件中加入全局变量posX 代表图片的x值
Widget::Widget(QWidget *parent)
: QWidget(parent)
, ui(new Ui::Widget)
{
ui->setupUi(this);
//点击移动按钮,让图片移动
posX = 0;
connect(ui->pushButton,&QPushButton::clicked,this,[=](){
posX+=20;
//手动调用绘图事件
update();
});
}
同时,当超出屏幕时让图片回到原点
QPainter painter(this);
//如果超出屏幕,强制变为0
if(posX > this->width)
{
posX = 0;
}
//画资源图片
painter.drawPixmap(posX,0,QPixmap(":/images/Snipaste_2024-04-23_19-27-18.png"));
2. 绘图设备
绘图设备时指继承QPainterDevic的子类。如
QPixmap、QBitmap、QImage、QPicture
- QPixmap:专门为图像在屏幕上的显示做了优化
- QBitmap:是QPixmap的一个子类,它的色深限定为1,可以使用QPixmap的 isQBitmap()函数类确定这个类是不是一个QBitmap类
- QImage:专门为图像的像素级访问做了优化
- QPicture:可以记录和重现QPainter的各条命令
2.1 QPixmap
可以创建一个画布 并用save保存在电脑中
QPixmap 做绘图设备,对不同平台做了显示的优化
构造函数
//QPixmap做绘图设备
QPixmap pix(300,300);
//设置在pix设备上画图
QPainter painter(&pix);
QPen pen(Qt::red);
pen.setWidth(3);
painter.setPen(pen);
painter.drawEllipse(150,150,100,100);
//保存
pix.save("D:\\code\\Qt\\my_practice_qt\\07_PaintDevice\\PaintDevice\\images\\pix.png");
默认为黑色背景
使用fill() 可以改变背景颜色
2.2 QImage
QImage做绘图设备 不同平台下显示效果一样,可以对像素的访问做了优化
构造函数
第三个参数 色位
具体操作和QPixmap一样
QImage image(300,300,QImage::Format_RGB32);
image.fill(Qt::white);
QPainter painter1(&image);
painter1.setPen(pen);
painter1.drawEllipse(150,150,100,100);
image.save("D:\\code\\Qt\\my_practice_qt\\07_PaintDevice\\PaintDevice\\images\\image.png");
对于像素点的访问
image.setPixel(x,y,QRgb) 对于某个位置的像素点进行修改
2.3 QPicture
记录和重现绘图指令,picture所保存的画图是不能被打开的
只能通过重绘指令才能查看
//QPicture 记录和重现绘图指令
QPicture pic;
QPainter painter3;
painter3.begin(&pic);
painter3.setPen(QPen(Qt::blue));
painter3.drawEllipse(0,0,100,100);
painter3.end();
pic.save("D:\\code\\Qt\\my_practice_qt\\07_PaintDevice\\PaintDevice\\images\\pic.png");
无法打开该文件(与后缀无关)
在绘图事件中重构绘图命令
//重现QPicture的命令
QPicture pic;
pic.load("D:\\code\\Qt\\my_practice_qt\\07_PaintDevice\\PaintDevice\\images\\pic.png");
painter.drawPicture(200,200,pic);