community
community copied to clipboard
documize
BoxShadow bug
The BoxShadow instruction has a bug: it does not take into account the relative size of the widget. I'm going to demonstrate it now:
from kivy.app import App
from kivy.lang import Builder
KV = """
Screen:
canvas:
Color:
rgba: 1, 1, 1, 1
Rectangle:
pos: self.pos
size: self.size
Button:
pos_hint: {"center_x": .5, "center_y": .5}
size_hint: .5, .5
background_color: 0, 0, 0, 0
canvas.before:
Color:
rgba: 0, 0, 0, .85
BoxShadow:
pos: self.pos
size: self.size
offset: 0, -2
spread_radius: -4, -4
border_radius: 14, 14, 14, 14
blur_radius: 10
canvas.after:
Color:
rgba: 1, 1, 1, 1
RoundedRectangle:
pos: self.pos
size: self.size
radius: [20,]
"""
class Example(App):
def build(self):
return Builder.load_string(KV)
Example().run()
When we run this code, we see what we expected to see:
And now let's increase the size of the application window:
https://github.com/kivy/kivy/assets/16930280/fa5d61dc-c392-46ec-af4e-5e54de6ee1c5
We see that the borders of the shadow become sharp, their edges are cut off and the radius of the shadow no longer corresponds to the original one:
And this is how, on closer inspection, the shadow looks, the size of the parent widget of which has not changed:
Now look at this example:
from kivy.app import App
from kivy.animation import Animation
from kivy.lang import Builder
KV = """
Screen:
on_touch_down: app.change_size_widget()
canvas:
Color:
rgba: 1, 1, 1, 1
Rectangle:
pos: self.pos
size: self.size
Button:
id: button
pos_hint: {"center_x": .5, "center_y": .5}
size_hint: .3, .3
background_color: 0, 0, 0, 0
canvas.before:
Color:
rgba: 0, 0, 0, .85
BoxShadow:
pos: self.pos
size: self.size
offset: 0, -2
spread_radius: -4, -4
border_radius: 14, 14, 14, 14
blur_radius: 10
canvas.after:
Color:
rgba: 1, 1, 1, 1
RoundedRectangle:
pos: self.pos
size: self.size
radius: [20,]
"""
class Example(App):
def change_size_widget(self):
Animation(size_hint=(.8, .8)).start(self.root.ids.button)
def build(self):
return Builder.load_string(KV)
Example().run()
https://github.com/kivy/kivy/assets/16930280/3189960f-5ea0-427d-8060-ea02d600954b
Depending on the size of the screen, the shadow has completely different properties:
