智能家居触摸旋钮案例(Icon可替换)

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QMouseEvent>
#include <QVector>
#include <QRect>
#include <QSize>
#include <QPixmap>
#include <QtMath>
#include <QFont>
#include <QPen>

class IconKnob : public QWidget {
    Q_OBJECT
public:
    IconKnob(QWidget *parent = nullptr) : QWidget(parent), currentIconIndex(-1) {
        setFixedSize(200, 200);
        // 初始化图标
        for (int i = 1; i <= 6; ++i) {
            QString iconName = QString("icons/%1.png").arg(i);
            icons.push_back(QPixmap(iconName));
        }
        // 初始化图标位置
        initIconPositions();
    }

protected:
    void paintEvent(QPaintEvent *event) override {
        QPainter painter(this);
        painter.setRenderHint(QPainter::Antialiasing);

        // 外圆背景
        painter.setBrush(QColor(73, 148, 196));
        painter.drawEllipse(rect().center(), 90, 90);

        // 内圆
        painter.setBrush(QColor(73, 148, 196));
        painter.drawEllipse(rect().center(), 40, 40);

        // 荧光绿圆弧
        QPen pen(QColor(0, 255, 255), 5); // 荧光绿色,线宽5
        painter.setPen(pen);
        painter.drawArc(rect().adjusted(60, 60, -60, -60), 0, 360 * 16); // 绘制圆弧

        // “菜单”文字
        painter.setPen(Qt::black); // 文字颜色为黑色
        QFont font = painter.font();
        font.setPointSize(14); // 设置字体大小
        font.setBold(true); // 加粗
        painter.setFont(font);
        painter.drawText(rect(), Qt::AlignCenter, "菜单");

        // 绘制图标
        for (int i = 0; i < icons.size(); ++i) {
            QRect iconRect = iconPositions[i];
            QPixmap icon = i == currentIconIndex ? fixedIcon : icons[i];
            painter.drawPixmap(iconRect.topLeft(), icon.scaled(iconRect.size(), Qt::KeepAspectRatio, Qt::SmoothTransformation));
        }
    }

    void mousePressEvent(QMouseEvent *event) override {
        for (int i = 0; i < iconPositions.size(); ++i) {
            if (iconPositions[i].contains(event->pos())) {
                currentIconIndex = i;
                update(); // 触发重绘
                break;
            }
        }
    }

private:
    QVector<QRect> iconPositions;
    QVector<QPixmap> icons;
    QPixmap fixedIcon = QPixmap("icons/fixedIcon.png"); // 固定的图标
    int currentIconIndex;

    void initIconPositions() {
        QPoint center = rect().center();
        int radius = 65; // 图标到中心的半径
        QSize iconSize(36, 36); // 图标尺寸

        for (int i = 0; i < 6; ++i) {
            double angleRadians = i * M_PI / 3 - M_PI / 2; // 计算弧度
            int x = center.x() + radius * qCos(angleRadians) - iconSize.width() / 2;
            int y = center.y() + radius * qSin(angleRadians) - iconSize.height() / 2;
            iconPositions.append(QRect(x, y, iconSize.width(), iconSize.height()));
        }
    }
};


        这段代码定义了一个名为 IconKnob 的自定义 QWidget 类,主要用于创建一个图形用户界面(GUI)组件,这个组件能够以一种直观和美观的方式展示图标,并允许用户通过点击来选择不同的图标。这种组件在多种应用程序中都有潜在的用途,例如在媒体播放器、图形设计软件或任何需要快速访问不同工具或选项的软件中。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
### 回答1: 以下是一个简单的Qt自定义旋钮案例: 1. 创建一个新的Qt Widgets项目。 2. 在Qt设计师中添加一个QDial小部件。 3. 在QDial的属性编辑器中,将wrapping和notchesVisible属性设置为true。 4. 在项目文件夹中创建一个名为dial.h的新头文件,并添加以下内容: ``` #ifndef DIAL_H #define DIAL_H #include <QDial> class Dial : public QDial { Q_OBJECT public: explicit Dial(QWidget *parent = nullptr); protected: void paintEvent(QPaintEvent *event) override; }; #endif // DIAL_H ``` 5. 在dial.cpp文件中实现paintEvent函数: ``` #include "dial.h" #include <QPainter> Dial::Dial(QWidget *parent) : QDial(parent) { setMinimum(0); setMaximum(360); } void Dial::paintEvent(QPaintEvent *event) { Q_UNUSED(event); QPainter painter(this); painter.setRenderHint(QPainter::Antialiasing, true); painter.translate(width() / 2, height() / 2); painter.scale(width() / 200.0, height() / 200.0); painter.setPen(QPen(QColor(255, 255, 255), 2)); for (int i = 0; i < 360; i += 10) { painter.drawLine(0, -90, 0, -100); painter.rotate(10); } painter.setPen(QPen(QColor(255, 0, 0), 4)); painter.drawLine(0, 0, 0, -80); painter.rotate(value()); painter.drawLine(0, 0, 0, -60); } ``` 6. 在Qt设计师中将QDial小部件替换为自定义的Dial小部件。 7. 运行程序,你将看到一个带有旋钮指针的自定义旋钮。 这个例子中,我们继承了QDial类并重写了paintEvent函数来自定义旋钮的绘制。我们使用QPainter类来绘制刻度线和旋钮指针。我们还通过设置wrapping属性来允许旋钮无限旋转,并且设置notchesVisible属性来显示刻度线。 ### 回答2: 在Qt中实现自定义旋钮案例,可以按照以下步骤进行: 1. 创建一个继承自QAbstractSlider的自定义旋钮类,命名为CustomDial。 2. 在CustomDial类的构造函数中,设置旋钮的默认值和范围,并初始化旋钮的样式。 3. 重写CustomDial类的paintEvent函数,用于绘制旋钮的外观。可以使用Qt的绘图函数来绘制一个圆形旋钮,以及表示旋钮当前值的指针。 4. 重写CustomDial类的mousePressEvent和mouseMoveEvent函数,用于捕捉鼠标事件并实现旋钮的交互。在mousePressEvent函数中,计算鼠标点击点相对于旋钮中心点的角度,并将当前值更新为对应角度所处的范围。在mouseMoveEvent函数中,根据鼠标移动的位置计算旋钮指针的角度,并更新旋钮的当前值。 5. 在主窗口中,创建一个CustomDial对象的实例,并将其布局到合适位置。可以使用QVBoxLayout或QHBoxLayout等布局管理器进行布局。 6. 在主窗口中,连接CustomDial对象的valueChanged信号到一个槽函数,用于获取旋钮的当前值并进行相应的处理。 通过以上步骤,我们可以实现一个基本的自定义旋钮控件。根据具体的需求,可以进一步添加其他功能,例如旋钮的刻度显示、数值精度控制等。同时,也可以根据需要进行样式的自定义,使旋钮更符合应用程序的整体风格。 ### 回答3: 在Qt中实现自定义旋钮可以使用QSlider和QDial两个控件进行结合来实现。具体步骤如下: 1. 创建一个继承自QDial的自定义旋钮控件Knob,并在构造函数中设置一些旋钮的基本属性,如最小值、最大值、初始值等。 2. 重写Knob的paintEvent函数,通过QPainter绘制出旋钮的外观样式。可以使用QPainter的drawArc、drawText等函数绘制旋钮的底部圆环、刻度值等。 3. 为Knob添加一个QSlider作为旋钮的指针,并设置指针的起始位置和角度等属性。可以使用QSlider的setStyleSheet函数为指针设置样式。 4. 在Knob中重新实现QSlider和QDial的一些事件处理函数,通过这些函数实现旋钮的旋转控制。例如,重写mousePressEvent和mouseMoveEvent函数,根据鼠标拖动的位置计算出旋钮目标角度,并通过QSlider的setValue函数来设置指针的位置。 5. 将Knob添加到主窗口中,设置其位置和大小等属性,就可以在界面上显示出自定义的旋钮了。 通过以上步骤,我们可以实现一个自定义的旋钮控件,并在Qt的界面中使用它来实现一些旋钮调节数值的功能。可以根据具体需求,调整旋钮的外观样式和功能细节。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

(机)(器)(视)(觉)

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值