背景

    目前正在做云桌面，前面使用了QCursorPlot实现了二维图表，使用了QPropertyAnimation实现了按钮的抖动，现在需要一个动态显示空间的圆形效果图，如下图：

    用100张图刷也可以，不过太原始了，所以研究研究Qwt，想使用Qwt仪表盘来实现。

                                                                       

前后关联

    上一篇《Qt之Qwt初探（一）》我们介绍了扫盲了Qwt的官网图片示例的效果和代码提供示例的效果截图，   

    《Qt之Qwt初探（一）》：  javascript:void(0)/article/details/77852657

    本篇qwtDemo将实现下图的效果：

                                                             

    qwtDemo下载地址：javascript:void(0)

 

本人对于qwt仪表盘的理解

    Qwt的仪表盘分为三个部分，可分为“容器”，“表盘”,“指针”（名字是本人随便指定的，是否有专业的名次，请留言指正，谢谢！！！）。

1.“容器”部分QwtDial

    仪表盘所在的dialog，有了dialog才能在dialog上面设置背景，需要仪表盘的时候需要先new一个QwtDial对象，起的作用与容器类似，本次继承了QwtDial在其构造函数中，new了仪表盘表盘部分，new了指针部分，分别做好初始化后，设置到容器上，类似于给“容器”托管了，设置的关键如下图：

 

    	……
	//设置仪表盘背景到“容器”上
	setScaleDraw(_pScaleDraw);
	……
	//设置仪表盘指针到“容器”上
	setNeedle( needle );
        ……

2.仪表盘的表盘部分

    表盘部分都是QwtAbstractScaleDraw的子类，具体读者可以自行查阅qwt的帮助文件。

 

    _pScaleDraw=newQwtRoundScaleDraw();
       //刻度线和标值之间的距离，默认为4pixels
    //_pScaleDraw->setSpacing(16);
    //是否显示将所有刻度连接起来的中心圆
    _pScaleDraw->enableComponent(QwtAbstractScaleDraw::Backbone,true);
    //画线的宽度
//    _pScaleDraw->setPenWidth(15);
    //修改颜色
    QPalettepale=palette();
    //中间的背景
//    pale.setColor(QPalette::Foreground,Qt::red);
    //画线的颜色
    pale.setColor(QPalette::Text,Qt::black);
    setPalette(pale);
    //是否显示刻度线,下面可以不设置刻度线了
    _pScaleDraw->enableComponent(QwtAbstractScaleDraw::Ticks,false);
    //是否显示仪表盘刻度线周围的显示值
    _pScaleDraw->enableComponent(QwtAbstractScaleDraw::Labels,false);
    //非主刻度线非中间刻度其他小刻度沿指针方向的长度，默认显示刻度线
    _pScaleDraw->setTickLength(QwtScaleDiv::MinorTick,20);
    //主刻度线之间中间的刻度沿指针方向的长度，默认显示刻度线
    _pScaleDraw->setTickLength(QwtScaleDiv::MediumTick,20);
    //主刻度线沿指针方向的长度，默认显示刻度线
    _pScaleDraw->setTickLength(QwtScaleDiv::MajorTick,20);
    //设置仪表盘刻度层到主层上
    setScaleDraw(_pScaleDraw);
    //???目前不太理解效果
    setWrapping(false);
    //只读，如果只读则鼠标无法移动指针
    setReadOnly(false);
    //起始角度，从中心右边横轴为0°，瞬时钟计算角度
    setOrigin(270.0);
// 角度范围，设置的其实角度为相对0°，相对于起始角度可活动多少度
    // 设置范围0°，仍然有表盘，所以我们不显示
// 特别注意：我们使用动态控制表盘的刻度范围来实现空间的百分比效果，本Demo没有使用到指针
    if(_radius<0.01)
    {
        _pScaleDraw->enableComponent(QwtAbstractScaleDraw::Backbone,false);
    }else
    {
        _pScaleDraw->enableComponent(QwtAbstractScaleDraw::Backbone,true);
    }
    setScaleArc(0.0,0.0);
  

3.仪表盘的指针部分

    指针剪头分为多种，箭头类型的可实现一种颜色或者左右对阵与箭头中心显示两种颜色，实现的效果可参照Demo或者之前的该系列上一篇的博客，博客地址为：

《Qt之Qwt初探(一)》

    javascript:void(0)/article/details/77852657

    指针范例的代码如下图：

 

//    QwtDialSimpleNeedle*needle=newQwtDialSimpleNeedle(
//    QwtDialSimpleNeedle::Arrow,true,Qt::red,
//    QColor(Qt::gray).light(130));
    //设置仪表盘指针到容器上
//    setNeedle(needle);

 

实现步骤

1.   初始化仪表盘

    设置仪表盘的表盘，没有指针所以不设置（后面开发的过程中，发现qwt本身是无法实现我们要的效果，需要我们重新补充其他部分）。

    下面是继承了QwtDial的类的构造函数中的初始化代码：

 

MSpacePanel::MSpacePanel(QWidget*parent):
 QwtDial(parent),
    _radius(0.0)
{
    QPalettepa(palette());
    pa.setColor(QPalette::Foreground,Qt::black);
    pa.setColor(QPalette::Text,Qt::black);
    pa.setColor(QPalette::Background,Qt::black);
    //显示百分比的lable
    _pLabel=newQLabel(this);
    _pLabel->setPalette(pa);
    _pLabel->show();
        //显示百分比下面文字信息的lable   
        _pLabel2=newQLabel(this);
    _pLabel2->setPalette(pa);
    _pLabel2->show();
    _pScaleDraw=newQwtRoundScaleDraw();
    //刻度线和标值之间的距离，默认为4pixels
    //_pScaleDraw->setSpacing(16);
    //是否显示将所有刻度连接起来的中心圆
    _pScaleDraw->enableComponent(QwtAbstractScaleDraw::Backbone,true);
    //画线的宽度
//    _pScaleDraw->setPenWidth(15);
    //修改颜色
    QPalettepale=palette();
    //中间的背景
//    pale.setColor(QPalette::Foreground,Qt::red);
    //画线的颜色
    pale.setColor(QPalette::Text,Qt::black);
    setPalette(pale);
    //是否显示刻度线,下面可以不设置刻度线了
    _pScaleDraw->enableComponent(QwtAbstractScaleDraw::Ticks,false);
    //是否显示仪表盘刻度线周围的显示值
    _pScaleDraw->enableComponent(QwtAbstractScaleDraw::Labels,false);
    //非主刻度线非中间刻度其他小刻度沿指针方向的长度，默认显示刻度线
    _pScaleDraw->setTickLength(QwtScaleDiv::MinorTick,20);
    //主刻度线之间中间的刻度沿指针方向的长度，默认显示刻度线
    _pScaleDraw->setTickLength(QwtScaleDiv::MediumTick,20);
    //主刻度线沿指针方向的长度，默认显示刻度线
    _pScaleDraw->setTickLength(QwtScaleDiv::MajorTick,20);
    //设置仪表盘刻度层到主层上
    setScaleDraw(_pScaleDraw);
    //???目前不太理解效果
    setWrapping(false);
    //只读，如果只读则鼠标无法移动指针
    setReadOnly(false);
    //起始角度，从中心右边横轴为0°，瞬时钟计算角度
    setOrigin(270.0);
    //角度范围，设置的其实角度为相对0°，相对于起始角度可活动多少度
    //设置范围0°，仍然有表盘，所以我们不显示
    //特别注意：我们使用动态控制表盘的刻度范围来实现空间的百分比效果，本Demo没有使用到指针
    if(_radius<0.01)
    {
        _pScaleDraw->enableComponent(QwtAbstractScaleDraw::Backbone,false);
    }else
    {
        _pScaleDraw->enableComponent(QwtAbstractScaleDraw::Backbone,true);
    }
    setScaleArc(0.0,0.0);
    //注释掉指针
//    QwtDialSimpleNeedle*needle=newQwtDialSimpleNeedle(
//        QwtDialSimpleNeedle::Arrow,true,Qt::red,
//        QColor(Qt::gray).light(130));
    //设置仪表盘指针到容器上
    //    setNeedle(needle);
    _propertyAnimation.setTargetObject(this);
    _propertyAnimation.setPropertyName("radius");
    _propertyAnimation.setStartValue(0.0);
    _propertyAnimation.setEndValue(0.0);
    _propertyAnimation.setDuration(DURATION_MS);
    _propertyAnimation.setEasingCurve(QEasingCurve::OutQuad);
    _propertyAnimation.start();
}  

    上文中使用了动画的效果，主要目的是使指针变数缓冲，动画效果的类实例_propertyAnimation，其中值得注意的是属性setPropertyName()函数的参数radius，这个我们在类声明的时候是手动注册的属性，注册的方法有两个步骤，步骤如下：

第一步：添加成员变量，添加成员变量读/写函数，如下：

class MSpacePanel:public QwtDial
{
   ……
private:
    ……
    double getRadius()const;
    void setRadius(constdoubleradius);
   ……
private:
   ……
   double _radius;
   ……
}

第二步：注册为属性

class MSpacePanel:public QwtDial
{
   Q_OBJECT
   //自定义属性
   Q_PROPERTY(double radius READ getRadius WRITEsetRadius)
   ……
}

2.resize窗口大小要做的事情

voidMSpacePanel::resizeEvent(QResizeEvent*event)
{
   _w=geometry().width();
   _h=geometry().height();
   _pLabel->setStyleSheet(QString("font:%1px").arg((int)(_w/4)));
   _pLabel->setGeometry((_w-_w/2.5)/2-10,(_h-_h/3)/2,_w/2.5+20,_h/3);
   _pLabel->setAlignment(Qt::AlignHCenter);
   _pLabel2->setStyleSheet(QString("font:%1px").arg((int)(_w/8)));
   _pLabel2->setGeometry((_w-_w/2.5)/2-20,(_h-_h/3)/2+50,_w/2.5+50,_h/3);
   _pLabel2->setAlignment(Qt::AlignHCenter);
   _pLabel2->setText("空间使用率");
   _pScaleDraw->setPenWidth(_w/15);
   _penWidth=_pScaleDraw->penWidth();
}

3.重画窗口需要设置值

    主要是限制最大值最小值和动画效果，动画不能使用pause，否则会直接设置到值（接上次剩余的时间到endValue），应该是stop然后重新开始运行动画。

 

voidMSpacePanel::setValue(double value)
{
     if(value>100.0)
        value=100.0;
    elseif(value<0.01)
        value=0;
    _propertyAnimation.stop();
    _propertyAnimation.setDuration(DURATION_MS);
    _propertyAnimation.setStartValue(_propertyAnimation.currentValue().toDouble());
    _propertyAnimation.setEndValue(value*3.6);
    _propertyAnimation.start();
}

4.实现我们的效果（还有空间未使用部分的灰色没有实现）

    为了实现我们的效果，只能重载painter函数，使用QPainter补充画剩余的圆弧，代码如下：

 

voidMSpacePanel::paintEvent(QPaintEvent*event)
{
    //调用基类，画基类
    QwtDial::paintEvent(event);
    //在已有的图形上画
    QPainter painter(this);
    painter.setPen(QPen(QColor(199,199,199),15));
    double space=13.5f;
//  qDebug()<<__FILE__<<__LINE__<<_radius*16<<360*16<<_w<<_h;
    painter.drawArc(0+space,0+space, _w-space*2,_h-space*2,90*16,360*16-_radius*16);
}

 

总结

    本次项目中需要实现的效果使用qwt完成，在开发的过程中，对qwt进一步了解，我们可以发现，需要实现的效果其实直接使用QPainter画图完成更好，我们主要的目的是实现效果的同时熟悉qwt技术，本次需求该效果的项目中将不会使用qwt完成。