一 任务描述

1.绘制五角星

2.在画布背景下，添加图片+gif动图

3.鼠标点击会使得图片 / 动图移动

二 【绘制五角星】完成过程 

1.创建基于QWidget,窗口，先不在UI界面 放置任何组件

2.在头文件添加 宏+public 里面写paintEvent函数

#include<QPainter>
......
public:
    ....
     void paintEvent(QPaintEvent *event);//绘图

3.在.cpp  构造函数里面，设窗口基本属性（窗体颜色 / 大小）

setPalette(QPalette(Qt::white));//设置背景颜色
    setAutoFillBackground(true);
    
    resize(600,300);//设置大小

4.在. cpp   paintEvent函数里面绘图，基于QPainterPath绘图

void Widget::paintEvent(QPaintEvent *event)
{
    //1.实例化+抗锯齿（平滑）
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::TextAntialiasing);


    //5.画五角星的顶点
    qreal R = 100;
    const qreal pi = 3.1415926;
    qreal deg = pi*72/180;//弧度表示
    QPoint points[5]={
        QPoint(R,0),
        QPoint(R*cos(deg),-R*sin(deg)),
        QPoint(R*cos(2*deg),-R*sin(2*deg)),
        QPoint(R*cos(3*deg),-R*sin(3*deg)),
        QPoint(R*cos(4*deg),-R*sin(4*deg)),
    };

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

    //3.设置画刷
    QRadialGradient RadialGradient;
    RadialGradient.setColorAt(0,Qt::red);
    RadialGradient.setColorAt(1,Qt::yellow);
    RadialGradient.setSpread(QGradient::ReflectSpread);
    painter.setBrush(RadialGradient);

    //4.设置字体
    QFont font;
    font.setPointSize(10);
    font.setBold(true);
    painter.setFont(font);

    //6.绘制画星星path 便于重复使用
    QPainterPath starpath;
    starpath.moveTo(points[0]);//数组用中括号，不可小括号
    starpath.lineTo(points[2]);
    starpath.lineTo(points[4]);
    starpath.lineTo(points[1]);
    starpath.lineTo(points[3]);
    starpath.closeSubpath();//闭合路径，第一个点，最后一个点，， 连接
    starpath.addText(points[0],font,"0");//添加端点编号
    starpath.addText(points[1],font,"1");
    starpath.addText(points[2],font,"2");
    starpath.addText(points[3],font,"3");
    starpath.addText(points[4],font,"4");

    //7.绘图 +坐标变换
//    int W = this->width();
//    int H = this->height();
    painter.save();//保持坐标
    painter.translate(width()/2,height()/2);//平移坐标原点
    painter.drawPath(starpath);//按路径画图
    //painter.restore();//恢复坐标

    //8.路径的缩放旋转 +  坐标变化
    painter.translate(100,100);//上次恢复了坐标，所以坐标在初始状态
    painter.scale(0.5,0.5);
    painter.drawPath(starpath);

//    //1.发出绘画命令
//    painter.drawPath();
}

三 【画布添加图片】完成过程

1. 添加图片  参考以前文章，建立QLable 插入图片

2.添加动图——基于QMovie

参考链接https://blog.csdn.net/qq_24890953/article/details/55100574

（1）UI界面添加QLable 组件，名字lable_2

（2）动图添加到 资源文件

（3）在构造函数中，创建QMovie类->lable_2  设置setMovie->movie 再start（）

 QMovie *movie = new QMovie(":/new/prefix1/pic/walk.gif");//添加动图
    ui->label_2->setMovie(movie);
    movie->start();

四 【鼠标单击移动图片】完成过程

参考  获取组件位置  https://blog.csdn.net/Xuejie_N/article/details/42364997

         鼠标事件  https://blog.csdn.net/lovebird_27/article/details/50351336

1.添加头文件  <QMouseEvent>   +  声明单击鼠标事件

#include <QMouseEvent>
......
public:
    ......
    void mousePressEvent(QMouseEvent *event);        //单击鼠标事件

2.写单击鼠标  触发函数

void Widget::mousePressEvent(QMouseEvent *event)
{
    int x = event->pos().x();//获取在窗体中的坐标 
    int y = event->pos().y();
    int x1 = x+300;          //  动图跟着移动，坐标差
    int y1 = y+300;

    //std::cout<< x <<std::endl;
    ui->label->setGeometry(x1,y1,100,100);   //图片
    ui->label_2->setGeometry(x,y,200,200);   //.gif 动图

}