Qt to write custom controls 36- Picture Viewer

I. Introduction

This control is mainly used as a simple image browser, you can flip up and down display pictures, pictures can turn on transition effects such as transparency gradients, alarm scenarios have to see pictures run pictures. This control is non-my original, from the network, I just corrected a lot of the BUG, and improve the various operation modes. Such as adding the right mouse button empty, add a background color, increase the keyboard flip, move to increase next / previous first / late next / other
controls no difficulty, mainly to open the folder, the folder is automatically calculated all files stored in the queue, the queue can be a full path to the picture can also be a picture, you can switch, if you select memory mode is automatically loaded into the path of pictures, so there is a benefit, that is, flip View picture when the speed is very fast, because the memory is displayed directly in the picture, without the need to reload the path, after all, a path to a picture and need to re-read the hard drive.

Second, the realization of functions

• 1: Increase the right mouse button to empty
• 2: Increase set the background color
• 3: Increase the set page icon size and spacing
• 4: Increase the set of stretching fill the display
• 5: Set whether to increase the gradient to display image
• 6: Increase keyboard settings page
• First / end / previous / next moves to increase: 7
• 8: Fixed memory leaks and other BUG BUG

Third, renderings

Fourth, the header file code

#ifndef IMAGEVIEW_H
#define IMAGEVIEW_H

/**
 * 图片浏览器控件 作者:feiyangqingyun(QQ:517216493) 2016-10-16
 * 本控件来源于网络(原作者:kimtaikee(http://www.qtcn.org/bbs/read-htm-tid-45436-ds-1.html#tpc))
 * 1:增加鼠标右键清空
 * 2:增加设置背景色
 * 3:增加设置间距和翻页图标大小
 * 4:增加设置是否拉伸填充显示
 * 5:增加设置是否渐变显示图像
 * 6:增加设置键盘翻页
 * 7:增加移动到第一张/末一张/上一张/下一张
 * 8:修正内存泄露BUG及其他BUG
 */

#include <QWidget>

class QToolButton;

class ImageNum : public QWidget
{
    Q_OBJECT
public:
    ImageNum(QWidget *parent = 0);

protected:
    void paintEvent(QPaintEvent *);
    void drawBg(QPainter *painter);
    void drawText(QPainter *painter);

private:
    int totalNum;       //总数
    int currentIndex;   //当前索引

public slots:
    //设置总数
    void setTotalNum(int totalNum);
    //设置当前索引
    void setCurrentIndex(int currentIndex);
};

#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif

class QDESIGNER_WIDGET_EXPORT ImageView : public QWidget
#else
class ImageView : public QWidget
#endif

{
    Q_OBJECT
    Q_PROPERTY(QColor bgColorStart READ getBgColorStart WRITE setBgColorStart)
    Q_PROPERTY(QColor bgColorEnd READ getBgColorEnd WRITE setBgColorEnd)

    Q_PROPERTY(int bottomSpace READ getBottomSpace WRITE setBottomSpace)
    Q_PROPERTY(int buttonSpace READ getButtonSpace WRITE setButtonSpace)
    Q_PROPERTY(QSize icoSize READ getIcoSize WRITE setIcoSize)

    Q_PROPERTY(bool fill READ getFill WRITE setFill)
    Q_PROPERTY(bool fade READ getFade WRITE setFade)
    Q_PROPERTY(bool keyMove READ getKeyMove WRITE setKeyMove)

public:
    explicit ImageView(QWidget *parent = 0);
    ~ImageView();

protected:
    void paintEvent(QPaintEvent *);
    void drawBg(QPainter *painter);
    void drawImage(QPainter *painter);
    void keyPressEvent(QKeyEvent *);
    void resizeEvent(QResizeEvent *);
    void showEvent(QShowEvent *);

private:
    QColor bgColorStart;            //背景渐变开始颜色
    QColor bgColorEnd;              //背景渐变结束颜色

    int bottomSpace;                //底部间距
    int buttonSpace;                //按钮间距
    QSize icoSize;                  //翻页按钮图标大小

    bool fill;                      //是否填充
    bool fade;                      //是否渐变显示
    bool keyMove;                   //是否支持按键移动

    QToolButton *preButton;         //向前移按钮
    QToolButton *nextButton;        //向后移按钮

    QStringList imageNames;         //图片名称集合
    int currentIndex;               //当前图片索引
    QImage currentImage;            //当前图片数据

    ImageNum *num;                  //显示当前索引和总数的对象

    int totalNum;                   //总数
    double opacity;                 //当前透明值
    QTimer *timer;                  //定时器改变透明值

private slots:
    void calcGeo();
    void doFading();

public:
    QColor getBgColorStart()        const;
    QColor getBgColorEnd()          const;

    int getBottomSpace()            const;
    int getButtonSpace()            const;
    QSize getIcoSize()              const;

    bool getFill()                  const;
    bool getFade()                  const;
    bool getKeyMove()               const;

    QSize sizeHint()                const;
    QSize minimumSizeHint()         const;

public slots:
    //载入图像文件夹
    void load();
    void load(const QString &strFolder);

    //清除图像
    void clear();

    //设置背景颜色
    void setBgColorStart(const QColor &bgColorStart);
    void setBgColorEnd(const QColor &bgColorEnd);

    //设置间距
    void setBottomSpace(int bottomSpace);
    void setButtonSpace(int buttonSpace);

    //设置翻页图标大小
    void setIcoSize(const QSize &icoSize);

    //设置图像是否拉伸填充
    void setFill(bool fill);
    //设置是否渐变显示
    void setFade(bool fade);
    //设置键盘按键是否能够移动
    void setKeyMove(bool keyMove);

    //移动到第一张
    void moveFirst();
    //移动到末一张
    void moveLast();
    //上一张
    void movePrevious();
    //下一张
    void moveNext();
    //移动到指定索引图片
    void moveTo(int index);

signals:
    //总数发生改变时触发
    void totalNumChanged(int totalNum);
    //当前图片索引发生改变时触发
    void currentIndexChanged(int currentIndex);
};

#endif // IMAGEVIEW_H

Fifth, the core code

void ImageView::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    drawBg(&painter);

    if (totalNum > 0) {
        drawImage(&painter);
    }
}

void ImageView::drawBg(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);
    QLinearGradient bgGradient(QPoint(0, 0), QPoint(0, height()));
    bgGradient.setColorAt(0.0, bgColorStart);
    bgGradient.setColorAt(1.0, bgColorEnd);
    painter->setBrush(bgGradient);
    painter->drawRect(rect());
    painter->restore();
}

void ImageView::drawImage(QPainter *painter)
{
    painter->save();
    painter->setOpacity(opacity);

    if (fill) {
        painter->drawImage(rect(), currentImage);
        painter->restore();
    } else {
        //按照比例自动居中绘制
        int imageWidth = currentImage.width();
        int imageHeight = currentImage.height();
        int imageX = rect().center().x() - imageWidth / 2;
        int imageY = rect().center().y() - imageHeight / 2;
        QPoint point(imageX, imageY);

        painter->drawImage(point, currentImage);
        painter->restore();
    }
}

void ImageView::keyPressEvent(QKeyEvent *keyEvent)
{
    if (keyEvent->key() == Qt::Key_Left || keyEvent->key() == Qt::Key_Up) {
        movePrevious();
    } else if (keyEvent->key() == Qt::Key_Right || keyEvent->key() == Qt::Key_Down) {
        moveNext();
    }
}

Sixth, the controls described

1. More than 149 exquisite control, covers a variety of dashboards, progress bar, the progress of the ball, compass, graphs, scales, thermometers, navigation bar, navigation bar, flatui, highlight the button, slide the selector, the lunar calendar and so on. Qwt far more than the number of controls integration.
2. Each class can be independently as a separate control, zero coupling each control file and a header file to achieve a code amount, independent of other files to facilitate individual control integrated into the project source code form, less. qwt interlocking control class, highly coupled, want to use one of the controls, must contain all the code.
3. Write all pure Qt, QWidget + QPainter to draw, to support any Qt version Qt4.6 Qt5.12, support for mingw, msvc, gcc compiler, etc., support any operating system such as windows + linux + mac + embedded linux, which does not garbled can be directly integrated into Qt Creator, a built-in controls and use the same, most of the effects can be as long as several properties are set, very convenient.
4. DEMO separate source containing the control corresponding to each control has a convenient reference. It also provides integrated use of all controls a DEMO.
5. Source code for each control has detailed Chinese annotation, are prepared in accordance with unified design specifications, easy to learn to write custom controls.
6. Each control default color and demo corresponding color is very beautiful.
7. More than 130 visible control, six invisible control.
8. Portion control provides a variety of styles style selection, multiple choice style indicator.
9. All controls changes adaptive stretched form.
10. Integrated design custom attribute that supports drag design, WYSIWYG support the import and export in xml format.
11. Activex control that comes with demo, all controls can be run directly in the browser ie.
12. Fontawesome integrated graphics font + Alibaba iconfont collection of hundreds of graphic fonts, font fun graphic brings.
13. All controls and finally generate a dll dynamic library files, can be integrated directly into qtcreator designed for use in drag.
14. Already qml version, the latter will consider a pyqt version, if the user is in great demand then.

Seven, SDK download

• SDK download link: https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ extraction code: 877p
• Download link is included in the various versions of the dynamic library files, header files of all the controls, the use of demo, custom controls + properties designer.
• Open plug-in custom dynamic library dll use (permanent free), and the back door without any restrictions, ease of use.
• 26 now available version dll, which includes qt5.12.3 msvc2017 32 + 64 mingw 32 + 64 in.
• From time to time to increase control and improve controls, regularly updated SDK, to welcome all suggestions, thank you!
• widget versions (QQ: 517216493) qml versions (QQ: 373955953) sambong camel (QQ: 278969898).
• Qt's advanced column know almost Taoge road https://zhuanlan.zhihu.com/TaoQt
• Welcome concern public micro-channel number] [efficient programmers, content C ++ / Python, learning, writing skills, popular technology, career development, a lot of dry goods, benefits a lot!