簡述
綜合前面對二維繪圖的介紹,想必我們對一些基本繪圖有了深入的了解,下面我們來實作一些漂亮的圖形繪制。
| 版權聲明:一去、二三裡,未經部落客允許不得轉載。
圓形
經常地,我們會在網上看到一些列的抽獎活動,裡面就有圓盤抽獎,是不是有點手癢了O(∩_∩)O~
效果
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiATN381dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cmbw5iMzcDM0EGZhJmMiZDO0MTZyYzX5MTOzATM5IzLcdDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.png)
源碼
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);
...