如何在Qt/QML中实现三维深度和阴影?

如何在Qt/QML中实现三维深度和阴影?,qt,touch,qml,Qt,Touch,Qml,我正在为UbuntuTouch平台制作一个时钟,并且已经得到了我需要实现的设计。所需的实现如下图1所示。我做了一个基本的实现,如图2所示。目前,它们是两个矩形,半径彼此固定,背景为彩色。如果您需要一个起点(代码方面),请查看 为了获得深度和阴影,我需要使用什么Qt/QML效果?如果我知道需要什么效果,我可以自己调整这些值 注1:忽略时钟标记和两幅图像之间的色差。这是我知道如何解决的问题 注2:请提供文档链接,以便我可以阅读文档,根据需要调整以匹配所需的设计 深度不存在。您可以使用图形效果中的阴

我正在为UbuntuTouch平台制作一个时钟,并且已经得到了我需要实现的设计。所需的实现如下图1所示。我做了一个基本的实现,如图2所示。目前,它们是两个矩形,半径彼此固定,背景为彩色。如果您需要一个起点(代码方面),请查看

为了获得深度和阴影,我需要使用什么Qt/QML效果?如果我知道需要什么效果,我可以自己调整这些值

注1:忽略时钟标记和两幅图像之间的色差。这是我知道如何解决的问题

注2:请提供文档链接,以便我可以阅读文档,根据需要调整以匹配所需的设计


深度不存在。您可以使用图形效果中的阴影:

它不是真正的3D深度,只是一个可以轻松实现的轻微高亮/阴影。下面是一个简单环的示例:

import QtQuick 2.0;
import QtGraphicalEffects 1.0;

Rectangle {
    id: window;
    width: 400;
    height: 400;
    gradient: Gradient { // UbuntuTouch-like background
        GradientStop { position: 0.0; color: "#c05c7c"; }
        GradientStop { position: 1.0; color: "#d56a59"; }
    }

    property int offset : 2;
    property int size   : 50;

    Item { // outter circle
        id: circleOutter;
        width: 250;
        height: width;
        anchors.centerIn: parent;

        Canvas {  // draws the ring
            opacity: 0.35;
            antialiasing: true;
            contextType: "2d";
            anchors.fill: parent;
            onPaint: {
                if (context) {
                    context.reset ();
                    context.globalCompositeOperation = "source-over";
                    context.fillStyle = "black";
                    context.beginPath ();
                    context.ellipse (0, 0, width, height);
                    context.fill ();
                    context.globalCompositeOperation = "xor";
                    context.fillStyle = "black";
                    context.beginPath ();
                    context.ellipse (circleInner.x, circleInner.y, circleInner.width, circleInner.height);
                    context.fill ();
                }
            }
            onWidthChanged:  { requestPaint (); }
            onHeightChanged: { requestPaint (); }
        }
        Rectangle { // draws the outter shadow/highlight
            id: sourceOutter;
            radius: (width / 2);
            antialiasing: true;
            gradient: Gradient {
                GradientStop { position: 0.0; color: "black"; }
                GradientStop { position: 0.5; color: "transparent"; }
                GradientStop { position: 1.0; color: "white"; }
            }
            anchors {
                fill: parent;
                margins: -offset;
            }
        }
        Rectangle { // mask for outer 3D effect
            id: maskOutter;
            color: "transparent";
            radius: (width / 2);
            antialiasing: true;
            border {
                width: offset;
                color: "black";
            }
            anchors.fill: sourceOutter;
        }
        OpacityMask { // outter effect
            opacity: 0.65;
            source: ShaderEffectSource {
                sourceItem: sourceOutter;
                hideSource: true;
            }
            maskSource: ShaderEffectSource {
                sourceItem: maskOutter;
                hideSource: true;
            }
            anchors.fill: sourceOutter;
        }
        Item { // inner circle
            id: circleInner;
            anchors {
                fill: parent;
                margins: size;
            }

            Rectangle { // draws the inner highlight / shadow
                id: sourceInner;
                radius: (width / 2);
                antialiasing: true;
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "white"; }
                    GradientStop { position: 0.5; color: "transparent"; }
                    GradientStop { position: 1.0; color: "black"; }
                }
                anchors {
                    fill: parent;
                    margins: -offset;
                }
            }
            Rectangle { // mask for inner 3D effect
                id: maskInner;
                color: "transparent";
                radius: (width / 2);
                antialiasing: true;
                border {
                    width: offset;
                    color: "black";
                }
                anchors.fill: sourceInner;
            }
            OpacityMask { // inner effect
                opacity: 0.65;
                source: ShaderEffectSource {
                    sourceItem: sourceInner;
                    hideSource: true;
                }
                maskSource: ShaderEffectSource {
                    sourceItem: maskInner;
                    hideSource: true;
                }
                anchors.fill: sourceInner;
            }
        }
    }
}
诀窍是绘制黑色透明白色渐变,并将其遮罩,使其仅显示围绕圆的一条细线


哇,那场比赛非常精彩!通过查看您的代码,我学到了不少东西。