一.物理坐标
物理坐标系,就是我们上节课说的,坐标的原点在窗口的左上角。这节课我们可以通过改变原点的位置来达到我们想姚的逻辑坐标。
二.逻辑坐标
1.平移
void Widget::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
QImage image(":/bg.png");
QRect rect(0,0,200,150);
painter.drawImage(rect,image);
painter.translate(300,100);//将坐标系水平向右平移300,垂直向下平移100
painter.drawImage(rect,image);
}
运行结果:
2.旋转
void Widget::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
QImage image(":/bg.png");
QRect rect(0,0,200,150);
//painter.drawImage(rect,image);
painter.translate(300,100);//将坐标系水平向右平移300,垂直向下平移100
painter.drawImage(rect,image);
painter.rotate(90);//将坐标系顺时针旋转90
painter.drawImage(rect,image);
}
运行结果:
3.扭转
shear的参数范围为0~1
void Widget::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
QImage image(":/bg.png");
QRect rect(0,0,200,150);
//painter.drawImage(rect,image);
painter.translate(300,100);//将坐标系水平向右平移300,垂直向下平移100
//painter.drawImage(rect,image);
painter.shear(0.1,0.1);
painter.drawImage(rect,image);
}
运行结果:
4.缩放
scale的参数1为分解线,小于1缩小,大于1放大
void Widget::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
QImage image(":/bg.png");
QRect rect(0,0,200,150);
painter.drawImage(rect,image);
painter.scale(2,2);
painter.drawImage(rect,image);
}
缩放前:
缩放后:
三.案例结合画一个五角星
正常画一个五角星是需要我们去找坐标的,而且比较难找,所以我们通过下面的方法进行绘画。
应该能看懂吧,数学知识,第一条在坐标系的五角星坐标是很容易的,后面的都是通过三角函数来得到的。
360°被分为5份,所以每个角的度数为360/5=72°。
void Widget::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
QPen pen;
pen.setColor(Qt::red);
pen.setWidth(4);
painter.setPen(pen);
painter.setRenderHint(QPainter::Antialiasing);
painter.setRenderHint(QPainter::TextAntialiasing);
qreal r=200;//qreal相当于double
qreal unit=72*3.141592/180;//算的是72°的弧度值,因为cos和sin需要的是弧度
QPoint points[5]={
QPoint(r,0),
QPoint(r*cos(unit),-r*sin(unit)),
QPoint(r*cos(unit*2),-r*sin(unit*2)),
QPoint(r*cos(unit*3),-r*sin(unit*3)),
QPoint(r*cos(unit*4),-r*sin(unit*4))
};
QPainterPath path;
path.moveTo(points[0]);//把笔放在那个点开始
path.lineTo(points[2]);//画线到这个点
path.lineTo(points[4]);
path.lineTo(points[1]);
path.lineTo(points[3]);
path.closeSubpath();//第一个点和最后一个点相连
QFont font;
font.setPointSize(20);
painter.setFont(font);
//路径还可以加文字
path.addText(points[0],font,"0");
path.addText(points[1],font,"1");
path.addText(points[2],font,"2");
path.addText(points[3],font,"3");
path.addText(points[4],font,"4");
painter.drawPath(path);
painter.save();//保存当前坐标系
painter.translate(300,300);
painter.rotate(-18);//向逆时针转18°
painter.drawPath(path);
painter.restore();//恢复到刚刚保存的坐标系
}
运行结果:
完美!
四.总结
当我们需要某些特殊的绘图的时候,我们可以换个角度,来对坐标系进行变换,可以会出现意想不到的好结果!
人生有两条路,一条需要用心走,叫做梦想;一条需要用脚走,叫做现实。心走得太快,会迷路;脚走得太快,会摔倒。愿你的人生不慌不忙,一路走得坦荡。