From 057c7aa3eff4c9b2490b38863f8b1b8794ebf959 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8A=B2=E9=B9=8F?= Date: Wed, 2 Jun 2021 10:11:14 +0800 Subject: [PATCH] draggable demo --- doric-Qt/example/app/qml.qrc | 1 + doric-Qt/example/doric/DoricRegistry.cpp | 2 + doric-Qt/example/doric/doric.pro | 2 + .../example/doric/resources/draggable.qml | 181 ++++++++++++++++++ .../doric/shader/DoricDraggableNode.cpp | 27 +++ .../example/doric/shader/DoricDraggableNode.h | 21 ++ 6 files changed, 234 insertions(+) create mode 100644 doric-Qt/example/doric/resources/draggable.qml create mode 100644 doric-Qt/example/doric/shader/DoricDraggableNode.cpp create mode 100644 doric-Qt/example/doric/shader/DoricDraggableNode.h diff --git a/doric-Qt/example/app/qml.qrc b/doric-Qt/example/app/qml.qrc index 9a6307ca..de133e09 100644 --- a/doric-Qt/example/app/qml.qrc +++ b/doric-Qt/example/app/qml.qrc @@ -48,6 +48,7 @@ ../doric/resources/slide-item.qml ../doric/resources/input.qml ../doric/resources/switch.qml + ../doric/resources/draggable.qml ../doric/resources/toast.qml ../doric/resources/alert.qml diff --git a/doric-Qt/example/doric/DoricRegistry.cpp b/doric-Qt/example/doric/DoricRegistry.cpp index cadcccdd..c9519ad5 100644 --- a/doric-Qt/example/doric/DoricRegistry.cpp +++ b/doric-Qt/example/doric/DoricRegistry.cpp @@ -7,6 +7,7 @@ #include "plugin/DoricShaderPlugin.h" #include "plugin/DoricStoragePlugin.h" +#include "shader/DoricDraggableNode.h" #include "shader/DoricHLayoutNode.h" #include "shader/DoricImageNode.h" #include "shader/DoricInputNode.h" @@ -37,6 +38,7 @@ DoricRegistry::DoricRegistry() { registerViewNode("SlideItem"); registerViewNode("Input"); registerViewNode("Switch"); + registerViewNode("Draggable"); } bool DoricRegistry::acquirePluginInfo(QString name) { diff --git a/doric-Qt/example/doric/doric.pro b/doric-Qt/example/doric/doric.pro index 52c4e13f..a61d9c20 100644 --- a/doric-Qt/example/doric/doric.pro +++ b/doric-Qt/example/doric/doric.pro @@ -41,6 +41,7 @@ SOURCES += \ plugin/DoricPopoverPlugin.cpp \ plugin/DoricShaderPlugin.cpp \ plugin/DoricStoragePlugin.cpp \ + shader/DoricDraggableNode.cpp \ shader/DoricGroupNode.cpp \ shader/DoricHLayoutNode.cpp \ shader/DoricImageNode.cpp \ @@ -124,6 +125,7 @@ HEADERS += \ plugin/DoricPopoverPlugin.h \ plugin/DoricShaderPlugin.h \ plugin/DoricStoragePlugin.h \ + shader/DoricDraggableNode.h \ shader/DoricGroupNode.h \ shader/DoricHLayoutNode.h \ shader/DoricImageNode.h \ diff --git a/doric-Qt/example/doric/resources/draggable.qml b/doric-Qt/example/doric/resources/draggable.qml new file mode 100644 index 00000000..7c8af7aa --- /dev/null +++ b/doric-Qt/example/doric/resources/draggable.qml @@ -0,0 +1,181 @@ +import QtQuick 2.12 +import QtQuick.Controls 2.5 +import QtQuick.Layouts 1.15 +import QtGraphicalEffects 1.12 + +import "util.mjs" as Util + +Rectangle { + id: root + property var wrapper + + clip: true + + property var uuid: Util.uuidv4() + + property var tag: "Draggable" + + onWidthChanged: { + console.log(tag, uuid + " onWidthChanged: " + this.width) + + updateGradient() + } + + onHeightChanged: { + console.log(tag, uuid + " onHeightChanged: " + this.height) + + updateGradient() + } + + color: 'transparent' + + property var backgroundColor + + onBackgroundColorChanged: { + color = backgroundColor + } + + property var borderWidth: 0 + onBorderWidthChanged: { + border.width = borderWidth + } + + property var borderColor: "" + onBorderColorChanged: { + border.color = borderColor + } + + Drag.active: dragArea.drag.active + + MouseArea { + id: dragArea + anchors.fill: parent + + drag.target: parent + } + + property var shadowColor + property var shadowRadius + property var shadowOffsetX + property var shadowOffsetY + property var shadowOpacity + + onShadowOpacityChanged: { + if (shadowOpacity > 0) { + layer.enabled = true + } else { + layer.enabled = false + } + } + + layer.enabled: false + layer.effect: DropShadow { + horizontalOffset: shadowOffsetX + verticalOffset: shadowOffsetY + radius: shadowRadius + samples: 16 + color: shadowColor + transparentBorder: true + } + + + property var backgroundColorIsObject: false + onBackgroundColorIsObjectChanged: { + if (backgroundColorIsObject) { + lineGradient.anchors.fill = root + } else { + lineGradient.anchors.fill = null + } + } + + property variant gradientColors: [] + property variant gradientLocations: [] + + onGradientColorsChanged: { + console.log(tag, uuid + " onGradientColorsChanged: " + gradientColors) + if (gradientColors.length > 0) { + let stops = [] + + if (gradientLocations.length == 0) { + let unit = 1 / (gradientColors.length - 1) + for (let i = 0;i !== gradientColors.length;i++) { + let a = ((gradientColors[i] >> 24) & 0xff) / 255; + let r = ((gradientColors[i] >> 16) & 0xff) / 255; + let g = ((gradientColors[i] >> 8) & 0xff) / 255; + let b = ((gradientColors[i] >> 0) & 0xff) / 255; + let stop = stopComponent.createObject(root, {"position": unit * i, "color": Qt.rgba(r, g, b, a)}) + console.log(tag, uuid + " onGradientColorsChanged: " + "position: " + unit * i + " color: " + Qt.rgba(r, g, b, a)) + stops.push(stop) + } + } else { + for (let i = 0;i !== gradientColors.length;i++) { + let a = ((gradientColors[i] >> 24) & 0xff) / 255; + let r = ((gradientColors[i] >> 16) & 0xff) / 255; + let g = ((gradientColors[i] >> 8) & 0xff) / 255; + let b = ((gradientColors[i] >> 0) & 0xff) / 255; + let stop = stopComponent.createObject(root, {"position": gradientLocations[i], "color": Qt.rgba(r, g, b, a)}) + console.log(tag, uuid + " onGradientColorsChanged: " + "position: " + gradientLocations[i] + " color: " + Qt.rgba(r, g, b, a)) + stops.push(stop) + } + } + + innerGradient.stops = stops + } + } + + property var orientation: 0 + + function updateGradient() { + switch (orientation) { + case 0: + lineGradient.start = Qt.point(0, 0) + lineGradient.end = Qt.point(0, root.height) + break + case 1: + lineGradient.start = Qt.point(root.width, 0) + lineGradient.end = Qt.point(0, root.height) + break + case 2: + lineGradient.start = Qt.point(root.width, 0) + lineGradient.end = Qt.point(0, 0) + break + case 3: + lineGradient.start = Qt.point(root.width, root.height) + lineGradient.end = Qt.point(0, 0) + break + case 4: + lineGradient.start = Qt.point(0, root.height) + lineGradient.end = Qt.point(0, 0) + break + case 5: + lineGradient.start = Qt.point(0, root.height) + lineGradient.end = Qt.point(root.width, 0) + break + case 6: + lineGradient.start = Qt.point(0, 0) + lineGradient.end = Qt.point(root.width, 0) + break + case 7: + lineGradient.start = Qt.point(0, 0) + lineGradient.end = Qt.point(root.width, root.height) + break + } + } + onOrientationChanged: { + console.log(tag, uuid + " onOrientationChanged: " + orientation) + + updateGradient() + } + + LinearGradient { + Component { + id:stopComponent + GradientStop {} + } + + id: lineGradient + gradient: Gradient { + id: innerGradient + } + } +} diff --git a/doric-Qt/example/doric/shader/DoricDraggableNode.cpp b/doric-Qt/example/doric/shader/DoricDraggableNode.cpp new file mode 100644 index 00000000..30888365 --- /dev/null +++ b/doric-Qt/example/doric/shader/DoricDraggableNode.cpp @@ -0,0 +1,27 @@ +#include "DoricDraggableNode.h" + +QQuickItem *DoricDraggableNode::build() { + QQmlComponent component(getContext()->getQmlEngine()); + + const QUrl url(QStringLiteral("qrc:/doric/qml/draggable.qml")); + component.loadUrl(url); + + if (component.isError()) { + qCritical() << component.errorString(); + } + + QQuickItem *item = qobject_cast(component.create()); + this->createLayouts(item); + + item->setProperty("wrapper", QString::number((qint64)this)); + return item; +} + +void DoricDraggableNode::blend(QQuickItem *view, QString name, + QJsonValue prop) { + if (name == "onDrag") { + onDrag = prop.toString(); + } else { + DoricStackNode::blend(view, name, prop); + } +} diff --git a/doric-Qt/example/doric/shader/DoricDraggableNode.h b/doric-Qt/example/doric/shader/DoricDraggableNode.h new file mode 100644 index 00000000..5cd810e5 --- /dev/null +++ b/doric-Qt/example/doric/shader/DoricDraggableNode.h @@ -0,0 +1,21 @@ +#ifndef DORICDRAGGABLENODE_H +#define DORICDRAGGABLENODE_H + +#include "DoricExport.h" + +#include "shader/DoricStackNode.h" + +class DORIC_EXPORT DoricDraggableNode : public DoricStackNode { + +private: + QString onDrag; + +public: + using DoricStackNode::DoricStackNode; + + QQuickItem *build() override; + + virtual void blend(QQuickItem *view, QString name, QJsonValue prop) override; +}; + +#endif // DORICDRAGGABLENODE_H