在QML中，如何使“Shape”的“阴影”更漂亮？

huangapple
go评论82阅读模式
英文:

In qml, how to make the "shadow" of "Shape" more beautiful?

问题

这是你提供的代码的翻译部分：

我创建了一个选项卡栏的示例：

![选项卡选择卡片](https://i.stack.imgur.com/Jg3FL.png)

以下是我的代码：

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
}

然而，我的代码和阴影的设计之间仍然存在差异。我尝试了不同的方法，但无法解决这个问题，无法使我的阴影与设计一样柔和。

在QML中，如何使“Shape”的“阴影”更漂亮？


<details>
<summary>英文:</summary>
I make a tab bar demo of this:
![Tambor Choice Card](https://i.stack.imgur.com/Jg3FL.png)
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: &quot;white&quot;
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(&quot;clicked&quot;)
}
}
}
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.
![The Design](https://i.stack.imgur.com/3XWpS.png)
</details>
# 答案1
**得分**: 1
好的，以下是翻译好的部分：
所以，我修复了你的形状，它实际上是一团糟。现在形状更通用，更容易调整其效果比例。你还可以改变曲线的宽度。
要从侧面添加更多阴影，有一个简单的解决方案：&lt;br&gt;
通过使用*模糊效果*并从形状中心进行*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`来改变形状下面阴影效果的颜色。
&gt; **注意：** 在我看来，我不建议使用`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: &#39;#fff&#39;
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: &#39;#000&#39;
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.

在QML中，如何使“Shape”的“阴影”更漂亮？

component MyShape: Shape {
    id: shape

    property real halfHeight: height/2
    property real curveWidth: height/3

    ShapePath {
        strokeWidth: 0
        fillColor: &#39;#fff&#39;
        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: &#39;#000&#39;
    colorization: .2

    transform: Scale {
        xScale: 1.05
        origin.x: myshape.width / 2
    }
}

MyShape {
    id: myshape
    width: 200; height: 50
    
    anchors.centerIn: parent
}

huangapple
  • 本文由 发表于 2023年7月11日 10:07:38
  • 转载请务必保留本文链接：https://go.coder-hub.com/76658313.html
  • qml
  • qt
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定