英文:
In qml, how to make the "shadow" of "Shape" more beautiful?
问题
这是你提供的代码的翻译部分：
我创建了一个选项卡栏的示例：
以下是我的代码：
Item {
id: myItem
property bool active: false
property int customWidth: 200
width: 200 + 115 + 115
height: 72
x: 100
y: 20
containmentMask: myShape
Shape {
id: myShape
y: 8
antialiasing: true
width: 200 + 115 + 115
height: 64
anchors.centerIn: parent
ShapePath {
strokeWidth: 0
fillColor: "white"
startX: 0
startY: 64
PathArc {
x: 30
y: 30
radiusX: 32
radiusY: 32
useLargeArc: false
direction: PathArc.Counterclockwise
}
PathArc {
x: 64
y: 0
radiusX: 32
radiusY: 32
useLargeArc: false
direction: PathArc.Clockwise
}
PathLine {
x: 115
y: 0
}
PathLine {
x: 115 + myItem.customWidth
y: 0
}
PathLine {
x: 115 + myItem.customWidth + 51
y: 0
}
PathArc {
x: 115 + myItem.customWidth + 51 + 34
y: 34
radiusX: 32
radiusY: 32
useLargeArc: false
direction: PathArc.Clockwise
}
PathArc {
x: 115 + myItem.customWidth + 115
y: 64
radiusX: 32
radiusY: 32
useLargeArc: false
direction: PathArc.Counterclockwise
}
PathLine {
x: 0
y: 64
}
}
}
MouseArea {
anchors.fill: parent
anchors.leftMargin: 40
anchors.rightMargin: 40
onClicked: {
console.log("clicked")
}
}
}
DropShadow {
source: myItem
anchors.fill: myItem
radius: 3
horizontalOffset: 0
verticalOffset: 0
color: ReharkUIColor.brand06
spread: 0.2
}
然而，我的代码和阴影的设计之间仍然存在差异。我尝试了不同的方法，但无法解决这个问题，无法使我的阴影与设计一样柔和。
<details>
<summary>英文:</summary>
I make a tab bar demo of this:
And here is my code:
Item {
id: myItem
property bool active: false
property int customWidth: 200
width: 200 + 115 + 115
height: 72
x: 100
y: 20
containmentMask: myShape
Shape {
id: myShape
y: 8
antialiasing: true
width: 200 + 115 + 115
height: 64
anchors.centerIn: parent
ShapePath {
strokeWidth: 0
fillColor: "white"
startX: 0
startY: 64
PathArc {
x: 30
y: 30
radiusX: 32
radiusY: 32
useLargeArc: false
direction: PathArc.Counterclockwise
}
PathArc {
x: 64
y: 0
radiusX: 32
radiusY: 32
useLargeArc: false
direction: PathArc.Clockwise
}
PathLine {
x: 115
y: 0
}
PathLine {
x: 115 + myItem.customWidth
y: 0
}
PathLine {
x: 115 + myItem.customWidth + 51
y: 0
}
PathArc {
x: 115 + myItem.customWidth + 51 + 34
y: 34
radiusX: 32
radiusY: 32
useLargeArc: false
direction: PathArc.Clockwise
}
PathArc {
x: 115 + myItem.customWidth + 115
y: 64
radiusX: 32
radiusY: 32
useLargeArc: false
direction: PathArc.Counterclockwise
}
PathLine {
x: 0
y: 64
}
}
}
MouseArea {
anchors.fill: parent
anchors.leftMargin: 40
anchors.rightMargin: 40
onClicked: {
console.log("clicked")
}
}
}
DropShadow {
source: myItem
anchors.fill: myItem
radius: 3
horizontalOffset: 0
verticalOffset: 0
color: ReharkUIColor.brand06
spread: 0.2
}
But,is still has difference between my code and the design in Shadow.
I have tried different ways,but I can not solve this problem, I can not make my shadow as soft as the design.
</details>
# 答案1
**得分**: 1
好的，以下是翻译好的部分：
所以，我修复了你的形状，它实际上是一团糟。现在形状更通用，更容易调整其效果比例。你还可以改变曲线的宽度。
要从侧面添加更多阴影，有一个简单的解决方案：<br>
通过使用*模糊效果*并从形状中心进行*x缩放*，你可以实现所需的结果。
在这个示例中，我使用了[`MultiEffect`](https://doc.qt.io/qt-6/qml-qtquick-effects-multieffect.html)，它是Qt6中的一个多用途组件，有助于将多个效果合并成一个单一的组件。
*如果你使用的是Qt5，建议使用[`FastBlur`](https://doc.qt.io/qt-5/qml-qtgraphicaleffects-fastblur.html)代替投影阴影，以获得更好的性能。*
你还可以设置`colorizationColor`来改变形状下面阴影效果的颜色。
> **注意：** 在我看来，我不建议使用`Shape`，因为它没有正确实现，并且与其他库如*qnanopainter*或*pure shader*相比，效果非常差劲。
[![阴影预览图][1]][1]
```qml
component MyShape: Shape {
id: shape
property real halfHeight: height/2
property real curveWidth: height/3
ShapePath {
strokeWidth: 0
fillColor: '#fff'
startX: 0; startY: shape.height
PathQuad { x: curveWidth; relativeY: -halfHeight; relativeControlX: curveWidth; relativeControlY: 0}
PathQuad { x: 2 * curveWidth; y: 0; controlX: curveWidth; controlY: 0}
PathLine { x: shape.width - curveWidth * 2; y: 0 }
PathQuad { relativeX: curveWidth; relativeY: halfHeight; relativeControlX: curveWidth; controlY: 0}
PathQuad { relativeX: curveWidth; relativeY: halfHeight; relativeControlX: 0; controlY: shape.height}
PathLine { x: 0; y: shape.height }
}
}
MultiEffect {
source: myshape
anchors.fill: myshape
blurEnabled: true
blurMax: 25
blur: 1.0
colorizationColor: '#000'
colorization: .2
transform: Scale {
xScale: 1.05
origin.x: myshape.width / 2
}
}
MyShape {
id: myshape
width: 200; height: 50
anchors.centerIn: parent
}
英文:
So, I fixed your shape, which was really a mess. Now the shape is more generic and simpler to adjust the effect scale on it. you can also change the width of curves.
To add more shadow from the sides, there is a simple solution: <br>
By using a blur effect and x-scaling it from the shape center, you can achieve the desired result.
In this example, I used MultiEffect, which is a multipurpose component in Qt6 that helps merge multiple effects into a single component.
If you are using Qt5, use FastBlur instead of drop shadow for better performance.
You can also set the colorizationColor to change the color of the shadow effect beneath the shape.
> NOTE: In my opinion, I do not advise using Shape as it is not implemented properly and has very poor results compared to other libraries like qnanopainter or pure shader.
component MyShape: Shape {
id: shape
property real halfHeight: height/2
property real curveWidth: height/3
ShapePath {
strokeWidth: 0
fillColor: '#fff'
startX: 0; startY: shape.height
PathQuad { x: curveWidth; relativeY: -halfHeight; relativeControlX: curveWidth; relativeControlY: 0}
PathQuad { x: 2 * curveWidth; y: 0; controlX: curveWidth; controlY: 0}
PathLine { x: shape.width - curveWidth * 2; y: 0 }
PathQuad { relativeX: curveWidth; relativeY: halfHeight; relativeControlX: curveWidth; controlY: 0}
PathQuad { relativeX: curveWidth; relativeY: halfHeight; relativeControlX: 0; controlY: shape.height}
PathLine { x: 0; y: shape.height }
}
}
MultiEffect {
source: myshape
anchors.fill: myshape
blurEnabled: true
blurMax: 25
blur: 1.0
colorizationColor: '#000'
colorization: .2
transform: Scale {
xScale: 1.05
origin.x: myshape.width / 2
}
}
MyShape {
id: myshape
width: 200; height: 50
anchors.centerIn: parent
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论