QML官方Demo学习之Scene Graph

在Qt帮助文档中搜索“Scene Graph - Painted Item ”可以看到，原来的代码是写成QML调用C++插件的方式。由于插件方式对不熟悉的同学来说，可能要踩一些坑，其实可以放在一个工程里，通过qmlRegisterType的方式进行注册，然后在qml中进行调用。

QQuickPaintedItem继承自QQuickItem，而QQuickItem就是Qml中的Item。
QQuickPaintedItem通过重载paint函数,就可以使用QPainter绘制。
自定义的QQuickPaintedItem子类需要注册到Qml中才能使用，注册类型或者注册实例都可以。

textballoon.h

#ifndef TEXTBALLOON_H
#define TEXTBALLOON_H#include <QtQuick>class TextBalloon : public QQuickPaintedItem
{Q_OBJECTQ_PROPERTY(bool rightAligned READ isRightAligned WRITE setRightAligned NOTIFY rightAlignedChanged)public:TextBalloon(QQuickItem *parent = nullptr);void paint(QPainter *painter);bool isRightAligned();void setRightAligned(bool rightAligned);private:bool rightAligned;signals:void rightAlignedChanged();
};#endif

textballoon.cpp

#include "textballoon.h"TextBalloon::TextBalloon(QQuickItem *parent): QQuickPaintedItem(parent), rightAligned(false)
{}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, static_cast<int>(itemSize.width()), static_cast<int>(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);}
}bool TextBalloon::isRightAligned()
{return this->rightAligned;
}void TextBalloon::setRightAligned(bool rightAligned)
{this->rightAligned = rightAligned;
}

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQmlEngine>
#include "textballoon.h"int main(int argc, char *argv[])
{QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);QGuiApplication app(argc, argv);QQmlApplicationEngine engine;qmlRegisterType<TextBalloon>("TextBalloonPlugin", 1, 0, "TextBalloon");engine.load(QUrl(QStringLiteral("qrc:/main.qml")));if (engine.rootObjects().isEmpty())return -1;return app.exec();
}

main.qml

import QtQuick 2.9
import QtQuick.Window 2.2
import TextBalloonPlugin 1.0Window {visible: truewidth: 640height: 480title: qsTr("Hello World")//! [0]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}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"}}}
}

运行效果：

代码地址：https://github.com/xiaozia/blogs/tree/master/qml/20190729/TextBalloonDemo

参考：
Qt Quick实现的涂鸦程序 https://blog.csdn.net/u010002704/article/details/41514371

Qml组件化编程7-自绘组件 https://blog.csdn.net/d759378563/article/details/90384469

QML官方Demo学习之Scene Graph - Painted Item相关推荐

CORE-ESP32C3|eink|日期格式化|IO11解锁|墨水屏操作库|SNTP自动同步|局部刷新|全局刷新|LuatOS-SOC接口|官方demo|学习（12）：简单日期显示
目录基础资料探讨重点参考博文: 实现功能硬件准备软件版本日志及soc下载工具软件使用接线示意图 IO11解锁教程可参考: 功能1:基于墨水屏的日期显示: 初始化: 日期显示: 功能2: ...
CORE-ESP32C3|eink|墨水屏日历|天气API|LuatOS公共接口|气象要素数据V1|collectgarbage|LuatOS-SOC接口|官方demo|学习（13）：墨水屏动态日历
目录参考博文项目官方地址显示效果: 硬件准备软件版本日志及soc下载工具软件使用接线示意图硬件接线一.Elink驱动管脚适配二.天气信息获取 API使用方式: 接口格式(注意需不需 ...
合宙Air105|摄像头|capture|SPI|Serial 串口|TFTLCD|Micro SD卡|GC032A|USB转TTL|官方demo|学习（2-1）：摄像头camera-capture
目录基础资料探讨重点实现功能硬件准备软件版本软件使用接线示意图功能1:捕捉图片并存入SPI接口外置SD卡 lcd初始化摄像头初始化指定capture按钮 SD卡初始化图片存储功 ...
CORE-ESP32C3|eink|墨水屏日历+时间日期+温度显示|I2C软件模拟| LuatOS-SOC接口|官方demo|学习(14)：墨水屏动态日历+oled日期显示+ AHT10测温模组
目录参考博文源于网友oled+eink+aht10项目源代码修改及复现说明主要修改显示效果编辑硬件准备软件版本日志及soc下载工具软件使用接线说明天气显示屏硬件接线温度采集 ...
W800|WIFI|CDK|W80X SDK v1.00.10|官方demo|学习（2）：t-connect
目录官方文档及SDK 1.W800 SDK v1.00.10更新内容: 2. DEMO概要 3.t_connect demo测试 CDK中打开project: Project文件在: 编译完成:编 ...
合宙Air105|CRYPTO|加密与解密|算法|RSA|HASH函数| BASE64|MD5|SHA1|SHA256|CRC|官方demo|学习（4）：CRYPTO（加密与解密）
基础资料基于Air105开发板:Air105 - LuatOS 文档上手:开发上手 - LuatOS 文档探讨重点对官方CRYPTO(加密与解密) 功能的复现,进行相关内容的学习及探讨. 实现 ...
合宙Air780E|iot|update|FOTA|LuatOS-Air开发|LuatOS-SOC接口|官方demo|学习（17）：FOTA（远程升级）
目录一. 概述注意: 二. 材料准备三. 合宙iot平台升级core+script过程 1. iot平台创建产品 2. 模块端脚本修改,生成升级包 3. 按照新版本的需求,修改ma ...
W800|iot|HLK-W800-KIT-PRO|AliOS|阿里云|官方demo|学习（1）：板载AliOS系统快速上手
目录板载系统简介产品特性快速使用流程语音控制联网控制使用准备配置联网步骤一:添加设备步骤二:配置网络(不支持5G) 步骤三:设备添加成功,可自定义设备名称,点击完成. APP 控制 ...
lenet pytorch 官方demo学习笔记
文章目录 model predict train 教程连接数据集 cifa10 batch 一批数据集的个数 channel 深度,灰度图为1,rgb为3 height,width 宽高,32 在p ...

QML官方Demo学习之Scene Graph - Painted Item

QML官方Demo学习之Scene Graph - Painted Item相关推荐

最新文章

热门文章