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

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

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

问题

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

  1. 我创建了一个选项卡栏的示例：
  3. ![选项卡选择卡片](https://i.stack.imgur.com/Jg3FL.png)
  5. 以下是我的代码：
  7. Item {
  8.     id: myItem
  9.     property bool active: false
  10.     property int customWidth: 200
  12.     width: 200 + 115 + 115
  13.     height: 72
  14.     x: 100
  15.     y: 20
  17.     containmentMask: myShape
  19.     Shape {
  20.         id: myShape
  21.         y: 8
  22.         antialiasing: true
  23.         width: 200 + 115 + 115
  24.         height: 64
  25.         anchors.centerIn: parent
  27.         ShapePath {
  28.             strokeWidth: 0
  30.             fillColor: "white"
  31.             startX: 0
  32.             startY: 64
  34.             PathArc {
  35.                 x: 30
  36.                 y: 30
  37.                 radiusX: 32
  38.                 radiusY: 32
  39.                 useLargeArc: false
  40.                 direction: PathArc.Counterclockwise
  41.             }
  43.             PathArc {
  44.                 x: 64
  45.                 y: 0
  46.                 radiusX: 32
  47.                 radiusY: 32
  48.                 useLargeArc: false
  49.                 direction: PathArc.Clockwise
  50.             }
  52.             PathLine {
  53.                 x: 115
  54.                 y: 0
  55.             }
  57.             PathLine {
  58.                 x: 115 + myItem.customWidth
  59.                 y: 0
  60.             }
  62.             PathLine {
  63.                 x: 115 + myItem.customWidth + 51
  64.                 y: 0
  65.             }
  67.             PathArc {
  68.                 x: 115 + myItem.customWidth + 51 + 34
  69.                 y: 34
  70.                 radiusX: 32
  71.                 radiusY: 32
  72.                 useLargeArc: false
  73.                 direction: PathArc.Clockwise
  74.             }
  76.             PathArc {
  77.                 x: 115 + myItem.customWidth + 115
  78.                 y: 64
  79.                 radiusX: 32
  80.                 radiusY: 32
  81.                 useLargeArc: false
  82.                 direction: PathArc.Counterclockwise
  83.             }
  84.             PathLine {
  85.                 x: 0
  86.                 y: 64
  87.             }
  88.         }
  89.     }
  91.     MouseArea {
  92.         anchors.fill: parent
  93.         anchors.leftMargin: 40
  94.         anchors.rightMargin: 40
  95.         onClicked: {
  96.             console.log("clicked")
  97.         }
  98.     }
  99. }
  101. DropShadow {
  102.     source: myItem
  103.     anchors.fill: myItem
  104.     radius: 3
  105.     horizontalOffset: 0
  106.     verticalOffset: 0
  107.     color: ReharkUIColor.brand06
  108.     spread: 0.2
  109. }

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

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

  2. <details>
  3. <summary>英文:</summary>
  4. I make a tab bar demo of this:
  5. ![Tambor Choice Card](https://i.stack.imgur.com/Jg3FL.png)
  6. And here is my code:
  7. Item {
  8. id: myItem
  9. property bool active: false
  10. property int customWidth: 200
  11. width: 200 + 115 + 115
  12. height: 72
  13. x: 100
  14. y: 20
  15. containmentMask: myShape
  16. Shape {
  17. id: myShape
  18. y: 8
  19. antialiasing: true
  20. width: 200 + 115 + 115
  21. height: 64
  22. anchors.centerIn: parent
  23. ShapePath {
  24. strokeWidth: 0
  25. fillColor: &quot;white&quot;
  26. startX: 0
  27. startY: 64
  28. PathArc {
  29. x: 30
  30. y: 30
  31. radiusX: 32
  32. radiusY: 32
  33. useLargeArc: false
  34. direction: PathArc.Counterclockwise
  35. }
  36. PathArc {
  37. x: 64
  38. y: 0
  39. radiusX: 32
  40. radiusY: 32
  41. useLargeArc: false
  42. direction: PathArc.Clockwise
  43. }
  44. PathLine {
  45. x: 115
  46. y: 0
  47. }
  48. PathLine {
  49. x: 115 + myItem.customWidth
  50. y: 0
  51. }
  52. PathLine {
  53. x: 115 + myItem.customWidth + 51
  54. y: 0
  55. }
  56. PathArc {
  57. x: 115 + myItem.customWidth + 51 + 34
  58. y: 34
  59. radiusX: 32
  60. radiusY: 32
  61. useLargeArc: false
  62. direction: PathArc.Clockwise
  63. }
  64. PathArc {
  65. x: 115 + myItem.customWidth + 115
  66. y: 64
  67. radiusX: 32
  68. radiusY: 32
  69. useLargeArc: false
  70. direction: PathArc.Counterclockwise
  71. }
  72. PathLine {
  73. x: 0
  74. y: 64
  75. }
  76. }
  77. }
  78. MouseArea {
  79. anchors.fill: parent
  80. anchors.leftMargin: 40
  81. anchors.rightMargin: 40
  82. onClicked: {
  83. console.log(&quot;clicked&quot;)
  84. }
  85. }
  86. }
  87. DropShadow {
  88. source: myItem
  89. anchors.fill: myItem
  90. radius: 3
  91. horizontalOffset: 0
  92. verticalOffset: 0
  93. color: ReharkUIColor.brand06
  94. spread: 0.2
  95. }
  96. But,is still has difference between my code and the design in Shadow.
  97. I have tried different ways,but I can not solve this problem, I can not make my shadow as soft as the design.
  98. ![The Design](https://i.stack.imgur.com/3XWpS.png)
  99. </details>
  100. # 答案1
  101. **得分**: 1
  102. 好的，以下是翻译好的部分：
  103. 所以，我修复了你的形状，它实际上是一团糟。现在形状更通用，更容易调整其效果比例。你还可以改变曲线的宽度。
  104. 要从侧面添加更多阴影，有一个简单的解决方案：&lt;br&gt;
  105. 通过使用*模糊效果*并从形状中心进行*x缩放*，你可以实现所需的结果。
  106. 在这个示例中，我使用了[`MultiEffect`](https://doc.qt.io/qt-6/qml-qtquick-effects-multieffect.html)，它是Qt6中的一个多用途组件，有助于将多个效果合并成一个单一的组件。
  107. *如果你使用的是Qt5，建议使用[`FastBlur`](https://doc.qt.io/qt-5/qml-qtgraphicaleffects-fastblur.html)代替投影阴影，以获得更好的性能。*
  108. 你还可以设置`colorizationColor`来改变形状下面阴影效果的颜色。
  109. &gt; **注意：** 在我看来，我不建议使用`Shape`，因为它没有正确实现，并且与其他库如*qnanopainter*或*pure shader*相比，效果非常差劲。
  110. [![阴影预览图][1]][1]
  111. ```qml
  112. component MyShape: Shape {
  113. id: shape
  114. property real halfHeight: height/2
  115. property real curveWidth: height/3
  116. ShapePath {
  117. strokeWidth: 0
  118. fillColor: &#39;#fff&#39;
  119. startX: 0; startY: shape.height
  120. PathQuad { x: curveWidth; relativeY: -halfHeight; relativeControlX: curveWidth; relativeControlY: 0}
  121. PathQuad { x: 2 * curveWidth; y: 0; controlX: curveWidth; controlY: 0}
  122. PathLine { x: shape.width - curveWidth * 2; y: 0 }
  123. PathQuad { relativeX: curveWidth; relativeY: halfHeight; relativeControlX: curveWidth; controlY: 0}
  124. PathQuad { relativeX: curveWidth; relativeY: halfHeight; relativeControlX: 0; controlY: shape.height}
  125. PathLine { x: 0; y: shape.height }
  126. }
  127. }
  128. MultiEffect {
  129. source: myshape
  130. anchors.fill: myshape
  131. blurEnabled: true
  132. blurMax: 25
  133. blur: 1.0
  134. colorizationColor: &#39;#000&#39;
  135. colorization: .2
  136. transform: Scale {
  137. xScale: 1.05
  138. origin.x: myshape.width / 2
  139. }
  140. }
  141. MyShape {
  142. id: myshape
  143. width: 200; height: 50
  144. anchors.centerIn: parent
  145. }
英文:

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”的“阴影”更漂亮？

  1. component MyShape: Shape {
  2.     id: shape
  4.     property real halfHeight: height/2
  5.     property real curveWidth: height/3
  7.     ShapePath {
  8.         strokeWidth: 0
  9.         fillColor: &#39;#fff&#39;
  10.         startX: 0; startY: shape.height
  11.         PathQuad { x: curveWidth; relativeY: -halfHeight; relativeControlX: curveWidth; relativeControlY: 0}
  12.         PathQuad { x: 2 * curveWidth; y: 0; controlX: curveWidth; controlY: 0}
  13.         PathLine { x: shape.width - curveWidth * 2; y: 0 }
  14.         PathQuad { relativeX: curveWidth; relativeY: halfHeight; relativeControlX: curveWidth; controlY: 0}
  15.         PathQuad { relativeX: curveWidth; relativeY: halfHeight; relativeControlX: 0; controlY: shape.height}
  16.         PathLine { x: 0; y: shape.height }
  17.     }
  18. }
  20. MultiEffect {
  21.     source: myshape
  22.     anchors.fill: myshape
  23.     blurEnabled: true
  24.     blurMax: 25
  25.     blur: 1.0
  26.     colorizationColor: &#39;#000&#39;
  27.     colorization: .2
  29.     transform: Scale {
  30.         xScale: 1.05
  31.         origin.x: myshape.width / 2
  32.     }
  33. }
  35. MyShape {
  36.     id: myshape
  37.     width: 200; height: 50
  38.     
  39.     anchors.centerIn: parent
  40. }

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:

确定