Qt利用QGraphicsView繪制跳舞的機器人

Posted on by

前言

最近新學瞭一招秘密武器，打算分享給大傢！如何在QGraphicsView中制作一個跳舞的機器人。

首先，我們看一下顯示效果：

讓我們一起在這個炎熱的夏天裡奔跑吧！哈哈！

今天就讓我們來解鎖如何繪制這樣一個會跳舞的機器人吧！

開發環境：VS2017 + Qt5.14.2

應用框架：QGraphicsView

在之前的文章中我有詳細講述QGraphicsView框架的基礎，這裡我們就直接講述是如何實現的吧！

在QGraphicsView中，無論是繪制什麼圖形，都需要在場景中展示，並且繪圖的基類是：QGraphicsItem

實現過程中遇到的知識點：

1：圖形繪制。

2：如何讓圖形動起來。

想要讓機器人動起來，首先我們要先做一個靜態的機器人，今天的主要內容是如何做一個靜態的機器人。

靜態機器人實現

機器人的組成主要分成瞭三個部分：

1：機器人頭(QRobotHead)

2：機器人軀幹(QRobotTorso)

3：機器人肢體(QRobotLimb)，用於上肢和下肢。

對應的類圖：

所有的類都繼承自QRobotPart，為瞭方便後續做動態拖動控制，要實現靜態的機器人，當前QRobotPart類是不需要做任何處理的。

class QRobotPart : public QGraphicsObject
{
	Q_OBJECT

public:
	QRobotPart(QGraphicsItem *parent = nullptr);
	~QRobotPart();
};

接下來我們就來實現機器人的三大部件吧！

1.QRobotHead

該類主要功能：機器人頭類

父類：QRobotPart

首先看一下頭部實現出來的效果。

頭部所占的區域位置：QRectF(-10,-30,20,30);

定義到坐標軸上的區域，如下所示：

靜態的機器人頭部就是在圖中鉛筆繪制的區域。

緊接著，我們可以將眼睛、嘴巴一並繪制出來，具體實現代碼如下：

void QRobotHead::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget /* = nullptr */)
{
	/*
	繪制實際的頭部。
	實現分為兩部分：
		1：如果一個圖像被丟到機器人頭部上，我們就畫出圖像。
		2：否則，就畫出一個帶有簡單矢量圖形的圓形矩形機器人頭部。
	*/
	Q_UNUSED(option);
	Q_UNUSED(widget);

	painter->setBrush(m_color);
        //繪制：整體區域
	painter->drawRoundedRect(-10, -30, 20, 30, 25, 25, Qt::RelativeSize);
	painter->setBrush(Qt::white);
        //繪制：左眼 大眼眶
	painter->drawEllipse(-7, -3 - 20, 7, 7);
        //繪制：右眼 大眼眶
	painter->drawEllipse(0, -3 - 20, 7, 7);
	painter->setBrush(Qt::black);
        //繪制：左眼 小眼珠
	painter->drawEllipse(-5, -1 - 20, 2, 2);
        //繪制：右眼 小眼珠
	painter->drawEllipse(2, -1 - 20, 2, 2);
	painter->setPen(QPen(Qt::black, 2));
	painter->setBrush(Qt::NoBrush);
        //繪制：小笑臉
	painter->drawArc(-6, -2 - 20, 12, 15, 190 * 16, 160 * 16);
	
}

2.QRobotTorso

該類主要功能：機器人軀幹

父類：QRobotPart

腦袋的位置確定好之後，緊接著就是軀幹的位置瞭，就在頭部坐標下面繪制就行瞭。

代碼顯示：

painter->drawRoundedRect(-20, -20, 40, 60, 25, 25, Qt::RelativeSize);

顯示效果，如下圖：

這樣一個簡易版的軀幹就完成瞭。

為瞭美觀起見，在對應的四肢上分別劃出瞭四個圓圈。

void QRobotTorso::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget /* = nullptr */)
{
	Q_UNUSED(option);
	Q_UNUSED(widget);
	painter->setBrush(m_bDragOver ? m_color.lighter(130) : m_color);
	painter->drawRoundedRect(-20, -20, 40, 60, 25, 25, Qt::RelativeSize);
	painter->drawEllipse(-25, -20, 20, 20);
	painter->drawEllipse(5, -20, 20, 20);
	painter->drawEllipse(-20, 22, 20, 20);
	painter->drawEllipse(0, 22, 20, 20);
}

最終的顯示效果，如下圖：

機器人軀幹復雜版.png

3.QRobotLimb

該類功能：機器人肢體。包括瞭左右上肢以及左右下肢

父類：QRobotPart

肢體包括瞭：左上臂、左下臂、右上臂、右下臂、右腿上部、右腿下部、左腿上部、左腿下部。

按照一個順時針的方式進行繪制。

對於每一個肢體，我們都采用下面的繪制圖形

如此以來，隻需要繪制一個圓角矩形以及一個圓形就可以瞭。

其實，到這裡就遇到瞭另外一個問題：怎麼確定每個肢體的位置呢？

因為是順時針繪制，所以，在QRobotLimb中初始位置可以采用一個位置，根據創建出來的肢體不同，再對圖形進行移動

假設，初始的位置區域是：QRectF(-5, -5, 40, 10)

首先，先將第一個右下臂繪制出來，顯示效果如下：

看到效果圖之後，會發現，右下臂應該在右肩膀的圓圈中間，那麼我們隻需要setPos位置就可以瞭。

那麼，對應其他肢體的位置我們都可以這麼來實現。

第一步：將所有的肢體創建出來

第二步：根據肢體的位置進行移動

實現代碼，如下：

//創建：機器人軀幹
QGraphicsObject *torsoItem = new QRobotTorso(this);
//創建：機器人頭
QGraphicsObject *headItem = new QRobotHead(this);
//創建：左上臂
QGraphicsObject *upperLeftArmItem = new QRobotLimb(torsoItem);
//創建：左下臂
QGraphicsObject *lowerLeftArmItem = new QRobotLimb(upperLeftArmItem);
//創建：右上臂
QGraphicsObject *upperRightArmItem = new QRobotLimb(torsoItem);
//創建：右下臂
QGraphicsObject *lowerRightArmItem = new QRobotLimb(upperRightArmItem);
//創建：右腿上部
QGraphicsObject *upperRightLegItem = new QRobotLimb(torsoItem);
//創建：右腿下部
QGraphicsObject *lowerRightLegItem = new QRobotLimb(upperRightLegItem);
//創建：左腿上部
QGraphicsObject *upperLeftLegItem = new QRobotLimb(torsoItem);
//創建：左腿下部
QGraphicsObject *lowerLeftLegItem = new QRobotLimb(upperLeftLegItem);

headItem->setPos(0, -18);
upperLeftArmItem->setPos(-15, -10);
lowerLeftArmItem->setPos(30, 0);
upperRightArmItem->setPos(15, -10);
lowerRightArmItem->setPos(30, 0);
upperRightLegItem->setPos(10, 32);
lowerRightLegItem->setPos(30, 0);
upperLeftLegItem->setPos(-10, 32);
lowerLeftLegItem->setPos(30, 0);

顯示效果，如下所示：

到這裡，整體的機器人頭部、軀幹、四肢已經繪制完成瞭。

以上就是Qt利用QGraphicsView繪制跳舞的機器人的詳細內容，更多關於Qt QGraphicsView機器人的資料請關註WalkonNet其它相關文章！

推薦閱讀：