登录
当前位置： 首页 > 编程笔记 >

Qt实现转动轮播图

靳涵亮
2023-03-14
本文向大家介绍Qt实现转动轮播图，包括了Qt实现转动轮播图的使用技巧和注意事项，需要的朋友参考一下

Qt轮播图的实现代码，供大家参考，具体内容如下

qt轮播图简单的实现，功能会在后面完善

效果图：

这里我是用了QGraphicsScene+QGraphicsView+QGraphicsObject，其中对QGraphicsView和QGraphicsObject进行继承派生类功能进行了添加。时间有限，直接贴上关键代码部分供大家参考。

//pictrueitem.h
#ifndef PICTRUEITEM_H
#define PICTRUEITEM_H
#include <QGraphicsPixmapItem>
#include <QGraphicsItem>
#include <QGraphicsObject>
#include <QPixmap>
class PictrueItem : public QGraphicsObject
{
  Q_OBJECT

public:
  explicit PictrueItem(QGraphicsItem *parent = Q_NULLPTR);
  explicit PictrueItem(const QPixmap &pixmap, QGraphicsItem *parent = Q_NULLPTR);
  virtual ~PictrueItem();
  void setPixmap(const QPixmap &pixmap);
  QPixmap pixmap() const;
  virtual QRectF boundingRect() const;
  void setTransformationMode(Qt::TransformationMode mode);
  QPointF offset() const;
  void setOffset(const QPointF &offset);
  virtual int type()const;
  void setType(int type);
  int itemId()const;
  void setItemId(int id);

protected:
  void mousePressEvent(QGraphicsSceneMouseEvent *event);

  void mouseReleaseEvent(QGraphicsSceneMouseEvent *event);

  virtual void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);

Q_SIGNALS:

  void clicked();
  void clickedId(int);

private:

  QPointF pressedScenePoint;
  QPointF m_offset;
  QPointF m_pos;
  Qt::TransformationMode mode;
  QPixmap m_pixmap;
  bool isPressed;
  int m_type;
  int m_id;
  qreal m_pointPercent;
};

#endif // PICTRUEITEM_H
//pictrueitem.cpp
#include "pictrueitem.h"
#include <QGraphicsSceneMouseEvent>
#include <QPainter>
#include <QDebug>
PictrueItem::PictrueItem(QGraphicsItem *parent)
  :QGraphicsObject(parent),
   isPressed(false),
   mode(Qt::SmoothTransformation),
   m_type(0),
   m_id(0),
   m_pointPercent((qreal)0.0)
{

}

PictrueItem::PictrueItem(const QPixmap &pixmap, QGraphicsItem *parent)
  :QGraphicsObject(parent),
   isPressed(false),
   mode(Qt::SmoothTransformation),
   m_type(0)
{
  m_pixmap = pixmap;
}

PictrueItem::~PictrueItem()
{

}

void PictrueItem::setPixmap(const QPixmap &pixmap)
{
  prepareGeometryChange();
  m_pixmap = pixmap;
  update();
}

QPixmap PictrueItem::pixmap() const
{
  return m_pixmap;
}

QRectF PictrueItem::boundingRect() const
{
  if(m_pixmap.isNull())
    return QRectF();
  return QRectF(m_offset, m_pixmap.size() / m_pixmap.devicePixelRatio());
}

void PictrueItem::setTransformationMode(Qt::TransformationMode mode)
{
  if (mode != this->mode)
  {
    this->mode = mode;
    update();
  }
}

QPointF PictrueItem::offset() const
{
  return m_offset;
}

void PictrueItem::setOffset(const QPointF &offset)
{
  m_offset = offset;
  if (m_offset == offset)
    return;
  prepareGeometryChange();
  m_offset = offset;
  update();
}

int PictrueItem::type() const
{
  return m_type;
}

void PictrueItem::setType(int type)
{
  m_type = type;
}

int PictrueItem::itemId() const
{
  return m_id;
}

void PictrueItem::setItemId(int id)
{
  m_id = id;
}


void PictrueItem::mousePressEvent(QGraphicsSceneMouseEvent *event)
{
  //只响应鼠标左键
  if(event->button() == Qt::LeftButton)
  {
    pressedScenePoint = event->pos();
    isPressed = true;

  }
}

void PictrueItem::mouseReleaseEvent(QGraphicsSceneMouseEvent *event)
{
  if(event->button() == Qt::LeftButton){
    if(isPressed &&
        boundingRect().contains(event->pos()) &&
        boundingRect().contains(pressedScenePoint))
    {
      isPressed = false;
      emit clicked();
      emit clickedId(type());
    }
  }
}

void PictrueItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
  Q_UNUSED(widget);
  Q_UNUSED(option);
  painter->setRenderHint(QPainter::SmoothPixmapTransform,
              (this->mode == Qt::SmoothTransformation));

  painter->drawPixmap(m_offset, m_pixmap);

}
//pictrueview.h
#ifndef PICTRUEVIEW_H
#define PICTRUEVIEW_H
#include <QGraphicsView>

class PictrueView : public QGraphicsView
{
  Q_OBJECT

public:
  PictrueView(QWidget *parent = Q_NULLPTR);
  virtual ~PictrueView();
protected:
  void resizeEvent(QResizeEvent *event);
public:
Q_SIGNALS:
  void sizeChanged(const QSize &);
};

#endif // PICTRUEVIEW_H
//pictrueview.cpp
#include "pictrueview.h"
#include <QResizeEvent>
PictrueView::PictrueView(QWidget *parent)
  :QGraphicsView(parent)
{

}

PictrueView::~PictrueView()
{
  //none
}

void PictrueView::resizeEvent(QResizeEvent *event)
{
  emit sizeChanged(event->size());
  return QGraphicsView::resizeEvent(event);
}

下面那行按钮实现

//pictruebutton.h
#ifndef PICTRUERADIOBUTTON_H
#define PICTRUERADIOBUTTON_H
#include <QAbstractButton>

class PictrueButton : public QAbstractButton
{
  Q_OBJECT

public:
   explicit PictrueButton(QWidget *parent = Q_NULLPTR);
  ~PictrueButton();
  int id()const;
  void setId(int id);
Q_SIGNALS:
  void entered();
  void entered(int);
protected:
  virtual void paintEvent(QPaintEvent *);
  virtual void enterEvent(QEvent *event);
  virtual void leaveEvent(QEvent *event);
private:
  bool m_isSelected;
  int m_id;
};

#endif // PICTRUERADIOBUTTON_H
//pictruebutton.cpp
#include "pictruebutton.h"
#include <QPen>
#include <QPainter>
#include <QDebug>
#include <QPainterPath>
PictrueButton::PictrueButton(QWidget *parent)
  :QAbstractButton(parent),
   m_isSelected(false),
   m_id(0)
{
  setCheckable(true);
  setFixedSize(50,10);
}

PictrueButton::~PictrueButton()
{

}

int PictrueButton::id() const
{
  return m_id;
}

void PictrueButton::setId(int id)
{
  m_id = id;
}

void PictrueButton::paintEvent(QPaintEvent *)
{
  QPainter painter(this);
  QRectF drawRect = this->rect();
  QPainterPath drawPath;
  qDebug()<<drawRect;
  QPen drawPen;
  drawPen.setWidth(3);
  //选中为蓝,未选中为灰
  drawPen.setColor(Qt::gray);
  painter.setPen(drawPen);
  //抗锯齿
  painter.setRenderHint(QPainter::Antialiasing);
  drawPath.addRoundedRect(drawRect,10,10);
  painter.setClipPath(drawPath);
  if(isChecked())
    painter.fillRect(drawRect,QColor(0,0,255,128));
  else
    painter.fillRect(drawRect,QColor(128,128,128,128));
}

void PictrueButton::enterEvent(QEvent *event)
{
  if(!isChecked())
    setChecked(true);
  emit entered(m_id);
  return QAbstractButton::enterEvent(event);
}

void PictrueButton::leaveEvent(QEvent *event)
{
  return QAbstractButton::leaveEvent(event);
}
//qmainWindow.h
#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>
#define RAW_VIEW_SIZE QSize(476,414)
#define SCALE_VIEW_PIXMAP (qreal)2/1 //View与图片比例
#define SCALE_BIG_SMALL (qreal)2/1 //图片大小比例
//P1-P8，8个位置，根据需要改动
#define P1 (qreal)0.00
#define P2 (qreal)0.25
#define P3 (qreal)0.50
#define P4 (qreal)0.75
#define P5 (qreal)1.00
#define P6 P4
#define P7 P3
#define P8 P2
#define MID_TYPE 2
#define FPS 60//帧数，每秒
#define DURATION_MS 500//移动一次图元经过时间,毫秒，不得低于帧数

namespace Ui {
class MainWindow;
}
class QGraphicsScene;
class QButtonGroup;
class MainWindow : public QMainWindow
{
  Q_OBJECT

public:
  enum Rules:int{
    RuleA = 1,
    RuleB = -1,
    RuleC = 2,
    RuleD = -2
  };

  explicit MainWindow(QWidget *parent = 0);
  ~MainWindow();
  int getIndexByRules(int oldIndex,int rule);
  template<typename T>
  void rollList(QList<T> &oldList, int dir, int count);
  void rollItem(int rollDir,unsigned rollCount);
public Q_SLOTS:
  void timerOutFunc(); 
  void nextItem();
  void previousItem();
  void clickedItemRoll(int type);
protected:

private:
  Ui::MainWindow *ui;
  QTimer *m_timer;
  QGraphicsScene *m_scene;
  QLineF midLine;
  QList<qreal> pointList;
  QList<QPixmap> pixmapList;
  QList<qreal> zValueList;
  QList<qreal> pixmapScaleList;
  int m_index;
  Rules currentRule;
  unsigned m_rollCount;
  QButtonGroup *btnGroup;
  bool btnMoveEnable;
};

#endif // MAINWINDOW_H

下面是滚动的关键代码

void MainWindow::timerOutFunc()
{
  for(int i = 0; i<8; i++)
  {
    if(qAbs(midLine.pointAt(pointList[getIndexByRules(i,dir)]).x()-itemList[i]->pos().x())<qAbs(unitList[i]))
    {
      if(finishList.contains(i))
        continue;
      itemList[i]->setPos(midLine.pointAt(pointList[getIndexByRules(i,dir)]));
      //设置新的显示优先级
      itemList[i]->setScale(pixmapScaleList[getIndexByRules(i,dir)]);
      //设置新的类型
      itemList[i]->setType(getIndexByRules(i,dir));
      //i==7-->最后一个图元移动完成
      finishList.append(i);
      if(finishList.size() == 8)
      {
        //循环旋转图元表和图片表
        rollList(itemList,dir,1);
        rollList(pixmapList,dir,1);
        for(int i = 0; i<8; i++)
          itemList[i]->setZValue(zValueList[i]);
        m_timer->stop();
        finishList.clear();
        if(btnGroup->checkedId()!=itemList[MID_TYPE]->itemId())
          btnGroup->button(getIndexByRules(btnGroup->checkedId(),dir))->setChecked(true);
        if(--m_rollCount)
        {
          if(dir == 1)
            nextItem();
          else
            previousItem();
        }
        break;
      }
    }
    else
    {
      //按计算好的移动单位移动一次
      itemList[i]->setPos(QPointF(itemList[i]->pos().x()+unitList[i],itemList[i]->pos().y()));
      //转换因子不是1.0时进行转换设置
      if(transScaleList[i] != (qreal)1.0)
      {
        itemList[i]->setScale(itemList[i]->scale()*transScaleList[i]);
      }
    }
    m_scene->invalidate();
  }
}
void MainWindow::rollItem(int rollDir, unsigned rollCount)
{
  if(m_timer->isActive())
    return;
  //清除之前的空间差列表和移动单位列表
  m_rollCount = rollCount;
  spaceList.clear();
  unitList.clear();
  transScaleList.clear();
  dir = rollDir;
  qDebug()<<"rollCount"<<rollCount;
  for(int i = 0; i<8; i++)
  {
    spaceList.append(midLine.pointAt(pointList[getIndexByRules(i,dir)]).x()-itemList[i]->pos().x());//计算移动总距离
    unitList.append(spaceList[i]/(FPS*DURATION_MS/1000));//计算移动单个距离
    transScaleList.append(pow(pixmapScaleList[getIndexByRules(i,dir)]/pixmapScaleList[i],\
               (qreal)1/(FPS*DURATION_MS/1000)));//计算增长倍数
  }

  //启动定时器
  m_timer->start();

}

void MainWindow::nextItem()
{
  rollItem(1,1);
}

void MainWindow::previousItem()
{
  rollItem(-1,1);
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持小牛知识库。

 类似资料：
  • JavaScript实现旋转轮播图

    本文向大家介绍JavaScript实现旋转轮播图，包括了JavaScript实现旋转轮播图的使用技巧和注意事项，需要的朋友参考一下 最近一直在学习JavaScript，然后看到旋转轮播图的案例，就尝试着用js做了一个简单的轮播图，因为无法显示动态效果，所以就放个截图： 这个效果是这样的：一共有7张图片，它们会自动地向左滑动，然后左右箭头也可以控制轮播图的左滑和右滑，同时，如果鼠标停在图片上，那么轮

  • JavaScript实现旋转木马轮播图

    本文向大家介绍JavaScript实现旋转木马轮播图，包括了JavaScript实现旋转木马轮播图的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了JavaScript实现旋转木马轮播图的具体代码，供大家参考，具体内容如下 html代码段 图片自己添加，或者使用本人的上传照片，拉到最下面即可看见 css代码段： 初始化 reset js代码段： 这个是封装好的的js代码，直接引用即可

  • js实现自动播放匀速轮播图

    本文向大家介绍js实现自动播放匀速轮播图，包括了js实现自动播放匀速轮播图的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了js实现自动播放匀速轮播图的具体代码，供大家参考，具体内容如下 函数封装： （ 匀速运动函数） 对象可以动态生成属性，用对象的timer，避免了全局变量的使用， 实现步骤：  1.动态生成ol导航条，并将导航条放入all中使其成为孩子节点  2.根据ul中图片数量

  • jQuery实现的3D版图片轮播示例【滑动轮播】

    本文向大家介绍jQuery实现的3D版图片轮播示例【滑动轮播】，包括了jQuery实现的3D版图片轮播示例【滑动轮播】的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现的3D版图片轮播。分享给大家供大家参考，具体如下： 这个是用了3张图，来回滑动，类似一个圆圈（不晓得这个 怎么上动图啊！！！！） 图就是这么个图，但是他是可以滑动的（不好描述啊！！） 贴代码比较方便。。。 布局

  • jQuery实现大图轮播

    本文向大家介绍jQuery实现大图轮播，包括了jQuery实现大图轮播的使用技巧和注意事项，需要的朋友参考一下 css样式： js代码规范： 主体代码： 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！

  • Android使用ViewPager实现自动轮播

    本文向大家介绍Android使用ViewPager实现自动轮播，包括了Android使用ViewPager实现自动轮播的使用技巧和注意事项，需要的朋友参考一下 很多APP中都实现了类似引导页的自动轮播，不由得想到昨天的引导页上修改一下代码实现轮播。 其实大体上只需要添加一个线程循环执行就可以了。  项目已同步至：https://github.com/nanchen2251/viewpagerDem

相关阅读

jQuery实现大图轮播Android使用ViewPager实现自动轮播基于jQuery实现自动轮播旋转木马特效js手动播放图片实现图片轮播效果简单实现android轮播图

相关文章

Python实现微信自动抢红包YY直播测试实习生CSS轮廓字节跳动-飞书go转正实习一面字节跳动抖音直播-后端开发实习一面面经

相关问答

轮播图 - CSS实现复杂轮播效果，包括大小变化和非均匀间距，如何操作？javascript - 求最好用的轮播js插件，主要是用于图片轮播，html块轮播？javascript - 轮播循环时候为什么会出现闪动？前端 - 闲鱼首页轮播动画的技术实现细节是什么？Owl轮播同步项目

相关工具

Qt#Qt活字格 - 图片轮转插件PHP-QTBitcoin-Qt

相关文档

Qt 学习之路Qt 快速入门系列教程Redis 设计与实现如何实现自己的 jQuery常用算法实现方法
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.