阴影被不可见的边框打断

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

Increase the width of the item and see if it fixes.

id: menuButton
width: 140
height: 140

or reduce the size of the Rectangle which was given 60X60 dimension. Because the position of the button starts at x=124-75 which is 49 and y=124-80 which is 44.

The outer box size is 124 your button starts at 49 and ends 109 (because the width is given as 60). You are left with only 11 pixels for the shadow in the outer box which is not sufficient for the radius and spread that you are using.

You can also try reducing the spread to 0.15 and radius to 6.0 to reduce the shadow

Answer 2

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

阴影被不可见的边框打断

Drop-shadow is interrupted by invisible borders

qt

qml