QT图形视图框架：自定义遥控器圆形按钮图形项

最新推荐文章于 2024-03-15 17:57:11 发布
最新推荐文章于 2024-03-15 17:57:11 发布
阅读量2k 收藏 20
点赞数 6
分类专栏： # Qt图形视图框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kenfan1647/article/details/111968234
版权
该博客介绍了一个使用QT编写的遥控器圆形按钮控件，包括按钮的拖动、选择、焦点处理和点击事件。代码展示了如何绘制带有扇形区域、文字和中心小圆的图形，以及根据鼠标点击位置判断按下的按钮。此外，还提供了鼠标事件处理函数，如按下、移动和释放事件，以及图形项边界调整的逻辑。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果：

代码：

#ifndef DISCBUTTONGRAPHICSPIXMAPITEM_H
#define DISCBUTTONGRAPHICSPIXMAPITEM_H

#include <QGraphicsObject>

//遥控器圆形按钮
class DiscButtonGraphicsPixmapItem : public QGraphicsObject
{
    Q_OBJECT
public:
    DiscButtonGraphicsPixmapItem(QString uuid,QGraphicsItem *parent = nullptr);
protected:
    QVariant itemChange(GraphicsItemChange change, const QVariant &value)override;
    virtual void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)override;
    virtual QRectF boundingRect()const override;
    void mousePressEvent(QGraphicsSceneMouseEvent *event)override;
    void hoverMoveEvent(QGraphicsSceneHoverEvent* event)override;
    void mouseMoveEvent(QGraphicsSceneMouseEvent* event)override;
    void mouseReleaseEvent(QGraphicsSceneMouseEvent* event)override;
private:
    bool IsInResizeArea(const QPointF& pos);
    QSizeF itemSize;
    bool isResizing;  //是否正在改变大小的过程中
    QString uuid;
    QRectF drawRect;//整个大圆的范围
    bool isPointInCir(const QPoint &point, const QRect & rect);
    QPainterPath fanShaped[4];
    QRectF centerCircularRect;//中心圆按钮的范围
    QPainterPath gradientArc(double startAngle, double angleLength, double arcHeight);
    enum class pressBtnType //按下的是哪个按钮
    {
        up = 0,
        left,
        down,
        right,
        center,
        None
    };
    pressBtnType pressedBtn{pressBtnType::None};
};

#endif // DISCBUTTONGRAPHICSPIXMAPITEM_H

#include "discbuttongraphicspixmapitem.h"
#include <QGraphicsScene>
#include <QDebug>
#include <QPainter>
#include <QStyleOptionGraphicsItem>
#include <QGraphicsSceneMouseEvent>
#include <math.h>

const qreal g_cResizePos[] = {9, 6, 3};

DiscButtonGraphicsPixmapItem::DiscButtonGraphicsPixmapItem(QString uuid, QGraphicsItem *parent)
    :QGraphicsObject(parent)
{
    setAcceptHoverEvents(true);
    setFlag(QGraphicsItem::ItemIsMovable);
    setFlag(QGraphicsItem::ItemSendsScenePositionChanges);//图形项可发送位置变化信号
    setFlag(QGraphicsItem::ItemIsSelectable);
    setFlag(QGraphicsItem::ItemIsFocusable);
    this->uuid = uuid;
    this->itemSize = QSizeF(100,100);
    isResizing = false;
    setZValue(1);
}

QRectF DiscButtonGraphicsPixmapItem::boundingRect() const
{
    return  QRectF(0, 0, itemSize.width() + 10, itemSize.height() + 10);
}

bool DiscButtonGraphicsPixmapItem::isPointInCir(const QPoint & point,const QRect & rect)//判断点是否在圆范围内
{
    const QPoint & centerPoint = rect.center();
    int x = point.x() - centerPoint.x();
    int y = point.y() - centerPoint.y();
    if(sqrt(pow(x,2) + pow(y,2)) <= static_cast<double>(rect.width() / 2))
    {
        return true;
    }
    return false;
}

void DiscButtonGraphicsPixmapItem::mousePressEvent(QGraphicsSceneMouseEvent *event)
{
    if(event->button() == Qt::LeftButton)
    {
        if(IsInResizeArea(event->pos()))
            isResizing = true;

        QGraphicsObject::mousePressEvent(event);
        QPoint point = event->pos().toPoint();
        if(isPointInCir(point,drawRect.toRect()))
        {
            if(isPointInCir(point,centerCircularRect.toRect()))
            {
                pressedBtn = pressBtnType::center;
            }
            else
            {
                QPoint centerPoint = drawRect.toRect().center();
                double angle = atan2(point.y()-centerPoint.y(),point.x()-centerPoint.x()); //两点之间的角度（弧度）
                angle = -angle*(180 / 3.1415926); //0°~180° - -180°~0°
                if(angle < 0.0)
                {
                    angle = 360.0 - abs(angle);
                }
                if(angle < 45.0 || angle > 315.0)
                {
                    pressedBtn = pressBtnType::right;
                }
                else if(angle >= 45.0 && angle < 135.0)
                {
                    pressedBtn = pressBtnType::up;
                }
                else if(angle >= 135.0 && angle < 225.0)
                {
                    pressedBtn = pressBtnType::left;
                }
                else if(angle >= 225.0 && angle < 315.0)
                {
                    pressedBtn = pressBtnType::down;
                }
            }
            update();
        }
        return;
    }
    else if(event->button() == Qt::RightButton)
    {
        return;
    }
    return QGraphicsObject::mousePressEvent(event);
}

void DiscButtonGraphicsPixmapItem::mouseReleaseEvent(QGraphicsSceneMouseEvent* event)
{
    if(pressedBtn != pressBtnType::None)
    {
        pressedBtn = pressBtnType::None;
        update();
    }

    if (event->button() == Qt::LeftButton && isResizing)
        isResizing = false;
    else
        QGraphicsObject::mouseReleaseEvent(event);
}

QVariant DiscButtonGraphicsPixmapItem::itemChange(GraphicsItemChange change, const QVariant &value)
{
    if ((change == ItemPositionChange || change == ItemPositionHasChanged) && scene()) // 控件发生移动
    {
        QPointF newPos = value.toPointF();
        QRectF rect(0, 0, scene()->width(), scene()->height());
        if (!rect.contains(newPos))//左上角
        {
            newPos.setX(qMin(rect.width(), qMax(newPos.x(), 0.0)));
            newPos.setY(qMin(rect.height(), qMax(newPos.y(), 0.0)));

//            newPos.setX(qMin(rect.right(), qMax(newPos.x(), rect.left())));
//            newPos.setY(qMin(rect.bottom(), qMax(newPos.y(), rect.top())));
            return newPos;
        }

        QRectF thisRectF = boundingRect();
        QPointF nowPos = QPointF(newPos.x() + thisRectF.width(),newPos.y());
        if(!rect.contains(nowPos))//右上角
        {
            newPos.setX(rect.width() - thisRectF.width());
            this->setPos(newPos);
            return newPos;
        }

        nowPos = QPointF(newPos.x(),newPos.y() + thisRectF.height());
        if(!rect.contains(nowPos))//左下角
        {
            newPos.setY(rect.height() - thisRectF.height());
            this->setPos(newPos);
            return newPos;
        }
    }
    return QGraphicsItem::itemChange(change, value);
}

QPainterPath DiscButtonGraphicsPixmapItem::gradientArc(double startAngle, double angleLength, double arcHeight)
{
    QPainterPath path;
    path.moveTo(drawRect.center());
    path.arcTo(drawRect, startAngle, angleLength);

    QPainterPath subPath;
    subPath.addEllipse(drawRect.adjusted(arcHeight, arcHeight, -arcHeight, -arcHeight));

    // path为扇形 subPath为椭圆
    path -= subPath;
    return path;
}

void DiscButtonGraphicsPixmapItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    Q_UNUSED(widget);
    painter->save();
    painter->setRenderHint(QPainter::Antialiasing,true);
    painter->setRenderHint(QPainter::SmoothPixmapTransform,true);
    painter->setRenderHint(QPainter::TextAntialiasing,true);

    QRectF thisRectF = boundingRect();

    if(option->state & QStyle::State_Selected)
    {
        painter->setPen(QColor("#D8D8D8"));
        painter->drawRect(thisRectF);
        setZValue(2);
    }
    else
    {
        setZValue(1);
        painter->fillRect(thisRectF, QBrush(Qt::transparent));
    }

    QPointF centerPoint = thisRectF.center();

    painter->save();
    painter->setPen(QColor("#222222"));
    painter->setBrush(QColor("#EAEAEA"));
    double radius = (std::min(thisRectF.width(),thisRectF.height()) - 10 * 2 ) / 2;
    drawRect = QRectF(centerPoint.x()-radius, centerPoint.y()-radius, radius*2, radius*2);
    double arcHeight = radius / 2;

    fanShaped[0] = gradientArc(45.0,  90.0, arcHeight);//上
    fanShaped[1] = gradientArc(135.0, 90.0, arcHeight);//左
    fanShaped[2] = gradientArc(225.0, 90.0, arcHeight);//下
    fanShaped[3] = gradientArc(315.0, 90.0, arcHeight);//右

    for (int i = 0;i < 4;++i)
    {
        painter->drawPath(fanShaped[i]);
    }
    painter->restore();

    centerCircularRect = QRectF(centerPoint.x() - (radius / 2), centerPoint.y() - (radius / 2), radius, radius).adjusted(2,2,-2,-2);
    painter->save();
    painter->setPen(Qt::transparent);
    painter->setBrush(QColor("#EAEAEA"));
    painter->drawEllipse(centerCircularRect);
    painter->restore();

    //绘制文字
    //左
    painter->save();
    QRectF textRect = QRectF(drawRect.x(),centerCircularRect.y(),radius / 2,radius);
    QPen p(Qt::SolidLine);
    p.setColor("#000000");
    p.setWidth(2);
    painter->setPen(p);
    QFont font = painter->font();
    font.setPixelSize(24);
    painter->setFont(font);
    painter->drawText(textRect, Qt::AlignCenter, "〈");//在此区域的中间位置绘制文字 〉

    //上
    textRect = QRectF(centerCircularRect.x(),drawRect.y(),radius,radius / 2);
    painter->drawText(textRect, Qt::AlignCenter, "︿");

    //右
    textRect = QRectF(centerCircularRect.topRight().x(),centerCircularRect.topRight().y(),radius / 2,radius);
    painter->drawText(textRect, Qt::AlignCenter, "〉");

    //下
    textRect = QRectF(centerCircularRect.bottomLeft().x(),centerCircularRect.bottomLeft().y(),radius,radius / 2);
    painter->drawText(textRect, Qt::AlignCenter, "﹀");

    painter->drawText(centerCircularRect, Qt::AlignCenter, "OK");
    painter->restore();

    if(pressedBtn != pressBtnType::None)
    {
        painter->save();
        QColor slightlyOpaqueBlack(0, 0, 0, 63);
        painter->setBrush(slightlyOpaqueBlack);
        painter->setPen(Qt::transparent);
        if(pressedBtn == pressBtnType::center)
        {
            painter->drawEllipse(centerCircularRect);
        }
        else
        {
            int index = -1;
            index = static_cast<int>(pressedBtn);
            if(index >= 0)
            {
                painter->drawPath(fanShaped[index]);
            }
        }
        painter->restore();
    }

    if(option->state & QStyle::State_Selected)
    {
        qreal w = thisRectF.width();
        qreal h = thisRectF.height();
        painter->setPen(Qt::red);
        for (int i = 0; i < 3; ++i)//三角形
            painter->drawLine(static_cast<int>(w - g_cResizePos[i]) , static_cast<int>(h), static_cast<int>(w), static_cast<int>(h - g_cResizePos[i]));
    }

    painter->restore();
}

void DiscButtonGraphicsPixmapItem::hoverMoveEvent(QGraphicsSceneHoverEvent* event)
{
    if (isResizing || (IsInResizeArea(event->pos()) && isSelected()))
        setCursor(Qt::SizeFDiagCursor);
    else
        setCursor(Qt::ArrowCursor);

    QGraphicsObject::hoverMoveEvent(event);
}

void DiscButtonGraphicsPixmapItem::mouseMoveEvent(QGraphicsSceneMouseEvent* event)
{
    if (isResizing)
    {
        qreal w = event->pos().x();
        qreal h = event->pos().y();
        if (w > 100)
            itemSize.setWidth(w);
        if (h > 100)
            itemSize.setHeight(h);
        prepareGeometryChange();
    }
    else
    {
        QGraphicsObject::mouseMoveEvent(event);
    }
}

bool DiscButtonGraphicsPixmapItem::IsInResizeArea(const QPointF& pos)
{
    return (pos.x() - itemSize.width() + g_cResizePos[0]) > (itemSize.height() - pos.y());
}

设计图：

大圆的半径是中间小圆的2倍。

绘制文字的位置：

鼠标按下时根据按下位置与中心点的坐标确定这两点的水平夹角，再根据夹角的大小确定按的是哪个按钮：

绘制扇形：

QPainterPath DiscButtonGraphicsPixmapItem::gradientArc(int startAngle, int angleLength, int arcHeight)
{
    QPainterPath path;
    path.moveTo(drawRect.center());
    path.arcTo(drawRect, startAngle, angleLength);

    QPainterPath subPath;
    subPath.addEllipse(drawRect.adjusted(arcHeight, arcHeight, -arcHeight, -arcHeight));

    // path为扇形 subPath为椭圆
    path -= subPath;
    return path;
}

其中：

    QPainterPath path;
    path.moveTo(drawRect.center());
    path.arcTo(drawRect, startAngle, angleLength);


    QPainterPath subPath;
    subPath.addEllipse(drawRect.adjusted(arcHeight, arcHeight, -arcHeight, -arcHeight));


    path -= subPath;

QWidget版本的：QT绘图：遥控器圆形按钮控件 

Qt之自绘遥控器圆形主控按钮
草上爬的博客
03-14 8948
Qt之自绘遥控器圆形主控按钮，云台的控制器也是这个样子的，其实贴图也能做，但是没自绘灵活。
Qt图形视图框架：QGraphicsView使用详解
最新发布
MusicScore的博客
07-08 897
QGraphicsView 是 Qt 图形视图框架中的一个核心组件，它与 QGraphicsScene 和 QGraphicsItem 一起协同工作。：场景类，管理所有的图形元素（QGraphicsItem）。：图形项类，表示具体的图形元素，可以是矩形、椭圆、线条、图片等。：视图类，用于在窗口中展示场景中的内容。通过这种分离模型，Qt 的图形视图框架实现了场景与视图的解耦，提供了灵活的图形展示和交互方式。我们可以通过继承 QGraphicsItem 类来创建自定义图形项。
Qt编写自定义控件：遥控器圆形按钮控件
友善啊，朋友的博客
12-30 3865
根据QT图形视图框架：自定义遥控器圆形按钮图形项改的QWidget版本，原理一样。 效果： 代码： #ifndef WIDGET_H #define WIDGET_H #include <QWidget> QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAMESPACE class Widget : public QWidget { Q_OBJECT public: Widget(QWidge
QT小控件-遥控按钮
博咯的博客
11-10 1362
QT小控件-遥控按钮前言二、使用步骤1.QT使用自定义控件2.程序如下：3.使用说明总结 前言 一共两种遥控控件，滑动式和点触式。 滑动式按钮 点触式按钮 二、使用步骤 1.QT使用自定义控件 创建一个基于MainWindows的UI工程，将遥控控件button文件放到工程所在目录中 在工程管理文件(.pro文件)中添加 include(button/wbcontrolbutton2.pri) 打开ui文件，拉取一个widget控件，并提升类为相应的类名 2.程序如下： wbcon
QT的自绘制按钮
DreamXY12的博客
07-05 3135
QT自绘制按钮
Qt下 圆形按钮的绘制
热门推荐
Mr.Sugarcane
01-28 1万+
关于Qt下绘制按钮的文章不少，这里简单介绍一个怎么绘制圆形⭕️的按钮并在点击时候改变颜色的方法。先上图，如下：==》1 圆形按钮初始状态（未被点击且鼠标未移动到按钮上）   ==》2 当鼠标移动到按钮上时的状态==》3、点击圆形按钮时的状态其他的不多说了，直接上代码吧，具体细节请代码中的注释信息： #ifndef MAINWINDOW_H #define MAINWINDOW_H #include...
Qt图形视图框架详解
06-09
介绍Qt中的Graphics View Framework，涉及View、Scene、Item的关系，如何自定义QGraphicsItem、处理Item之间的关联、如何布局及定义自己的布局Item、如何变幻Item、如何应用动画、如何处理拖放、如何给Item应用图形...
QT图形视图框架(QGraphicsView)绘图并调用libusb通讯
11-15
通过Qt的图形视图框架进行2D绘图并调用libusb进行通讯 软件架构 软件主要由两部分组成： 1、libusb的调用和使用； 2、qt图形视图框架的基本使用。 安装教程 使用QT打开工程文件； 修改.pro文件中的库路径； 设置...
Qt 图形视图 /基于Qt示例DiagramScene解读图形视图框架
river.qu
03-15 1946
本文基于对 Qt 图形视图框架 DiagramScene 示例程序的研习，快速上手图像视图框架的使用和窥探图形视图框架的运作原理。文中通过帮助文档了解了示例程序的功能背景，分析了其设计结构，然后通过对示例程序的实际操作，感受其提供的功能，并以一个软件设计开发人员的角度来审视，自己会如何设计实现这些可触及的功能，由浅入深，向图形视图框架的大院又迈进一步。
qt图形框架基础归纳.rar_QT_QT 图形处理_qt 视图框架_图形_图形 qt
09-24
QT的图形框架主要由几个核心组件构成：场景（QGraphicsScene）、图形图项（QGraphicsItem）和视图（QGraphicsView）。这些组件协同工作，创建出可交互的图形界面。 - 场景（QGraphicsScene）：它是一个二维绘图区域...
qt5.1实现的异形按钮(适应图片的形状)
08-01
qt5.1开发环境，实现了按钮的形状根据图片的外观来展示，美观很多。
Qt自定义/自绘按钮类
12-06
QT 4.7.4自定义按钮button，按钮状态有：正常状态，鼠标移动状态，鼠标按下状态，鼠标释放状态暂定为与正常状态相同。可以设置按钮上文本或不显示文本，按钮自适应图片大小或图片自适应按钮大小，使能/禁用按钮等操作。如果安装了QT for VS2008也可以直接使用VS2008打开，否则使用Qt crater打开。
QT自绘开关按钮
02-11
QT自绘开关按钮，里边带预览图！手机上那种左右滑动开关按钮
Qt自定义/自绘按钮类(纯代码实现)
03-11
QT 4.7.4自定义按钮button，按钮状态有：正常状态，鼠标移动状态，鼠标按下状态，鼠标释放状态暂定为与正常状态相同。可以设置按钮上文本或不显示文本，按钮自适应图片大小或图片自适应按钮大小，使能/禁用按钮等操作。如果安装了QT for VS2008也可以直接使用VS2008打开，否则使用Qt crater打开。
基于QT的3D圆盘旋钮
06-06
基于QT的3D圆盘旋钮，界面类似于圆盘旋钮，带有角度刻度显示，具有3D效果
Qt实现圆形按钮的绘制（C/C++）
HackQuestR的博客
09-13 789
通过自定义QWidget类并重写绘图事件，我们可以实现各种自定义外观的圆形按钮。在本文中，我们将讨论如何使用Qt框架以C++语言实现绘制圆形按钮的功能。我们将通过自定义QWidget类来创建一个圆形按钮，并使用Qt的绘图功能来绘制按钮的外观。在项目中创建一个新的C++类，我们将其命名为CircleButton。CircleButton类将从QWidget类继承，并重写绘图事件以实现自定义的按钮外观。使用Qt Creator或任何其他喜欢的IDE，创建一个新的Qt Widgets项目。
Qt实现不规则按钮之自绘圆盘式按钮
前行之路还需前行
01-21 1万+
一、简述 在上一篇文章中我们讲述了如何实现不规则按钮（ Qt简述如何实现不规则按钮），其中提到了另外一种方法就是自绘，今天就此谈一谈如何自绘实现一个圆盘式的按钮。下面先看一张效果图。 二、代码之路 其实实现很简单，就是通过Qt的QPainterPath来实现圆弧式按钮的绘制，然后通过鼠标事件实现点击效果及点击信号的发送。因为正常QPushButton或者QToolButton是自己发
通过 Qt 样式表实现圆形按钮
qq_33682763的博客
03-13 1万+
通过Qt 的样式表实现圆形按钮，其也可以实现圆角按钮，当然也可以使用其他的方式，比如说，通过派生按钮类使用绘图事件，进行一个图形的绘制，或者是通过自定义一个类，通过信号与槽的机制与绘图事件的配合也能实现！当然每种方法都各有千秋，各有优点，在这里将使用不破坏类机制的方式进行对按钮UI的圆型或者圆角矩形的绘制！ 核心代码： #include “widget.h” #include “ui_wid...
Qt设置按钮为圆形
weixin_30341745的博客
07-31 1万+
通过Qt 的样式表实现圆形按钮，其也可以实现圆角按钮，当然也可以使用其他的方式，比如说，通过派生按钮类使用绘图事件，进行一个图形的绘制，或者是通过自定义一个类，通过信号与槽的机制与绘图事件的配合也能实现！当然每种方法都各有千秋，各有优点，在这里将使用不破坏类机制的方式进行对按钮UI的圆型或者圆角矩形的绘制！ 核心代码：#include “widget.h”#incl...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值