Qt自定义控件5:彩色圆弧时钟

Qt自定义控件5:彩色圆弧时钟(模仿liudianwu大神的最新作品,推荐去学习下刘大神)

先看效果图:
Qt自定义控件5:彩色圆弧时钟_第1张图片

思路:主要是画 三个圆弧(分别代表时 分 秒),和内部的时间。三个圆弧主要难度是颜色的渐变。还可以加上动画效果(此代码未加)。

关键代码:CMPassrate4.cpp

void CMPassrate4::paintEvent(QPaintEvent* event){
    int width = this->width();
    int height = this->height();
    int side = qMin(width, height);

    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    painter.translate(width / 2, height / 2);
    painter.scale(side / 200.0, side / 200.0);

    drawHE(&painter); //画 时 圆弧
    drawME(&painter);// 画 分 圆弧
    drawSE(&painter); //画 秒 圆弧
    drawText(&painter); //画 中间的文字

}

void CMPassrate4::drawHE(QPainter* painter){
    float hour = QTime::currentTime().hour();
    float minu = QTime::currentTime().minute();
    float inn = hERadius-10;
    float range = (hour/12+minu/60/12)*360;
    if(range>=360){
        range -= 360;
    }

    QRect rectOut(-hERadius,-hERadius,hERadius*2,hERadius*2);
    QRect rectInn(-inn,-inn,inn*2,inn*2);
    painter->save();
    painter->setPen(Qt::NoPen);
    QRadialGradient rad(QPoint(0,0),(hERadius+2),QPoint(0,0));
    rad.setSpread(QGradient::RepeatSpread);
    rad.setColorAt(0.8,Qt::white);
    rad.setColorAt(0.9,color);
    rad.setColorAt(1,Qt::white);
    painter->setBrush(rad);
    QPainterPath path;
    QPainterPath subpath;
    painter->rotate(-90);
    path.arcTo(rectOut,360-range,range);
    subpath.addEllipse(rectInn);
    path -= subpath;
    painter->drawPath(path);
    painter->restore();
}

void CMPassrate4::drawME(QPainter* painter){
    float minu = QTime::currentTime().minute();

    float inn = mERadius-10;
    float range = (minu/60)*360;
    if(range>=360){
        range -= 360;
    }

    QRect rectOut(-mERadius,-mERadius,mERadius*2,mERadius*2);
    QRect rectInn(-inn,-inn,inn*2,inn*2);
    painter->save();
    painter->setPen(Qt::NoPen);
    QRadialGradient rad(QPoint(0,0),(mERadius+2),QPoint(0,0));
    rad.setSpread(QGradient::RepeatSpread);
    rad.setColorAt(0.8,Qt::white);
    rad.setColorAt(0.9,color);
    rad.setColorAt(1,Qt::white);
    painter->setBrush(rad);
    QPainterPath path;
    QPainterPath subpath;
    painter->rotate(-90);
    path.arcTo(rectOut,360-range,range);
    subpath.addEllipse(rectInn);
    path -= subpath;
    painter->drawPath(path);
    painter->restore();
}

void CMPassrate4::drawSE(QPainter* painter){
    float sec = QTime::currentTime().second();
    float inn = sERadius-10;
    float range = (sec/60)*360;
    if(range>=360){
        range -= 360;
    }

    QRect rectOut(-sERadius,-sERadius,sERadius*2,sERadius*2);
    QRect rectInn(-inn,-inn,inn*2,inn*2);
    painter->save();
    painter->setPen(Qt::NoPen);
    QRadialGradient rad(QPoint(0,0),(sERadius+2),QPoint(0,0));
    rad.setSpread(QGradient::RepeatSpread);
    rad.setColorAt(0.8,Qt::white);
    rad.setColorAt(0.9,color);
    rad.setColorAt(1,Qt::white);
    painter->setBrush(rad);
    QPainterPath path;
    QPainterPath subpath;
    painter->rotate(-90);
    path.arcTo(rectOut,360-range,range);
    subpath.addEllipse(rectInn);
    path -= subpath;
    painter->drawPath(path);
    painter->restore();
}

void CMPassrate4::drawText(QPainter* painter){
    QString curDate = QDate::currentDate().toString("yyyy年-MM月-dd日");
    QString curTime = QTime::currentTime().toString("hh时-mm分-ss秒");

    painter->save();
    painter->setPen(color);
    QRect rectTop(-48,-15,96,15);//自定义的位置,这里写死在这里,不建议这么写
    QRect rectBot(-48,0,96,15);//自定义的位置,这里写死在这里,不建议这么写
    painter->drawText(rectTop,curDate);
    painter->drawText(rectBot,curTime);

    painter->restore();
}

你可能感兴趣的:(Qt画图(自定义控件))