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();
}