CODEWITHSUNDEEP
qtqml
dearn44
dearn44

Reputation: 3422

Drop-shadow is interrupted by invisible borders

I am making a simple button using the code below

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
    }
}

And the resulting shadow looks like it is ending abruptly

enter image description here

Why is that, and how can I fix it?

Upvotes: 2

Views: 220

Answers (2)

Trinadh venna
Trinadh venna

Reputation: 475

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

Upvotes: 0

ealione
ealione

Reputation: 1636

The code is fine as long as you write true instead of True, in the transparentBorder tag.

Upvotes: 3

Related Questions