演示如何使用Qt框架實現基於 QPainter的自定義場景圖項。
"繪製項"示例演示如何使用 QML 場景圖框架使用QPainter 實現自定義場景圖項。
QQuickPaintedItem類是從QQuickItem 派生的類，用於使用 QPainter 接口實現自定義 QML 場景圖形項。
該示例包括項目類、插件類和 QML 文件，以使用此插件。該類表示擴展QQuickPaintedItem的單個文本氣球，該類表示Qt Quick插件的骨架代碼，文件用於加載插件並顯示文本氣球。TextBalloonTextBalloonPlugintextballoons.qml
我們將重點介紹類第一，並繼續文件。有關如何實現Qt快速插件的示例，請查看編寫擴展插件TextBalloontextballoons.qml
文本氣球類聲明
該類繼承自QQuickPaintedItem。QQuickPaintedItem是QML 場景圖框架中所有基於 QPainter 項的基類。TextBalloon
class TextBalloon : public QQuickPaintedItem{Q_OBJECTQ_PROPERTY(bool rightAligned READ isRightAligned WRITE setRightAligned NOTIFY rightAlignedChanged)QML_ELEMENTpublic:TextBalloon(QQuickItem *parent = 0);void paint(QPainter *painter);bool isRightAligned();void setRightAligned(bool rightAligned);private:bool rightAligned;signals:void rightAlignedChanged();};
要實現QQuickPaintedItem，您必須實現 QQuickPaintedIem 的純虛擬函數畫（），該畫實現了類型的繪製。
文本氣球類定義
我們必須確保為 TextBalloon 項初始化正確的對齊屬性。
TextBalloon::TextBalloon(QQuickItem *parent): QQuickPaintedItem(parent), rightAligned(false){}
然後，我們實現由場景圖框架自動調用的函數來繪製項目的內容。函數在局部坐標中繪製項。paint()
void TextBalloon::paint(QPainter *painter){QBrush brush(QColor("#007430"));painter->setBrush(brush);painter->setPen(Qt::NoPen);painter->setRenderHint(QPainter::Antialiasing);QSizeF itemSize = size();painter->drawRoundedRect(0, 0, itemSize.width(), itemSize.height() - 10, 10, 10);if (rightAligned){const QPointF points[3] = {QPointF(itemSize.width() - 10.0, itemSize.height() - 10.0),QPointF(itemSize.width() - 20.0, itemSize.height()),QPointF(itemSize.width() - 30.0, itemSize.height() - 10.0),};painter->drawConvexPolygon(points, 3);}else{const QPointF points[3] = {QPointF(10.0, itemSize.height() - 10.0),QPointF(20.0, itemSize.height()),QPointF(30.0, itemSize.height() - 10.0),};painter->drawConvexPolygon(points, 3);}}
我們從設置筆和筆刷開始定義項目的外觀。之後我們開始繪圖。請注意，根據項目的大小調用內容BoundingRect（）項進行繪製。內容BoundingRect（） 函數返回的矩形是 QML 文件中定義的項的大小。
文本氣球. qml 文件
接口由兩個主要部分組成。帶文本氣球和控制項按鈕的可滾動區域以添加新氣球。
氣球視圖
ListModel {id: balloonModelListElement {balloonWidth: 200}ListElement {balloonWidth: 120}}ListView {anchors.bottom: controls.topanchors.bottomMargin: 2anchors.top: parent.topid: balloonViewdelegate: TextBalloon {anchors.right: index % 2 == 0 ? undefined : parent.rightheight: 60rightAligned: index % 2 == 0 ? false : truewidth: balloonWidth}model: balloonModelspacing: 5width: parent.width}
氣球模型包含兩種類型在應用程式開始，將由氣球視圖顯示。氣球視圖在左對齊和右對齊之間對 TextBalloon 委託項進行分門不行。
控制
Rectangle {id: controlsanchors.bottom: parent.bottomanchors.left: parent.leftanchors.margins: 1anchors.right: parent.rightborder.width: 2color: "white"height: parent.height * 0.15Text {anchors.centerIn: parenttext: "Add another balloon"}MouseArea {anchors.fill: parenthoverEnabled: trueonClicked: {balloonModel.append({"balloonWidth": Math.floor(Math.random() * 200 + 100)})balloonView.positionViewAtIndex(balloonView.count -1, ListView.End)}onEntered: {parent.color = "#8ac953"}onExited: {parent.color = "white"}}}
UI 的控制項部分包含一個帶MouseArea 的矩形，當滑鼠懸停在滑鼠懸停在它上方時，該矩形會更改顏色。此控制項"按鈕"將新對象添加到具有隨機寬度的模型末尾。
Qt創建基於Widget小部件的應用程式
Qt6對Concurrent並發模塊的更新
C++Qt框架Concurrent並發模塊使用方法
Qt框架流布局QFlowlayout使用實例
Qt 6中網絡模塊的最新更新和修改，以及未來可能的發展方向
#Qt#