QT实现一个摇杆手柄

在智能小车的控制里，最好用的控制方式还是手柄控制，但是手柄的价格又相对较贵，今天就给大家讲解如何只用Qt实现一个摇杆手柄；该软件摇杆手柄支持固定方向单次点击控制，也支持组合方向滑动控制，并且滑动控制下会显示当前滑动位置的X轴数据和Y轴数据，具体的操作演示，大家可以查看文章后面的功能演示视频，可以更直观的了解该手柄的功能。下面主要对如何实现的进行讲解。

第一步：需要创建一个Qt工程，这步就跳过了

第二步：在ui文件中添加几个控件

第三步：编写一个类（CustomBox）,该类则是手柄控制的核心

#include "custombox.h"
#include 
#include 
#include 
#include 
#include 
#include 

CustomBox::CustomBox(QWidget* parent)
    : QWidget(parent)
    , m_radius(90)              //小圆半径
    , m_arcLength(80)           //小圆弧长
    , m_pressIndex(0)
    , m_enterIndex(0)
    , m_isMousePressed(false)
    , m_isMouseEntered(false)
    , mCurWorkRegion(QUADRANT_NO_DEFINE)
    , mCenterRound(QPoint(0,0))
    , SliderValue_t(0.2)
    , ControlMode(0) //0空闲模式，1自由模式，2固定模式
    , boxSendTimer(new QTimer)
{
    connect(boxSendTimer,SIGNAL(timeout()), this, SLOT(boxSendTimer_clicked()));
    m_bTextModeEn = false;
    this->setMouseTracking(true);
    mSectorColor = QColor(38,38,38);
    initButton();
    setWidgetStyle();
    setAxesVertical();
}

void CustomBox::setWidgetStyle(void)
{
    mSectorColor = QColor(255,0,0);
    colorSPL = QColor(32, 149, 216);
    colorBKG = QColor(41, 44, 50);

    colorSectorUp2 = QColor(68, 68, 68);
    colorSectorUp = QColor(60, 60, 60);
    colorSectorDown = QColor(22, 22, 22);

    colorbgGradient0 = QColor(24, 24, 24);
    colorbgGradient1 = QColor(53, 57, 63);

    colorExcircle0 = QColor(255, 0, 0);
    colorExcircle5 = QColor(255, 0, 0);
    colorExcircle9 = QColor(255, 0, 0);

    colorInnerCircle0 = QColor(45, 48, 56);
    colorInnerCircle9 = QColor(30, 32, 37);
    update();
}

void CustomBox::setRadiusValue(int radius)
{   //设置小圆半径
    m_radius = radius;
}

void CustomBox::setArcLength(int arcLength)
{   //设置小圆弧长
    m_arcLength = arcLength;
}

void CustomBox::drawRotatedText(QPainter *painter, float degrees, int x, int y, const QString &text)
{
    painter->save();                //保存原来坐标系统
    painter->translate(x, y);       //平移坐标原点到 x， y
    painter->rotate(degrees);       //坐标旋转degrees 度
    painter->drawText(0, 0, text);  //在原点绘制文本
    painter->restore();             //回复原来的坐标系统
}

void CustomBox::setAxesVertical(void)
{
    addArc(1,0,45, 90, mSectorColor);
    addArc(0,1,135, 90, mSectorColor);
    addArc(-1,0,225, 90, mSectorColor);
    addArc(0,-1,315, 90, mSectorColor);
    // 绘制中心圆;
    QPainterPath centerRoundPath;
    centerRoundPath.addEllipse(QPoint(0, 0), m_radius - m_arcLength+2, m_radius - m_arcLength+2);
    m_arcPathList.append(centerRoundPath);
    m_colorList.append(QColor(255, 255, 255));

    // 添加文字;
    QFont font;
    font.setFamily("Microsoft YaHei");
    font.setPointSize(14);
    update();
}

void CustomBox::initButton()
{
    addArc(1,0,90, 90, mSectorColor);
    addArc(1,0,45, 90, mSectorColor);
    addArc(0,1,135, 90, mSectorColor);
    addArc(-1,0,225, 90, mSectorColor);
    addArc(0,-1,315, 90, mSectorColor);

    // 绘制中心圆;
    QPainterPath centerRoundPath;
    centerRoundPath.addEllipse(QPoint(0, 0), m_radius - m_arcLength+2, m_radius - m_arcLength+2);
    m_arcPathList.append(centerRoundPath);
    m_colorList.append(QColor(255, 255, 255));
}

void CustomBox::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::HighQualityAntialiasing, true);
    painter.setPen(Qt::NoPen);
    painter.translate(width()>>1, height()>>1);
    //背景色，分割线颜色
    painter.setBrush(colorBKG);
    painter.drawEllipse(QPoint(0,0), m_radius+8, m_radius+8);

    QLinearGradient linearGradient(0, -m_radius-2, 0, m_radius+2);
    linearGradient.setColorAt(0.0, colorSectorUp2);
    linearGradient.setColorAt(0.9, colorSectorDown);
    painter.setBrush(QBrush(linearGradient));
    painter.drawEllipse(QPoint(0, 0), m_radius+2, m_radius+2);

    linearGradient = QLinearGradient(0, -m_radius, 0, m_radius);
    linearGradient.setColorAt(0.0, colorSectorUp);
    linearGradient.setColorAt(0.9, colorSectorDown);
    painter.setBrush(QBrush(linearGradient));
    painter.drawEllipse(QPoint(0, 0), m_radius, m_radius);

    QLinearGradient bgGradient(0, -20, 0, 20);
    bgGradient.setColorAt(0.0, colorbgGradient0);
    bgGradient.setColorAt(1.0, colorbgGradient1);
    painter.setBrush(bgGradient);
    painter.drawEllipse(QPoint(0, 0), m_radius - m_arcLength+4, m_radius - m_arcLength+4);

    //画分割线
    int count = 4;
    for(int i = 0; i < count;i++)
    {
        painter.save();
        painter.rotate(0+90 * i);
        painter.setPen(QPen(colorBKG, 3, Qt::SolidLine));
        painter.drawLine(0, m_radius - m_arcLength+5, 0,m_radius+5);
        painter.setPen(QPen(colorSPL, 3, Qt::SolidLine, Qt::RoundCap));
        painter.drawLine(0, m_radius - m_arcLength+6, 0, 40);
        painter.setPen(QPen(colorSPL, 3, Qt::SolidLine));
        painter.drawLine(0, 40, 0, m_radius - 5);
        painter.restore();
    }
    count = 8;
    for(int i = 0; i < count;i++)
    {
        painter.save();
        painter.rotate(45 * i);
        painter.setPen(QPen(QColor(255,0,0), 3, Qt::SolidLine));        //分割线底色轮廓
        painter.drawLine(0, m_radius - 20, 0,m_radius);                 //中间圆底色轮廓填充
        painter.restore();
    }
    for(int i = 0; i < count;i++)
    {
        painter.save();
        painter.rotate(45 * i);
        QPainterPath drawtriangle;  //单独画三角形
        drawtriangle.moveTo(-10, m_radius-10);//左下角，第一点坐标为（0,height）;
        drawtriangle.lineTo(0, m_radius+2);//第二点坐标为（width/2,width/2）
        drawtriangle.lineTo(10,  m_radius-10);//右下角，第三坐标（width, height），移动到右下角结束点,整体形成一个闭合路径
        if(mCurWorkRegion == QUADRANT_DOWN && i==0){
            painter.setBrush(Qt::green);   //填充绿色
        }else if(mCurWorkRegion == QUADRANT_DOWN_LEFT && i==1){
            painter.setBrush(Qt::green);   //填充绿色
        }else if(mCurWorkRegion == QUADRANT_LEFT && i==2){
            painter.setBrush(Qt::green);   //填充绿色
        }else if(mCurWorkRegion == QUADRANT_UP_LEFT && i==3){
            painter.setBrush(Qt::green);   //填充绿色
        }else if(mCurWorkRegion == QUADRANT_UP && i==4){
            painter.setBrush(Qt::green);   //填充绿色
        }else if(mCurWorkRegion == QUADRANT_UP_RIGHT && i==5){
            painter.setBrush(Qt::green);   //填充绿色
        }else if(mCurWorkRegion == QUADRANT_RIGHT && i==6){
            painter.setBrush(Qt::green);   //填充绿色
        }else if(mCurWorkRegion == QUADRANT_DOWN_RIGHT && i==7){
            painter.setBrush(Qt::green);   //填充绿色
        }else{
            painter.setBrush(QColor(128,128,128));   //填充绿色
        }
        painter.drawPath(drawtriangle);  //绘制出图形
        painter.restore();
    }
    linearGradient = QLinearGradient(0, mCenterRound.y() - m_radius + m_arcLength - 1, 0, mCenterRound.y()+m_radius - m_arcLength + 1);
    linearGradient.setColorAt(0.0, colorExcircle0);
    linearGradient.setColorAt(0.0, colorExcircle5);
    linearGradient.setColorAt(0.9, colorExcircle9);

    painter.setBrush(QBrush(linearGradient));//中间圆跟着移动
    painter.drawEllipse(mCenterRound, m_radius - m_arcLength , m_radius - m_arcLength );
    painter.setRenderHint(QPainter::SmoothPixmapTransform, true);

    //绘制占比线
    if(objPointValue.y()<0 && objPointValue.x()==0){    //后退占比线
        painter.save();
        QMatrix leftmatriy;
        leftmatriy.rotate(180);
        mDegreePixmap_y=mDegreePixmap_y.transformed(leftmatriy,Qt::SmoothTransformation);
        painter.drawPixmap(-30,30,60,30,mDegreePixmap_y);
        painter.restore();
        QFont font;
        font.setFamily("Microsoft YaHei");font.setPointSize(10);painter.setFont(font);painter.setPen(QColor(255,255,0));
        painter.save();painter.rotate(0);painter.drawText(-15, -20,"0.00");painter.restore();
        painter.save();painter.rotate(90);painter.drawText(-15, -20,showVel_xValue);painter.restore();
        painter.save();painter.rotate(0);painter.drawText(-15, 30,showAng_yValue);painter.restore();
        painter.save();painter.rotate(270);painter.drawText(-15, -20,"0.00");painter.restore();
    }
    if(objPointValue.y()<0 && objPointValue.x()<0){     //左后占比线
        painter.save();
        QMatrix leftmatrix;
        leftmatrix.rotate(270);
        mDegreePixmap_x=mDegreePixmap_x.transformed(leftmatrix,Qt::SmoothTransformation);
        painter.drawPixmap(-60,-30,30,60,mDegreePixmap_x);

        QMatrix leftmatriy;
        leftmatriy.rotate(180);
        mDegreePixmap_y=mDegreePixmap_y.transformed(leftmatriy,Qt::SmoothTransformation);
        painter.drawPixmap(-30,30,60,30,mDegreePixmap_y);painter.restore();
        QFont font;
        font.setFamily("Microsoft YaHei");font.setPointSize(10);painter.setFont(font);painter.setPen(QColor(255,255,0));
        painter.save();painter.rotate(0);painter.drawText(-15, -20,"0.00");painter.restore();
        painter.save();painter.rotate(90);painter.drawText(-15, -20,"0.00");painter.restore();
        painter.save();painter.rotate(0);painter.drawText(-15, 30,showAng_yValue);painter.restore();
        painter.save();painter.rotate(270);painter.drawText(-15, -20,showVel_xValue);painter.restore();
    }
    if(objPointValue.y()<0 && objPointValue.x()>0){     //右后占比线
        painter.save();
        QMatrix leftmatrix;
        leftmatrix.rotate(90);
        mDegreePixmap_x=mDegreePixmap_x.transformed(leftmatrix,Qt::SmoothTransformation);
        painter.drawPixmap(30,-30,30,60,mDegreePixmap_x);
        QMatrix leftmatriy;
        leftmatriy.rotate(180);
        mDegreePixmap_y=mDegreePixmap_y.transformed(leftmatriy,Qt::SmoothTransformation);
        painter.drawPixmap(-30,30,60,30,mDegreePixmap_y);painter.restore();
        QFont font;
        font.setFamily("Microsoft YaHei");font.setPointSize(10);painter.setFont(font);painter.setPen(QColor(255,255,0));
        painter.save();painter.rotate(0);painter.drawText(-15, -20,"0.00");painter.restore();
        painter.save();painter.rotate(90);painter.drawText(-15, -20,showVel_xValue);painter.restore();
        painter.save();painter.rotate(0);painter.drawText(-15, 30,showAng_yValue);painter.restore();
        painter.save();painter.rotate(270);painter.drawText(-15, -20,"0.00");painter.restore();
    }
    if(objPointValue.y()>0 && objPointValue.x()==0){    //前进占比线
        painter.save();
        QMatrix leftmatriy;
        leftmatriy.rotate(360);
        mDegreePixmap_y=mDegreePixmap_y.transformed(leftmatriy,Qt::SmoothTransformation);
        painter.drawPixmap(-30,-60,60,30,mDegreePixmap_y);painter.restore();
        QFont font;
        font.setFamily("Microsoft YaHei");font.setPointSize(10);painter.setFont(font);painter.setPen(QColor(255,255,0));
        painter.save();painter.rotate(0);painter.drawText(-15, -20,showAng_yValue);painter.restore();
        painter.save();painter.rotate(90);painter.drawText(-15, -20,"0.00");painter.restore();
        painter.save();painter.rotate(0);painter.drawText(-15, 30,"0.00");painter.restore();
        painter.save();painter.rotate(270);painter.drawText(-15, -20,"0.00");painter.restore();
    }
    if(objPointValue.y()>0 && objPointValue.x()<0){     //左前占比线
        painter.save();
        QMatrix leftmatrix;
        leftmatrix.rotate(270);
        mDegreePixmap_x=mDegreePixmap_x.transformed(leftmatrix,Qt::SmoothTransformation);
        painter.drawPixmap(-60,-30,30,60,mDegreePixmap_x);
        QMatrix leftmatriy;
        leftmatriy.rotate(360);
        mDegreePixmap_y=mDegreePixmap_y.transformed(leftmatriy,Qt::SmoothTransformation);
        painter.drawPixmap(-30,-60,60,30,mDegreePixmap_y);painter.restore();
        QFont font;
        font.setFamily("Microsoft YaHei");font.setPointSize(10);painter.setFont(font);painter.setPen(QColor(255,255,0));
        painter.save();painter.rotate(0);painter.drawText(-15, -20,showAng_yValue);painter.restore();
        painter.save();painter.rotate(90);painter.drawText(-15, -20,"0.00");painter.restore();
        painter.save();painter.rotate(0);painter.drawText(-15, 30,"0.00");painter.restore();
        painter.save();painter.rotate(270);painter.drawText(-15, -20,showVel_xValue);painter.restore();

    }
    if(objPointValue.y()>0 && objPointValue.x()>0){     //右前占比线
        painter.save();
        QMatrix leftmatrix;
        leftmatrix.rotate(90);
        mDegreePixmap_x=mDegreePixmap_x.transformed(leftmatrix,Qt::SmoothTransformation);
        painter.drawPixmap(30,-30,30,60,mDegreePixmap_x);
        QMatrix leftmatriy;
        leftmatriy.rotate(360);
        mDegreePixmap_y=mDegreePixmap_y.transformed(leftmatriy,Qt::SmoothTransformation);
        painter.drawPixmap(-30,-60,60,30,mDegreePixmap_y);painter.restore();
        QFont font;
        font.setFamily("Microsoft YaHei");font.setPointSize(10);painter.setFont(font);painter.setPen(QColor(255,255,0));
        painter.save();painter.rotate(0);painter.drawText(-15, -20,showAng_yValue);painter.restore();
        painter.save();painter.rotate(90);painter.drawText(-15, -20,showVel_xValue);painter.restore();
        painter.save();painter.rotate(0);painter.drawText(-15, 30,"0.00");painter.restore();
        painter.save();painter.rotate(270);painter.drawText(-15, -20,"0.00");painter.restore();
    }
    if(objPointValue.y()==0 && objPointValue.x()>0){    //右占比线
        painter.save();
        QMatrix leftmatrix;
        leftmatrix.rotate(90);
        mDegreePixmap_x=mDegreePixmap_x.transformed(leftmatrix,Qt::SmoothTransformation);
        painter.drawPixmap(30,-30,30,60,mDegreePixmap_x);painter.restore();
        QFont font;
        font.setFamily("Microsoft YaHei");font.setPointSize(10);painter.setFont(font);painter.setPen(QColor(255,255,0));
        painter.save();painter.rotate(0);painter.drawText(-15, -20,"0.00");painter.restore();
        painter.save();painter.rotate(90);painter.drawText(-15, -20,showVel_xValue);painter.restore();
        painter.save();painter.rotate(0);painter.drawText(-15, 30,"0.00");painter.restore();
        painter.save();painter.rotate(270);painter.drawText(-15, -20,"0.00");painter.restore();
    }
    if(objPointValue.y()==0 && objPointValue.x()<0){    //左占比线
        painter.save();
        QMatrix leftmatrix;
        leftmatrix.rotate(270);
        mDegreePixmap_x=mDegreePixmap_x.transformed(leftmatrix,Qt::SmoothTransformation);
        painter.drawPixmap(-60,-30,30,60,mDegreePixmap_x);painter.restore();
        QFont font;
        font.setFamily("Microsoft YaHei");font.setPointSize(10);painter.setFont(font);painter.setPen(QColor(255,255,0));
        painter.save();painter.rotate(0);painter.drawText(-15, -20,"0.00");painter.restore();
        painter.save();painter.rotate(90);painter.drawText(-15, -20,"0.00");painter.restore();
        painter.save();painter.rotate(0);painter.drawText(-15, 30,"0.00");painter.restore();
        painter.save();painter.rotate(270);painter.drawText(-15, -20,showVel_xValue);painter.restore();
    }
    if(!boxSendTimer->isActive()){
        boxSendTimer->start(20);
    }
}
//设置小圆路径
void CustomBox::addArc(int x, int y, int startAngle, int angleLength, QColor color)
{
    //绘制矩形 m_radius = 90
    //    QRectF(qreal left, qreal top, qreal width, qreal height);
    QRectF rect(-m_radius+x, -m_radius+y, m_radius * 2, m_radius * 2);
    // 设置扇形路径;
    QPainterPath path;
    path.arcTo(rect, startAngle, angleLength);
    QPainterPath subPath;
    // 设置小扇形路径;
    subPath.addEllipse(rect.adjusted(m_arcLength, m_arcLength, -m_arcLength, -m_arcLength));
    // 大扇形减去小扇形得到圆弧;
    path -= subPath;
    m_arcPathList.append(path);
    // 设置圆弧颜色
    QRadialGradient radialGradient;
    radialGradient.setCenter(0, 0);
    radialGradient.setRadius(m_radius);
    radialGradient.setColorAt(0, color);
    radialGradient.setColorAt(1.0, color);
    m_colorList.append(radialGradient);
}

void CustomBox::mousePressEvent(QMouseEvent *event)
{
    QPoint mousePressPoint = event->pos();
    QPoint translatePoint = mousePressPoint - QPoint(width() >> 1, height() >> 1);
//    qDebug()<<"translatePoint x:"<30 || abs(translatePoint.y())>30){
         ControlMode = 2;//固定模式
         if(abs(translatePoint.y())<100){
            emit signalBoxSlider(true);
         }
         if((translatePoint.y()<-70 && translatePoint.y()>-100) &&
            (translatePoint.x()>-15 && translatePoint.x()<15)){
            mCurWorkRegion = QUADRANT_UP;
//            qDebug("QUADRANT_UP");
         }else if((translatePoint.y()>70 && translatePoint.y()<100) &&
            (translatePoint.x()>-15 && translatePoint.x()<15)){
            mCurWorkRegion = QUADRANT_DOWN;
//            qDebug("QUADRANT_DOWN");
         }else if((translatePoint.y()>-15 && translatePoint.y()<15) &&
            (translatePoint.x()>70 && translatePoint.x()<100)){
            mCurWorkRegion = QUADRANT_RIGHT;
//            qDebug("QUADRANT_RIGHT");
         }else if((translatePoint.y()>-15 && translatePoint.y()<15) &&
            (translatePoint.x()<-70 && translatePoint.x()>-100)){
            mCurWorkRegion = QUADRANT_LEFT;
//            qDebug("QUADRANT_LEFT");
         }else if((translatePoint.y()<-30 && translatePoint.y()>-80) &&
            (translatePoint.x()>30 && translatePoint.x()<80)){
            mCurWorkRegion = QUADRANT_UP_RIGHT;
//            qDebug("QUADRANT_UP_RIGHT");
         }else if((translatePoint.y()<-30 && translatePoint.y()>-80) &&
            (translatePoint.x()<-30 && translatePoint.x()>-80)){
            mCurWorkRegion = QUADRANT_UP_LEFT;
//            qDebug("QUADRANT_UP_LEFT");
         }else if((translatePoint.y()>30 && translatePoint.y()<80) &&
            (translatePoint.x()>30 && translatePoint.x()<80)){
            mCurWorkRegion = QUADRANT_DOWN_RIGHT;
//            qDebug("QUADRANT_DOWN_RIGHT");
         }else if((translatePoint.y()>30 && translatePoint.y()<80) &&
            (translatePoint.x()<-30 && translatePoint.x()>-80)){
            mCurWorkRegion = QUADRANT_DOWN_LEFT;
//            qDebug("QUADRANT_DOWN_LEFT");
         }else{
             emit signalBoxSlider(false);
             mCurWorkRegion = QUADRANT_NO_DEFINE;
         }
         SetSliderValueFun(SliderValue_t);
    }else{
         ControlMode = 1;//自由模式
         emit signalBoxSlider(false);
         mCurWorkRegion = QUADRANT_NO_DEFINE;
    }
    for (int i = 0; i < m_arcPathList.count(); i++)
    {
        if (m_arcPathList[i].contains(translatePoint))
        {
            m_pressIndex = i;
            m_isMousePressed = true;
            update();
            emit signalButtonClicked(i);
            break;
        }
    }
}

void CustomBox::mouseReleaseEvent(QMouseEvent *event)
{
    Q_UNUSED(event);
    if (m_isMousePressed)
    {
        m_isMousePressed = false;
        mCenterRound = QPoint(0,0);
        mDegreePixmap_x = QPixmap(0,0);
        mDegreePixmap_y = QPixmap(0,0);
        if(ControlMode ==1){
            ControlMode=0;
        }
        objPointValue.setX(0);
        objPointValue.setY(0);
        if(ControlMode !=2){
            BoxData gB_QVar;
            QVariant eB_QVar;
            gB_QVar.BoxValueX = 0;
            gB_QVar.BoxValueY = 0;
            gB_QVar.BoxValueZ = 0;
            eB_QVar.setValue(gB_QVar);
            emit (signalBoxVelToUi(eB_QVar));
        }
        emit signalButtonReleased(m_pressIndex);
        update();
    }
}

void CustomBox::mouseMoveEvent(QMouseEvent *event)
{
    if(m_isMousePressed){
        mCenterRound = event->pos() - QPoint(width() >> 1, height() >> 1);
        if(mCenterRound.x()>m_radius)mCenterRound.setX(m_radius);
        if(mCenterRound.x()<-m_radius)mCenterRound.setX(-m_radius);
        if(mCenterRound.y()>m_radius)mCenterRound.setY(m_radius);
        if(mCenterRound.y()<-m_radius)mCenterRound.setY(-m_radius);
        objPointValue.setX(mCenterRound.x());
        objPointValue.setY(-mCenterRound.y());
        calcVel_xValue = (double)((-mCenterRound.y()*vel_x_MaxValue)/100.f);
        calcAng_yValue = (double)(mCenterRound.x()*ang_z_MaxValue/100.f);
        mDegreePixmap_x = getPixmap(abs(mCenterRound.x()));
        mDegreePixmap_y = getPixmap(abs(mCenterRound.y()));
        showVel_xValue = QString("").sprintf("%.2lf",fabs(calcAng_yValue));
        showAng_yValue = QString("").sprintf("%.2lf",fabs(calcVel_xValue));
//        qDebug("mCenterRound.x():%d mCenterRound.y():%d",abs(mCenterRound.x()),abs(mCenterRound.y()));
        update();
    }
}
/*************************************************
Function:       analysisAngle
Description:    获取当前鼠标的度数
Input:          x,y
Return:         int,当前鼠标的度数
*************************************************/
int CustomBox::analysisAngle(int x,int y)
{
    double angle;
    if(x == 0 && y > 0){
        angle =  90;
    }else if(x == 0 && y < 0){
        angle = 270;
    }
    else if(x >= 0 && y == 0){
        angle =  0;
    }
    else if(x < 0 && y == 0){
        angle = 180;
    }else{
        angle = atan2(qAbs(y),qAbs(x))/(2*acos(-1))*360;
        if(x < 0 && y > 0){
            angle = 180 - angle;
        }
        if(x < 0 && y < 0){
            angle += 180;
        }
        if(x > 0 && y< 0){
            angle = 360 - angle;
        }
    }
    return angle;
}

QPixmap CustomBox::getPixmap(const int ping)
{
    return getSignalPixmap(QColor(0x5,0x00c7,0xc7),getLineNum(ping));
}

QColor CustomBox::getColor(const int ping )
{
    if(ping<=10)
        return QColor(0xea,0x00,0x00);
    else if(ping<=20)
        return QColor(0xff,0x00,0x80);
    else if(ping<=30)
        return QColor(0xe8,0x00,0xe8);
    else if(ping<=40)
        return QColor(0xea,0xc1,0x00);
    else if(ping<=50)
        return QColor(0xe1,0xe1,0x00);
    else if(ping<=60)
        return QColor(0x9a,0xff,0x02);
    else if(ping<=70)
        return QColor(0x00,0xff,0xff);
    else if(ping<=80)
        return QColor(0x28,0x94,0xff);
    else
        return QColor(0x6a,0x6a,0xff);
}

int CustomBox::getLineNum(const int ping)
{
    if(ping<=20)
        return 1;
    else if(ping<=40)
        return 2;
    else if(ping<=60)
        return 3;
    else if(ping<=80)
        return 4;
    else
        return 5;
}

QPixmap CustomBox::getSignalPixmap(const QColor &color,const int linenum)//获取信号位图
{
    QPixmap pixmap(60,30);
    pixmap.fill(QColor(255,255,255,0));
    QPainter painter(&pixmap);
    painter.setRenderHint(QPainter::HighQualityAntialiasing, true);
    painter.setPen(QPen(color,2,Qt::SolidLine,Qt::RoundCap,Qt::RoundJoin));

    //30 - i* 5 ，是为了顶部不要被削掉
    for(int i=1,xpos=0;i<=linenum;++i,++xpos)
    {
        painter.drawArc(30 - i * 6, 30 - i * 5, i * 12, i * 10, 53 * 16, 37 * 2 * 16);
    }
    return pixmap;
}

void CustomBox::getSliderValueSlots(float value){
    switch(ControlMode){
        case 2:{
            SliderValue_t = value;
            if(!boxSendTimer->isActive()){
                boxSendTimer->start(100);
            }
        }break;
        default:
         break;
    }
}
void CustomBox::SetSliderValueFun(float value){
//    qDebug("SetSliderValueFun");
    BoxData gB_QVar;
    QVariant eB_QVar;
    switch(mCurWorkRegion){
        case QUADRANT_UP:{
            gB_QVar.BoxValueX = value;
            gB_QVar.BoxValueY = 0;
            gB_QVar.BoxValueZ = 0;
        }break;
        case QUADRANT_UP_LEFT:{
            gB_QVar.BoxValueX = value;
            gB_QVar.BoxValueY = 0;
            gB_QVar.BoxValueZ = value;
        }break;
        case QUADRANT_LEFT:{
            gB_QVar.BoxValueX = 0;
            gB_QVar.BoxValueY = 0;
            gB_QVar.BoxValueZ = value;
        }break;
        case QUADRANT_DOWN_LEFT:{
            gB_QVar.BoxValueX = -value;
            gB_QVar.BoxValueY = 0;
            gB_QVar.BoxValueZ = value;
        }break;
        case QUADRANT_DOWN:{
            gB_QVar.BoxValueX = -value;
            gB_QVar.BoxValueY = 0;
            gB_QVar.BoxValueZ = 0;
        }break;
        case QUADRANT_DOWN_RIGHT:{
            gB_QVar.BoxValueX = -value;
            gB_QVar.BoxValueY = 0;
            gB_QVar.BoxValueZ = -value;
        }break;
        case QUADRANT_RIGHT:{
            gB_QVar.BoxValueX = 0;
            gB_QVar.BoxValueY = 0;
            gB_QVar.BoxValueZ = -value;

        }break;
        case QUADRANT_UP_RIGHT:{
            gB_QVar.BoxValueX = value;
            gB_QVar.BoxValueY = 0;
            gB_QVar.BoxValueZ = -value;
        }break;
        case QUADRANT_NO_DEFINE:{
            gB_QVar.BoxValueX = 0;
            gB_QVar.BoxValueY = 0;
            gB_QVar.BoxValueZ = 0;
        }break;
    }
    eB_QVar.setValue(gB_QVar);
    emit (signalBoxVelToUi(eB_QVar));
}
void CustomBox::boxSendTimer_clicked()
{
    switch (ControlMode) {
    //自由模式
    case 1:{
        BoxData gB_QVar;
        QVariant eB_QVar;
        gB_QVar.BoxValueX = calcVel_xValue;
        gB_QVar.BoxValueY = 0;
        gB_QVar.BoxValueZ = -calcAng_yValue;
        eB_QVar.setValue(gB_QVar);
        emit (signalBoxVelToUi(eB_QVar));
    }break;
    //固定模式
    case 2:
        SetSliderValueFun(SliderValue_t);
    default:
        if(boxSendTimer->isActive()){
            boxSendTimer->stop();
        }
        break;
    }
}
void CustomBox::vel_x_MaxSlots(double value){
    vel_x_MaxValue = value;
}
void CustomBox::ang_z_MaxSlots(double value){
    ang_z_MaxValue = value;
}

第四步：在UI窗口对手柄界面进行提升为CustomBox类。

第五步：在界面逻辑处理部分则是需要添加串口收发功能和逻辑的处理即可完成手柄功能的编写

演示视频链接：https://www.bilibili.com/video/BV17d4y1N7tg/?vd_source=800b2cb231472d4e741784f506df469f