如何在Qt/QML中实现三维深度和阴影?
我正在为UbuntuTouch平台制作一个时钟,并且已经得到了我需要实现的设计。所需的实现如下图1所示。我做了一个基本的实现,如图2所示。目前,它们是两个矩形,半径彼此固定,背景为彩色。如果您需要一个起点(代码方面),请查看 为了获得深度和阴影,我需要使用什么Qt/QML效果?如果我知道需要什么效果,我可以自己调整这些值 注1:忽略时钟标记和两幅图像之间的色差。这是我知道如何解决的问题 注2:请提供文档链接,以便我可以阅读文档,根据需要调整以匹配所需的设计如何在Qt/QML中实现三维深度和阴影?,qt,touch,qml,Qt,Touch,Qml,我正在为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;
}
}
}
}
诀窍是绘制黑色透明白色渐变,并将其遮罩,使其仅显示围绕圆的一条细线
哇,那场比赛非常精彩!通过查看您的代码,我学到了不少东西。