QT触摸滑动图片效果，横向滑动图片

QT触摸滑动图片效果，横向滑动图片

先看效果，横向滑动图片，有放大缩小的效果，过度平滑。

1. 程序整理结构

• 创建了一个PictureScroll的类，主程序中用QWidget套用。
• 采用paintEvent绘画事件，可以用update跟新显示。
• 使用QPainter的类来绘制图片，需求提前确定图片大小来调节显示区域。
• 使用QPixmap的类来存放图片，并用scaled来调整图片大小。
• 绘制的代码块如下：

void PictureScroll::paintPicture(QPainter &painter, QPixmap Pixmap, int deviation)
{
    int Width = width();//获取宽

    int a = qAbs(deviation/5);//取 （偏移量/比例）的绝对值
    int b = qAbs(deviation/10);
    QPixmap nImg = Pixmap.scaled(Width/3-a,Width/3-a,Qt::KeepAspectRatio,Qt::SmoothTransformation);//缩放功能，4个参数：（长，宽，自己按F1看，自己按F1看）
    QRectF target(Width/3+deviation+b,b,Width/3-a,Width/3-a);//4个参数:(左上顶点X,左上顶多Y,图片长,图片宽)
    QRectF source(0,0,Width/3-a,Width/3-a);//4个参数:(左上顶点X,左上顶多Y,图片长,图片宽)
    painter.drawPixmap(target,nImg,source);//3个参数:(图片位置,图片链接,图片大小)
}

• 这里需要几个关键变量：

    int Now_Value;//当前值
    int Min_Value;//最小值
    int Man_Value;//最大值
    bool isDragging;//鼠标按下标志位
    int Mouse_Press;//鼠标拖动值
    int Deviation;//显示偏移量

2. PictureScroll的代码，有详细注解

想用的话，直接建立一个无界面的文件，把 .h .cpp 都复制进去就行。
.h 的代码

#ifndef PICTURESCROLL_H
#define PICTURESCROLL_H

#include <QWidget>      //Widget头文件
#include <QPainter>     //画笔头文件
#include <QDebug>       //打印头文件
#include <QMouseEvent>  //鼠标头文件
#include <QWheelEvent>  //滚轮头文件
#include <QPropertyAnimation>


class PictureScroll : public QWidget
{
    Q_OBJECT

public:
    explicit PictureScroll(QWidget *parent = nullptr);


protected:
    void paintEvent(QPaintEvent *) Q_DECL_OVERRIDE;             //画图程序
    void paintPicture(QPainter &painter, QPixmap Pixmap, int deviation);//画图
    void mousePressEvent(QMouseEvent *Mouse);   //按下
    void mouseMoveEvent(QMouseEvent *Mouse);    //移动
    void mouseReleaseEvent(QMouseEvent *);      //松开
    void wheelEvent(QWheelEvent *event);        //滚轮

private:
    int Now_Value;//当前值
    int Min_Value;//最小值
    int Man_Value;//最大值
    bool isDragging;//鼠标按下标志位
    int Mouse_Press;//鼠标拖动值
    int Deviation;//显示偏移量
};

#endif // PICTURESCROLL_H

.cpp 的代码

#include "picturescroll.h"

PictureScroll::PictureScroll(QWidget *parent)
    : QWidget(parent),
      Now_Value(1),//当前值
      Min_Value(1),//最小值
      Man_Value(13),//最多值
      isDragging(false),
      Mouse_Press(0),
      Deviation(0)
{
    this->resize(600,200);//界面尺寸，this的尺寸，图片的尺寸是200*200，要显示3个图片
}

void PictureScroll::paintEvent(QPaintEvent *)//绘画事件，可以用update跟新
{
    int Width = width() - 1;//获取宽，
    //这里宽度就是第12行的600，如果需要改变窗口大小，改上面一个地方就行了。

    //如果偏移了过大，需要滚动到下一个图片
    if((Deviation >= Width/3) && (Now_Value > Min_Value))
    {
        Mouse_Press += Width/3;//偏移初值
        Deviation -= Width/3;
        Now_Value -= 1;
    }
    if((Deviation <= -Width/3) && (Now_Value < Man_Value))
    {
        Mouse_Press -= Width/3;//偏移初值
        Deviation += Width/3;
        Now_Value += 1;
    }

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
    paintPicture(painter,QPixmap(QString(":/new/prefix1/picture/th-c%1.png").arg(Now_Value)),Deviation);

    if(Now_Value > Min_Value)
        paintPicture(painter,QPixmap(QString(":/new/prefix1/picture/th-c%1.png").arg(Now_Value-1)),-Width/3+Deviation);

    if(Now_Value < Man_Value)
        paintPicture(painter,QPixmap(QString(":/new/prefix1/picture/th-c%1.png").arg(Now_Value+1)),+Width/3+Deviation);

    //补空位的一个显示，让滑动更平滑
    if(Deviation > 0)//>0是-1，<0是+1
    {
        if(Now_Value > (Min_Value+1))//显示+2号图片
            paintPicture(painter,QPixmap(QString(":/new/prefix1/picture/th-c%1.png").arg(Now_Value-2)),-Width/3*2+Deviation);
    }
    else
    {
        if(Now_Value < (Man_Value-1))
            paintPicture(painter,QPixmap(QString(":/new/prefix1/picture/th-c%1.png").arg(Now_Value+2)),+Width/3*2+Deviation);
    }
}

void PictureScroll::paintPicture(QPainter &painter, QPixmap Pixmap, int deviation)
{
    int Width = width();//获取宽

    int a = qAbs(deviation/5);//取 （偏移量/比例）的绝对值
    int b = qAbs(deviation/10);
    QPixmap nImg = Pixmap.scaled(Width/3-a,Width/3-a,Qt::KeepAspectRatio,Qt::SmoothTransformation);//缩放功能，4个参数：（长，宽，自己按F1看，自己按F1看）
    QRectF target(Width/3+deviation+b,b,Width/3-a,Width/3-a);//4个参数:(左上顶点X,左上顶多Y,图片长,图片宽)
    QRectF source(0,0,Width/3-a,Width/3-a);//4个参数:(左上顶点X,左上顶多Y,图片长,图片宽)
    painter.drawPixmap(target,nImg,source);//3个参数:(图片位置,图片链接,图片大小)
}

void PictureScroll::mousePressEvent(QMouseEvent *Mouse)
{
    isDragging = true;//记录鼠标按下标志位
    Mouse_Press = Mouse->pos().x();//记录X坐标，因为是上下滑动
}

void PictureScroll::mouseMoveEvent(QMouseEvent *Mouse)
{
    if (isDragging)//鼠标按下，的移动，才算拖动
    {
        Deviation = Mouse->pos().x() - Mouse_Press;//获取便宜量

        int Width = width() - 1;//获取宽

        if (Deviation > (Width) / 3)
        {
            Deviation = (Width) / 3;
        }
        if (Deviation < -(Width) / 3)
        {
            Deviation = -(Width) / 3;
        }
        update();//更新显示
    }
}

void PictureScroll::mouseReleaseEvent(QMouseEvent *)
{
    if (isDragging)
        isDragging = false;

    int Width = width() - 1;//获取宽

    if((Deviation > (Width/3)/2) && (Now_Value > Min_Value))
    {
        Now_Value -= 1;
    }
    if((Deviation < (-Width/3)/2) && (Now_Value < Man_Value))
    {
        Now_Value += 1;
    }
    Deviation = 0;//偏移归零
    update();//更新显示
}

void PictureScroll::wheelEvent(QWheelEvent *event)
{
    //滚轮是一个事件，event->delta()就是滚动的值。
    if(event->delta() > 0)//向上滚轮
    {
        if(Now_Value > Min_Value)
            Now_Value -= 1;
    }
    else//向下滚轮
    {
        if(Now_Value < Man_Value)
            Now_Value += 1;
    }
    Deviation = 0;
    update();//更新显示
}

3. 可以扩展的地方

• 之前写过一个，纵向滚动数字的。可以参考一些地方，比如说可以在数字改变的时候返回索引号。
  纵向滑动数字的帖子
• 这里的图片是200×200的固定尺寸，要显示3个窗口尺寸就是600×200。
• 完成的工程代码如下：
  工程链接