使用QWidget畫圓環圖的幾種方法

今天無意看到了别人畫3d餅圖，無意中發現了畫圓環圖的一些方法；由此，做一個分享。

1、使用QRegion做出一個圓環區域，使用QPainterPath添加這個區域，然後fillPath。

QPainter painter(this);
    painter.save();
    //設定反鋸齒
    painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform | QPainter::Qt4CompatiblePainting);
    QRect drawRect = event->rect();
    QRegion region(drawRect.adjusted(10,10,-10,-10),QRegion::Ellipse);
    drawRect.setSize(QSize(drawRect.width()/2,drawRect.height()/2));
    drawRect.moveTopLeft(QPoint((event->rect().width() - drawRect.width())/2,(event->rect().height() - drawRect.height())/2));
    QRegion region2(drawRect,QRegion::Ellipse);
    QPainterPath painterPath;
    painterPath.addRegion(region.subtracted(region2));
    painter.fillPath(painterPath,Qt::red);
    event->accept();
    painter.restore();
           

2、使用裁剪，使得隻有裁剪區域才能被繪制

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.save();
    //設定反鋸齒
    painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform | QPainter::Qt4CompatiblePainting);
    QRect drawRect = event->rect();
    QRegion region(drawRect.adjusted(10,10,-10,-10),QRegion::Ellipse);
    drawRect.setSize(QSize(drawRect.width()/2,drawRect.height()/2));
    drawRect.moveTopLeft(QPoint((event->rect().width() - drawRect.width())/2,(event->rect().height() - drawRect.height())/2));
    QRegion region2(drawRect,QRegion::Ellipse);
    painter.setClipRegion(region.subtracted(region2));
    painter.fillRect(region.boundingRect(),Qt::yellow);
    event->accept();
    painter.restore();
}
           

3、在圓的中心畫一個與背景顔色相同的圓

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.save();
    //設定反鋸齒
    painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform | QPainter::Qt4CompatiblePainting);
    QRect drawRect = event->rect();
    painter.setBrush(Qt::yellow);
    painter.drawEllipse(drawRect.adjusted(10,10,-10,-10));
    painter.setBrush(painter.background());
    painter.drawEllipse(drawRect.adjusted(drawRect.width()/4,drawRect.height()/4,-drawRect.width()/4,-drawRect.height()/4));
    event->accept();
    painter.restore();
}
           

4、采用線型漸變，在中心位置到内環半徑位置為透明，環部分為顔色值。這裡的半徑位置線上形漸變中用比例表示，這種隻能畫圓環，橢圓環不行

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.save();
    //設定反鋸齒
    painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform | QPainter::Qt4CompatiblePainting);
    QRect drawRect = event->rect();
    QRadialGradient rg(drawRect.center(),drawRect.width()/2,drawRect.center());
    rg.setColorAt(0,Qt::transparent);
    rg.setColorAt(0.6,Qt::transparent);
    rg.setColorAt(0.61,Qt::yellow);
    rg.setColorAt(1,Qt::yellow);
    painter.setBrush(rg);
    painter.drawEllipse(drawRect);
    event->accept();
    painter.restore();
}
           

第一種、第二種有略微鋸齒，因為在做區域交叉算法時有取舍,painter設定的反鋸齒是給畫圖操作函數用才有效。

第三種效果較好，可以是圓環圖或橢圓環圖，需要背景色一緻，但這個背景色在painter裡面可以直接得到

第四種效果也很好，但隻能是圓環，但他可以是其它效果，比如将線形漸變的焦點不設定在圓心，中間不是透明

void Widget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.save();
    //設定反鋸齒
    painter.setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform | QPainter::Qt4CompatiblePainting);
    QRect drawRect = event->rect();
    QRadialGradient rg(drawRect.center(),drawRect.width()/2,drawRect.center() -= QPoint(30,80));
    rg.setColorAt(0,QColor(Qt::red).darker(400));
    rg.setColorAt(0.6,QColor(Qt::red).darker(150));
    rg.setColorAt(0.61,QColor(Qt::yellow).darker(150));
    rg.setColorAt(1,QColor(Qt::yellow).lighter(200));
    painter.setBrush(rg);
    painter.drawEllipse(drawRect);
    event->accept();
    painter.restore();
}