From 6143f65f1e6ae4b0e3baad3f4cee87e294d99e63 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E5=8A=B2=E9=B9=8F?= Date: Fri, 30 Apr 2021 19:56:05 +0800 Subject: [PATCH] add gradient for stack --- doric-Qt/example/doric/resources/stack.qml | 106 ++++++++++++++++++ .../example/doric/shader/DoricViewNode.cpp | 50 ++++++++- 2 files changed, 153 insertions(+), 3 deletions(-) diff --git a/doric-Qt/example/doric/resources/stack.qml b/doric-Qt/example/doric/resources/stack.qml index 60534b6e..c1cc6bf6 100644 --- a/doric-Qt/example/doric/resources/stack.qml +++ b/doric-Qt/example/doric/resources/stack.qml @@ -6,6 +6,7 @@ import QtGraphicalEffects 1.12 import "util.mjs" as Util Rectangle { + id: root property var wrapper clip: true @@ -16,10 +17,14 @@ Rectangle { onWidthChanged: { console.log(tag, uuid + " onWidthChanged: " + this.width) + + updateGradient() } onHeightChanged: { console.log(tag, uuid + " onHeightChanged: " + this.height) + + updateGradient() } color: 'transparent' @@ -71,4 +76,105 @@ Rectangle { 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/DoricViewNode.cpp b/doric-Qt/example/doric/shader/DoricViewNode.cpp index 25239559..d6556d84 100644 --- a/doric-Qt/example/doric/shader/DoricViewNode.cpp +++ b/doric-Qt/example/doric/shader/DoricViewNode.cpp @@ -105,9 +105,53 @@ void DoricViewNode::blend(QQuickItem *view, QString name, QJsonValue prop) { } else if (name == "height") { getLayouts()->setHeight(prop.toDouble()); } else if (name == "backgroundColor") { - view->setProperty( - "backgroundColor", - QVariant::fromValue(DoricUtils::doricColor(prop.toInt()))); + if (prop.isDouble()) { + view->setProperty("backgroundColorIsObject", false); + view->setProperty( + "backgroundColor", + QVariant::fromValue(DoricUtils::doricColor(prop.toInt()))); + } else if (prop.isObject()) { + QJsonObject dict = prop.toObject(); + view->setProperty("backgroundColorIsObject", true); + + QJsonValue orientation = prop["orientation"]; + if (orientation.isDouble()) { + view->setProperty("orientation", orientation.toInt()); + } + if (dict.keys().contains("colors")) { + QVector colors; + QJsonArray colorArray = dict["colors"].toArray(); + for (int i = 0; i != colorArray.size(); i++) { + colors.append(colorArray.at(i).toInt()); + } + + if (dict.keys().contains("locations")) { + QJsonValue locationsValue = dict["locations"]; + if (locationsValue.isArray()) { + QVector locations; + QJsonArray locationArray = locationsValue.toArray(); + for (int i = 0; i != locationArray.size(); i++) { + locations.append(locationArray.at(i).toDouble()); + } + view->setProperty("gradientLocations", + QVariant::fromValue(locations)); + } + } + + view->setProperty("gradientColors", QVariant::fromValue(colors)); + } else { + if (dict.keys().contains("start") && dict.keys().contains("end")) { + int start = dict["start"].toInt(); + int end = dict["end"].toInt(); + + QVector colors; + colors.append(start); + colors.append(end); + + view->setProperty("gradientColors", QVariant::fromValue(colors)); + } + } + } } else if (name == "x") { getLayouts()->setMarginLeft(prop.toDouble()); } else if (name == "y") {