鼠標旋轉環形應用圖標

示例說明

示例顯示一圈應用程序圖標。所有的圖標都是模糊的,除了屏幕左下方的圖標,也就是焦點。單擊屏幕左側的任何位置,圖標將順時針移動到下一個圖標,單擊右側的圖標將逆時針移動圖標。

代碼解析

blureffect類定義

QGraphicsBlurEffect類提供了模糊效果。
模糊的效果對於減少細節非常有用,例如當源失去焦點時,您希望將注意力吸引到其他元素上。可以使用setBlurRadius()函數修改模糊細節級別。使用setblurhint()來選擇模糊提示。默認情況下,模糊半徑爲5像素。模糊半徑在設備座標中指定

#include <QGraphicsEffect>
#include <QGraphicsItem>

class BlurEffect: public QGraphicsBlurEffect
{
public:
    BlurEffect(QGraphicsItem *item);

    void setBaseLine(qreal y) { m_baseLine = y; }

    QRectF boundingRect() const;

    void draw(QPainter *painter) override;

private:
    void adjustForItem();

private:
    qreal m_baseLine; //模糊基數
    QGraphicsItem *item;
};

#endif // BLUREFFECT_H

blureffect類實現

#include "blureffect.h"

#include <QDebug>

BlurEffect::BlurEffect(QGraphicsItem *item)
    : QGraphicsBlurEffect()
    , m_baseLine(200), item(item)
{
}
//根據Item座標位置調整模糊程度
void BlurEffect::adjustForItem()
{
    qreal y = m_baseLine - item->pos().y();
    qreal radius = qBound(qreal(0.0), y / 32, qreal(16.0));
    setBlurRadius(radius);
}
//獲取模糊範圍
QRectF BlurEffect::boundingRect() const
{
    const_cast<BlurEffect *>(this)->adjustForItem();
    return QGraphicsBlurEffect::boundingRect();
}

//重寫繪製函數
void BlurEffect::draw(QPainter *painter)
{
    adjustForItem();
    QGraphicsBlurEffect::draw(painter);
}

blurpicker類定義

#include <QGraphicsEffect>
#include <QGraphicsView>
#include <QPropertyAnimation>

#include "blureffect.h"

class BlurPicker: public QGraphicsView
{
    Q_OBJECT
    //屬性系統
    Q_PROPERTY(qreal index READ index WRITE setIndex)

public:
    BlurPicker(QWidget *parent = 0);

    qreal index() const;
    void setIndex(qreal);

protected:
    void keyPressEvent(QKeyEvent *event) override;
    void resizeEvent(QResizeEvent *event) override;
    void mousePressEvent(QMouseEvent *event) override;

private:
    void setupScene();

private:
    qreal m_index;
    QList<QGraphicsItem*> m_icons;
    QPropertyAnimation m_animation;
};

blurpicker 類實現

#include "blurpicker.h"

#include <QtWidgets>
#include <QtCore/qmath.h>

#include "blureffect.h"

#ifndef M_PI
#define M_PI 3.14159265358979323846
#endif

BlurPicker::BlurPicker(QWidget *parent): QGraphicsView(parent), m_index(0.0), m_animation(this, "index")
{
    setBackgroundBrush(QPixmap(":/images/background.jpg"));
    setScene(new QGraphicsScene(this));

    setupScene();
    setIndex(0);

    m_animation.setDuration(400);
    m_animation.setEasingCurve(QEasingCurve::InOutSine);

    setRenderHint(QPainter::Antialiasing, true);
    setFrameStyle(QFrame::NoFrame);
}

qreal BlurPicker::index() const
{
    return m_index;
}

//根據座標調整模糊基數
void BlurPicker::setIndex(qreal index)
{
    m_index = index;

    qreal baseline = 0;
    for (int i = 0; i < m_icons.count(); ++i) {
        QGraphicsItem *icon = m_icons[i];
        qreal a = ((i + m_index) * 2 * M_PI) / m_icons.count();
        qreal xs = 170 * qSin(a);
        qreal ys = 100 * qCos(a);
        QPointF pos(xs, ys);
        pos = QTransform().rotate(-20).map(pos);
        pos -= QPointF(40, 40);
        icon->setPos(pos);
        baseline = qMax(baseline, ys);
        static_cast<BlurEffect *>(icon->graphicsEffect())->setBaseLine(baseline);
    }

    scene()->update();
}
//設置視圖場景和視圖項顯示效果
void BlurPicker::setupScene()
{
    scene()->setSceneRect(-200, -120, 400, 240);

    QStringList names;
    names << ":/images/accessories-calculator.png";
    names << ":/images/accessories-text-editor.png";
    names << ":/images/help-browser.png";
    names << ":/images/internet-group-chat.png";
    names << ":/images/internet-mail.png";
    names << ":/images/internet-web-browser.png";
    names << ":/images/office-calendar.png";
    names << ":/images/system-users.png";

    for (int i = 0; i < names.count(); i++) {
        QPixmap pixmap(names[i]);
        QGraphicsPixmapItem *icon = scene()->addPixmap(pixmap);
        icon->setZValue(1);
        icon->setGraphicsEffect(new BlurEffect(icon));
        m_icons << icon;
    }

    QGraphicsPixmapItem *bg = scene()->addPixmap(QPixmap(":/images/background.jpg"));
    bg->setZValue(0);
    bg->setPos(-200, -150);
}

void BlurPicker::keyPressEvent(QKeyEvent *event)
{
    int delta = 0;
    switch (event->key())
    {
    case Qt::Key_Left:
        delta = -1;
        break;
    case  Qt::Key_Right:
        delta = 1;
        break;
    default:
        break;
    }
    if (m_animation.state() == QAbstractAnimation::Stopped && delta) {
        m_animation.setEndValue(m_index + delta);
        m_animation.start();
        event->accept();
    }
}

void BlurPicker::resizeEvent(QResizeEvent * /* event */)
{
}

void BlurPicker::mousePressEvent(QMouseEvent *event)
{
    int delta = 0;
    if(event->x() > (width() / 2))
    {
        delta = 1;
    }
    else
    {
        delta = -1;
    }

    if (m_animation.state() == QAbstractAnimation::Stopped && delta) {
        m_animation.setEndValue(m_index + delta);
        m_animation.start();
        event->accept();
    }
}

使用方式

#include "blurpicker.h"
#include <QApplication>

int main(int argc, char **argv)
{
    QApplication app(argc, argv);

    BlurPicker blurPicker;
    blurPicker.setWindowTitle(QT_TRANSLATE_NOOP(QGraphicsView, "Application Picker"));

    blurPicker.setFixedSize(400, 300);
    blurPicker.show();

    return app.exec();
}

運行效果

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章