Qt之圖形（繪制漂亮的圓弧）

簡述

綜合前面對二維繪圖的介紹，想必我們對一些基本繪圖有了深入的了解，下面我們來實現一些漂亮的圖形繪制。

• 簡述
• 圓形
  • 效果
  • 源碼
• 弧形
  • 效果
  • 源碼
• 文本
  • 效果
  • 源碼
• 旋轉
  • 效果
  • 源碼

圓形

經常地，我們會在網上看到一些列的抽獎活動，里面就有圓盤抽獎，是不是有點手癢了O(∩_∩)O~

效果

源碼

void MainWindow::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);

    int radius = 150;
    int arcHeight = 30;

    // >> 1（右移1位）相當於width() / 2
    painter.translate(width() >> 1, height() >> 1);

    /** * 參數二：半徑 * 參數三：開始的角度 * 參數四：指掃取的角度-順時針（360度 / 8 = 45度） * 參數五：圓環的高度 * 參數六：填充色 **/
    gradientArc(&painter, radius, 0,  45, arcHeight, qRgb(200, 200, 0));
    gradientArc(&painter, radius, 45, 45, arcHeight, qRgb(200, 0, 200));
    gradientArc(&painter, radius, 90, 45, arcHeight, qRgb(0, 200, 200));
    gradientArc(&painter, radius, 135, 45, arcHeight, qRgb(200, 0, 0));
    gradientArc(&painter, radius, 225, 45, arcHeight, qRgb(0, 200, 0));
    gradientArc(&painter, radius, 180, 45, arcHeight, qRgb(0, 0, 200));
    gradientArc(&painter, radius, 270, 45, arcHeight, qRgb(0, 0, 0));
    gradientArc(&painter, radius, 315, 45, arcHeight, qRgb(150, 150, 150));
}

void MainWindow::gradientArc(QPainter *painter, int radius, int startAngle, int angleLength, int arcHeight, QRgb color)
{
    // 漸變色
    QRadialGradient gradient(0, 0, radius);
    gradient.setColorAt(0, Qt::white);
    gradient.setColorAt(1.0, color);
    painter->setBrush(gradient);

    // << 1（左移1位）相當於radius*2 即：150*2=300
    //QRectF(-150, -150, 300, 300)
    QRectF rect(-radius, -radius, radius << 1, radius << 1);
    QPainterPath path;
    path.arcTo(rect, startAngle, angleLength);

    painter->setPen(Qt::NoPen);
    painter->drawPath(path);
}

弧形

我們可以在之前的基礎上加一些處理，從而實現一個圓弧。

效果

源碼

void MainWindow::gradientArc(QPainter *painter, int radius, int startAngle, int angleLength, int arcHeight, QRgb color)
{
    // 漸變色
    QRadialGradient gradient(0, 0, radius);
    gradient.setColorAt(0, Qt::white);
    gradient.setColorAt(1.0, color);
    painter->setBrush(gradient);

    // << 1（左移1位）相當於radius*2 即：150*2=300
    //QRectF(-150, -150, 300, 300)
    QRectF rect(-radius, -radius, radius << 1, radius << 1);
    QPainterPath path;
    path.arcTo(rect, startAngle, angleLength);

    // QRectF(-120, -120, 240, 240)
    QPainterPath subPath;
    subPath.addEllipse(rect.adjusted(arcHeight, arcHeight, -arcHeight, -arcHeight));

    // path為扇形 subPath為橢圓
    path -= subPath;

    painter->setPen(Qt::NoPen);
    painter->drawPath(path);
}

這些只不過是我們實現的一個小效果，如果說你有什么特殊的需要，可以在此基礎上進行擴展，比如：添加文本、動畫旋轉等。

文本

可以通過QPainterPath的addText()來添加文本。

效果

源碼

void MainWindow::gradientArc(QPainter *painter, int radius, int startAngle, int angleLength, int arcHeight, QRgb color)
{
    // 漸變色
    QRadialGradient gradient(0, 0, radius);
    gradient.setColorAt(0, Qt::white);
    gradient.setColorAt(1.0, color);
    painter->setBrush(gradient);

    // << 1（左移1位）相當於radius*2 即：150*2=300
    //QRectF(-150, -150, 300, 300)
    QRectF rect(-radius, -radius, radius << 1, radius << 1);
    QPainterPath path;
    path.arcTo(rect, startAngle, angleLength);

    // QRectF(-120, -120, 240, 240)
    QPainterPath subPath;
    subPath.addEllipse(rect.adjusted(arcHeight, arcHeight, -arcHeight, -arcHeight));

    // path為扇形 subPath為橢圓
    path -= subPath;

    QFont font;
    font.setFamily("Microsoft YaHei");
    font.setPointSize(14);

    painter->setPen(Qt::NoPen);
    path.addText(path.pointAtPercent(0.5), font, QStringLiteral("一去丶二三里"));
    painter->drawPath(path);
}

旋轉

我們對前面的圓盤進行強化，添加一個旋轉效果。當然，常見的抽獎圓盤旋轉的是指針，而我們下面實現的是對圓盤的旋轉，如果你要實現一個抽獎轉盤，那么可以再擴展。

效果

源碼

// 利用定時器，定時變換角度，進行旋轉。
QTimer *pTimer = new QTimer(this);
pTimer->setInterval(100);
connect(pTimer, SIGNAL(timeout()), this, SLOT(updatePaint()));
pTimer->start();

// 改變角度，進行旋轉
void MainWindow::updatePaint()
{
    m_nRotationAngle++;
    if (m_nRotationAngle > 360)
        m_nRotationAngle = 0;
    update();
}

然后，只需要在繪圖事件中添加簡單的一行代碼即可：

void MainWindow::paintEvent(QPaintEvent *)
{
    ...
    // 旋轉
    painter.rotate(m_nRotationAngle);
    ...
}

好了，基本的介紹就到這里，是不是很有意思呢，O(∩_∩)O哈哈~