QT小控件-遥控按钮

前言

一共两种遥控控件,滑动式和点触式。

滑动式遥控滑动式按钮 点触式遥控点触式按钮

二、使用步骤

1.QT使用自定义控件

  1. 创建一个基于MainWindows的UI工程,将遥控控件button文件放到工程所在目录中

  2. 在工程管理文件(.pro文件)中添加 include(button/wbcontrolbutton2.pri)
    在这里插入图片描述

  3. 打开ui文件,拉取一个widget控件,并提升类为相应的类名
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

2.程序如下:

在这里插入图片描述
wbcontrolbutton2.pri:

INCLUDEPATH += $$PWD
HEADERS += button(所在目录)/wbcontrolbutton2.h
SOURCES += button(所在目录)/wbcontrolbutton2.cpp

wbcontrolbutton2.h:

#ifndef WBCONTROLBUTTON2_H
#define WBCONTROLBUTTON2_H

#include <QWidget>
#include <math.h>
#include <QPainter>
#include <QtCore>
#include <QFontMetrics>
#include<QPoint>
#include<Qt>
#include<QMouseEvent>
#include <QDebug>
class WBcontrolbutton2 : public QWidget
{
    Q_OBJECT

public:
    WBcontrolbutton2(QWidget *parent = 0);
    void setcolorarc2(QColor rarc2); //中心圆渐变色起点颜色
    void setcolorlips(QColor lips);//圆的终点颜色
    void setcolorpointer(QColor pointer);//指针颜色
    void setcolorpointer2(QColor pointer);//指针颜色
signals:
    void Go_Diection(int x);  //1上,2左,3下,4右,5停止
private:
    QColor colorarc2;//圆渐变色起点颜色
    QColor colorelips;//圆渐变色终点颜色及圆轮廓的颜色
    QColor colorpointer;//指针颜色
    QColor colorpointer2;//指针颜色(鼠标按下后的颜色)
    QPen pen;//线
    QBrush brush;//刷子
    QRect rect;//视口
    int x, y; //圆边上的坐标,执行wbcircleEquation()改变x,y
    int pointx,pointy;//鼠标按下坐标
protected:
    void paintEvent(QPaintEvent *);
//    void mouseMoveEvent(QMouseEvent *event);
    void mouseReleaseEvent(QMouseEvent *);
    void mousePressEvent(QMouseEvent *event);
    void wbcircleEquation(int r, double j); //根据角度,获取圆边上 点的坐标
    void wbdrawEllips(QPainter *painter);//画圆
    void wbdrawPointer(QPainter *painter, int x1,int y1, int x2,int y2, int x3, int y3, QColor colorpainter);//画指针(三角)
};

#endif // WBCONTROLBUTTON2_H

wbcontrolbutton2.cpp:

#include "wbcontrolbutton2.h"

WBcontrolbutton2::WBcontrolbutton2(QWidget *parent) :
    QWidget(parent)
{
    colorarc2 = Qt::white;//圆渐变色起点颜色
    colorelips = Qt::black;//圆渐变色终点颜色及圆轮廓的颜色
    colorpointer = Qt::blue;//指针颜色
    colorpointer2 = Qt::red;//指针颜色(鼠标按下后的颜色)
    pointx = 0;
    pointy = 0;
    this->resize(500,500);
    this->repaint();
}
void WBcontrolbutton2::wbcircleEquation(int r ,double j)//根据x坐标获得圆的y坐标,sign判断y的正负性
{
    double val = 3.14159265 / 180;
    if (j<=270 && j>180)
    {
        x = -int(r*fabs(cos(val*j)));
        y = int(r*fabs(sin(val*j)));
    }
    else if (j<=180 && j>90)
    {
        x = -int(r*fabs(cos(val*j)));
        y = -int(r*fabs(sin(val*j)));
    }
    else if (j<=90 && j>0)
    {
        x = int(r*fabs(cos(val*j)));
        y = -int(r*fabs(sin(val*j)));
    }
    else
    {
        x = int(r*fabs(cos(val*j)));
        y = int(r*fabs(sin(val*j)));
    }
}
void WBcontrolbutton2::wbdrawEllips(QPainter *painter)//画圆
{
    pen = QPen();
    pen.setWidth(2);//25
    pen.setColor(colorelips);
    pen.setStyle(Qt::SolidLine);
    pen.setCapStyle(Qt::RoundCap);
    pen.setJoinStyle(Qt::BevelJoin);
    painter->setPen(pen);
    rect.setRect(-200,-200,400,400);
    QRadialGradient radial = QRadialGradient(0,0,200,0,0);
    radial.setColorAt(0,colorarc2);
    radial.setColorAt(1,colorelips);
    painter->save();
    painter->translate(250,250);
    painter->setBrush(radial);
    painter->drawEllipse(rect);
    painter->restore();
}
void WBcontrolbutton2::wbdrawPointer(QPainter *painter,int x1,int y1, int x2,int y2, int x3, int y3, QColor colorpainter)//画指针
{
    pen = QPen();
    pen.setWidth(1);//25
    pen.setColor(colorpainter);
    pen.setStyle(Qt::SolidLine);
    pen.setCapStyle(Qt::RoundCap);
    pen.setJoinStyle(Qt::BevelJoin);
    painter->setPen(pen);
    brush = QBrush();
    brush.setColor(colorpainter);
    brush.setStyle(Qt::SolidPattern);
    painter->setBrush(brush);
    painter->save();
    painter->translate(250,250);
    painter->drawPolygon(QPolygon({QPoint(x1,y1),QPoint(x2,y2),QPoint(x3,y3)}));
    painter->restore();
}
void WBcontrolbutton2::paintEvent(QPaintEvent *)
{
    QPainter wbpainter(this);
    wbpainter.setRenderHint(QPainter::Antialiasing);
    wbpainter.setRenderHint(QPainter::TextAntialiasing);
    rect = QRect(0,0,this->width(),this->height());
    wbpainter.setViewport(rect);
    wbpainter.setWindow(0,0,500,500);
    this->wbdrawEllips(&wbpainter);
    for (int i=0;i<4;i++)
    {
        int x1,x2,x3,y1,y2,y3;
        this->wbcircleEquation(150,i*90);
        x1= x;
        y1 = y;
        this->wbcircleEquation(100,i*90-30);
        x2= x;
        y2 = y;
        this->wbcircleEquation(100,i*90+30);
        x3= x;
        y3 = y;
        this->wbdrawPointer(&wbpainter,x1,y1,x2,y2,x3,y3,colorpointer);
    }
    int area_x = this->width()/3;
    int area_y = this->height()/3;
    if(pointx>=area_x&&pointy<=area_y&&pointx<area_x*2&&pointy>0) //上
    {
        int x1,x2,x3,y1,y2,y3;
        this->wbcircleEquation(150,90);
        x1= x;
        y1 = y;
        this->wbcircleEquation(100,90-30);
        x2= x;
        y2 = y;
        this->wbcircleEquation(100,90+30);
        x3= x;
        y3 = y;
        this->wbdrawPointer(&wbpainter,x1,y1,x2,y2,x3,y3,colorpointer2);
        emit(Go_Diection(1));
    }
    else if(pointx>=0&&pointy>=area_y&&pointx<area_x&&pointy<area_y*2) //左
    {
        int x1,x2,x3,y1,y2,y3;
        this->wbcircleEquation(150,2*90);
        x1= x;
        y1 = y;
        this->wbcircleEquation(100,2*90-30);
        x2= x;
        y2 = y;
        this->wbcircleEquation(100,2*90+30);
        x3= x;
        y3 = y;
        this->wbdrawPointer(&wbpainter,x1,y1,x2,y2,x3,y3,colorpointer2);
        emit(Go_Diection(2));
    }
    else if(pointx>area_x&&pointy>area_y*2&&pointx<area_x*2&&pointy<area_y*3) //下
    {
        int x1,x2,x3,y1,y2,y3;
        this->wbcircleEquation(150,3*90);
        x1= x;
        y1 = y;
        this->wbcircleEquation(100,3*90-30);
        x2= x;
        y2 = y;
        this->wbcircleEquation(100,3*90+30);
        x3= x;
        y3 = y;
        this->wbdrawPointer(&wbpainter,x1,y1,x2,y2,x3,y3,colorpointer2);
        emit(Go_Diection(3));
    }
    else if(pointx>area_x*2&&pointy>area_y&&pointx<area_x*3&&pointy<area_y*2) //右
    {
        int x1,x2,x3,y1,y2,y3;
        this->wbcircleEquation(150,0);
        x1= x;
        y1 = y;
        this->wbcircleEquation(100,-30);
        x2= x;
        y2 = y;
        this->wbcircleEquation(100,30);
        x3= x;
        y3 = y;
        this->wbdrawPointer(&wbpainter,x1,y1,x2,y2,x3,y3,colorpointer2);
        emit(Go_Diection(4));
    }
}

void WBcontrolbutton2::mousePressEvent(QMouseEvent *event)
{
    QPoint point;
    if (event->button() == Qt::LeftButton)
    {
        point = event->pos();
        pointx = point.x();
        pointy = point.y();
        this->repaint();

    }
}
void WBcontrolbutton2::mouseReleaseEvent(QMouseEvent *)
{
    pointx = 0;
    pointy = 0;
    this->repaint();
    emit(Go_Diection(5));
}
//接口函数
void WBcontrolbutton2::setcolorarc2(QColor rarc2) //中心圆渐变色起点颜色
{
    colorarc2 = rarc2;
    this->repaint();
}
void WBcontrolbutton2::setcolorlips(QColor lips)//圆的终点颜色
{
    colorelips = lips;
    this->repaint();
}
void WBcontrolbutton2::setcolorpointer(QColor pointer)//指针颜色
{
    colorpointer = pointer;
    this->repaint();
}
void WBcontrolbutton2::setcolorpointer2(QColor pointer)//指针颜色
{
    colorpointer2 = pointer;
    this->repaint();
}

3.使用说明

按钮
制作人:博咯
仅限学习和交流之用。
void setcolorarc2(QColor rarc2); //中心圆渐变色起点颜色
void setcolorlips(QColor lips);//圆的终点颜色
void setcolorpointer(QColor pointer);//指针颜色
void setcolorpointer2(QColor pointer);//指针颜色
signals:
void Go_Diection(int x); //1上,2左,3下,4右,5停止
鼠标左键按下三角符号,释放为停止

总结

该按钮主要通过QPainter进行绘制,可能有沉余代码,可以更加简洁,谢谢大家点赞!
文件下载:https://download.csdn.net/download/qq_39641107/39662590
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值