阴影被不可见的边界打断

Question

我正在使用下面的代码制作一个简单的按钮

Item {
  id: menuButton
  width: 124
  height: 124

  Rectangle {
    id: menuButtonIcon
    x: parent.width - 75
    y: parent.height - 80
    color: "#C02A25"
    width: 60
    height: 60
    radius: width * 0.5
    antialiasing: true
  }

  DropShadow {
        id: menuButtonIconShadow
        source: menuButtonIcon
        anchors.fill: menuButtonIcon
        width: source.width
        height: source.height
        cached: true
        radius: 8.0
        samples: 16
        color: "#000000"
        smooth: true
        horizontalOffset: 10.0
        verticalOffset: 10.0
        spread: 0.2
        transparentBorder: True
    }
}

结果阴影看起来突然结束

为什么会这样，我该如何解决？

Answer 1

只要您在true标记中写True而不是transparentBorder，代码就可以了。

Answer 2

增加项目的width，看看它是否已修复。

id: menuButton
width: 140
height: 140

或减小给定60X60维度的Rectangle的大小。 因为按钮的位置从x=124-75开始，49和y=124-80 44。

外部框大小为124，您的按钮从49开始，结束109（因为width为60）。外框中的阴影仅剩11像素，这对于您正在使用的radius和spread来说是不够的。

您还可以尝试将点差缩小到0.15和radius到6.0以减少阴影