• 文本基础语法来自于文章


第一步:

  • 创建一个基于QWidget的窗体



第二步:

  • 重写paintEvent()函数
  • 视图和窗口会随着窗体的变化而自动适应变化

Qt:79---Demo(QPainter绘图:视口和窗口)_视口和窗口Qt:79---Demo(QPainter绘图:视口和窗口)_i++_02

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

int W=width(); //取窗体的宽
int H=height();//去窗体的高
int side=qMin(W,H); //取长和宽的最小值

//先绘制一个矩形
QRect rect((W-side)/2,(H-side)/2,side,side);
painter.drawRect(rect);

painter.setViewport(rect); //设置此次QPainter的区域,为一个正方形
painter.setWindow(-100,-100,200,200);//设置窗口大小,原点在中心,边长为200
painter.setRenderHint(QPainter::Antialiasing);

//设置画笔
QPen pen;
pen.setWidth(1);
pen.setColor(Qt::red);
pen.setStyle(Qt::SolidLine);
painter.setPen(pen);

//每个椭圆的圆心在X轴的(50,0),半径为50
for(int i=0;i<36;i++)
{
painter.drawEllipse(QPoint(50,0),50,50);//画椭圆
painter.rotate(10); //画一次,旋转10度
}
}



第三步:

  • 对上面的程序做修改,增加渐变填充和叠加效果的设置
  • setCompositionMode函数:​设置组合模式,即后面绘制的图与前面绘制的图叠加模式,参数是一个QPainter::CompositionMode枚举类型(类型很多,有40多种,详情见QT帮助文档)

Qt:79---Demo(QPainter绘图:视口和窗口)_ide_03Qt:79---Demo(QPainter绘图:视口和窗口)_视口和窗口_04Qt:79---Demo(QPainter绘图:视口和窗口)_窗口大小_05

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

int W=width(); //取窗体的宽
int H=height();//去窗体的高
int side=qMin(W,H); //取长和宽的最小值

//先绘制一个矩形
QRect rect((W-side)/2,(H-side)/2,side,side);
painter.drawRect(rect);

painter.setViewport(rect); //设置此次QPainter的区域,为一个正方形
painter.setWindow(-100,-100,200,200);//设置窗口大小,原点在中心,边长为200
painter.setRenderHint(QPainter::Antialiasing);

//设置画笔
QPen pen;
pen.setWidth(1);
pen.setColor(Qt::red);
pen.setStyle(Qt::SolidLine);
painter.setPen(pen);

//线性渐变
QLinearGradient linearGrad(0,0,100,0); //从左到右
linearGrad.setColorAt(0,Qt::yellow); //起点颜色
linearGrad.setColorAt(1,Qt::green); //终点颜色
linearGrad.setSpread(QGradient::PadSpread); //展布模式
painter.setBrush(linearGrad);

//设置复合模式
painter.setCompositionMode(QPainter::RasterOp_NotSourceXorDestination);
//painter.setCompositionMode(QPainter::CompositionMode_Difference);
//painter.setCompositionMode(QPainter::CompositionMode_Exclusion);


//每个椭圆的圆心在X轴的(50,0),半径为50
for(int i=0;i<36;i++)
{
painter.drawEllipse(QPoint(50,0),50,50);//画椭圆
painter.rotate(10); //画一次,旋转10度
}
}