QPainter - 八卦时钟 完整版

[turbolove]

QPainter - 八卦时钟

上一篇我们在画时钟的时候，已经把基本的钟表指针和刻度都绘制过了

想要完成八卦时钟，就要绘制这个里面的八卦了。

先上个图：

有人和我说八卦不能转

再来一张图：

背景的绘制

我们需要删除之前所绘制的白色背景， 并且将背景修改为黄色

我这里是直接使用的styleSheet设置的背景色

setStyleSheet("background-color:yellow;");

太极八卦的绘制

这里面是三部分：

• 太极的绘制

太极的绘制我们添加绘制太极的函数.

太极的阴阳鱼就是一个半圆添加一个圆和裁减一个圆，我们使用QPainterPath很容易实现这个。

之后我们在给添加的圆的中心再绘制一个颜色相反的小圆作为鱼眼，这样即可完成阴阳鱼的绘制

void Universe::drawUniverse(QPainter &painter)
{
    int radius = radius_ * 0.2;
    painter.save();
    painter.rotate(-degree_);
    // 绘制阳鱼
    painter.setPen(Qt::NoPen);
    QPainterPath circle, tmp;
    // 这个后面的两个参数时开始度数和移动过的度数
    circle.arcTo(-radius, -radius, radius * 2, radius * 2, 270, 180);
    tmp.addEllipse(QPointF(0, -radius / 2), radius / 2, radius / 2);
    circle -= tmp;

    tmp.clear();
    tmp.addEllipse(QPointF(0, radius / 2), radius / 2, radius / 2);
    circle += tmp;
    painter.fillPath(circle, Qt::white);

    tmp.clear();
    tmp.addEllipse(QPointF(0, radius / 2), radius / 4, radius / 4);
    painter.fillPath(tmp, Qt::black);

    // 绘制阴鱼,与阳鱼是一样的
    circle.clear();
    circle.arcTo(-radius, -radius, radius * 2, radius * 2, 90, 180);
    tmp.clear();
    tmp.addEllipse(QPointF(0, -radius / 2), radius / 2, radius / 2);
    circle += tmp;

    tmp.clear();
    tmp.addEllipse(QPointF(0, radius / 2), radius / 2, radius / 2);
    circle -= tmp;
    painter.fillPath(circle, Qt::black);

    tmp.clear();
    tmp.addEllipse(QPointF(0, -radius / 2), radius / 4, radius / 4);
    painter.fillPath(tmp, Qt::white);
    painter.restore();
}

• 八卦的绘制

八卦的绘制是比阴阳鱼更简单的，八卦对应的是八个方位，我们按照方位给加上对应的卦象即可，我这里给了卦象顺序和描述

void Universe::drawBagua(QPainter &painter)
{
    // 因为每个卦象不一样，因此需要单独去绘制，这里写了8个
    int bottom = - radius_ * 0.25;
    int lineLength = 12;
    int midLength = 2;
    int interval = 4;
    painter.setPen(QPen(Qt::red, 2));
    painter.save();
    // painter.rotate(degree_);
    /* 乾三连 */
    QPoint point(-lineLength / 2, bottom);
    QPoint point2(lineLength / 2, bottom);
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval);
    point2 = QPoint(lineLength / 2,  bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval * 2);
    point2 = QPoint(lineLength / 2,  bottom - interval * 2);
    painter.drawLine(point, point2);
    /* 巽下断 */
    painter.rotate(45);
    point = QPoint(-lineLength / 2, bottom);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom );
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom);
    point2 = QPoint(lineLength / 2,  bottom );
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval);
    point2 = QPoint(lineLength / 2, bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval * 2);
    point2 = QPoint(lineLength / 2,  bottom - interval * 2);
    painter.drawLine(point, point2);
    /* 坎中满 */
    painter.rotate(45);
    point = QPoint(-lineLength / 2, bottom);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom );
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom);
    point2 = QPoint(lineLength / 2,  bottom );
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval);
    point2 = QPoint(lineLength / 2, bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval * 2);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom - interval * 2);
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom - interval * 2);
    point2 = QPoint(lineLength / 2,  bottom - interval * 2);
    painter.drawLine(point, point2);
    /* 艮覆碗 */
    painter.rotate(45);
    point = QPoint(-lineLength / 2, bottom);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom );
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom);
    point2 = QPoint(lineLength / 2,  bottom );
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom - interval);
    point2 = QPoint(lineLength / 2,  bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval *2);
    point2 = QPoint(lineLength / 2, bottom - interval * 2);
    painter.drawLine(point, point2);
    /* 坤六断 */
    painter.rotate(45);
    point = QPoint(-lineLength / 2, bottom);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom );
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom);
    point2 = QPoint(lineLength / 2,  bottom );
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom - interval);
    point2 = QPoint(lineLength / 2,  bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval * 2);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom - interval * 2);
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom - interval * 2);
    point2 = QPoint(lineLength / 2,  bottom - interval * 2);
    painter.drawLine(point, point2);
    /* 震仰盂 */
    painter.rotate(45);
    point = QPoint(-lineLength / 2, bottom);
    point2 = QPoint(lineLength / 2,  bottom);
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom - interval);
    point2 = QPoint(lineLength / 2,  bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval * 2);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom - interval * 2);
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom - interval * 2);
    point2 = QPoint(lineLength / 2,  bottom - interval * 2);
    painter.drawLine(point, point2);
    /* 离中虚 */
    painter.rotate(45);
    point = QPoint(-lineLength / 2, bottom);
    point2 = QPoint(lineLength / 2,  bottom);
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom - interval);
    point2 = QPoint(lineLength / 2,  bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval * 2);
    point2 = QPoint(lineLength / 2,  bottom - interval * 2);
    painter.drawLine(point, point2);
    /* 兑上缼 */
    painter.rotate(45);
    point = QPoint(-lineLength / 2, bottom);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom);
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom);
    point2 = QPoint(lineLength / 2,  bottom);
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval);
    point2 = QPoint(-lineLength / 4 + midLength / 2,  bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(lineLength / 4 - midLength/2, bottom - interval);
    point2 = QPoint(lineLength / 2,  bottom - interval);
    painter.drawLine(point, point2);
    point = QPoint(-lineLength / 2, bottom - interval * 2);
    point2 = QPoint(lineLength / 2,  bottom - interval * 2);
    painter.drawLine(point, point2);
    painter.restore();
}

• 外部文字的绘制

八卦外部的文字绘制不复杂，但是八角形坐标得算一下, 这里也是贴出代码，初中的三角函数知识，不做解释，如果不明白可以自己画画图

int radiusIn = 100 * 0.85;
int radiusOut = 100 * 1.15;
int radiusText = 100 * 0.5;
const QStringList list{"乾", "巽", "坎", "艮", "坤", "震", "离", "兑"};
double pointInX = qSin(M_PI /180.0 * 22.5) * radiusIn / 2;
double pointOutX = qSin(M_PI /180.0 * 22.5) * radiusOut / 2;
double pointInY = radiusIn / 2 * qCos(M_PI /180.0 * 22.5);
double pointOutY = radiusOut / 2 * qCos(M_PI /180.0 * 22.5);

void Universe::drawBaguaText(QPainter &painter)
{
    painter.save();
    // painter.rotate(degree_);
    painter.setPen(QPen(Qt::black, 1));
    for(int i = 0; i < 8; i++)
    {
        painter.drawLine(-pointInX, pointInY, pointInX, pointInY);
        painter.drawLine(-pointOutX, pointOutY, pointOutX, pointOutY);
        painter.drawLine(pointInX, pointInY, pointOutX, pointOutY);
        painter.drawText(QRectF(-5, -radiusText, 10, 10), Qt::AlignCenter,  list[i]);
        painter.rotate(45);
    }
    painter.restore();
    update();
}

至此我们完成了所有的绘制部分，之前绘制钟表的背景部分的代码可以删除，我们只留下刻度和指针的代码，对了给指针的中心加一个白色的点来模拟固定的小钉子，不然看着有点小难受。