Draw a shadow border on ModalView with kivy Vertex Instruction? - python-3.x

Question

I am trying to draw a shadow for a ModalView using the Canvas Line vertex instructions. I.e. the ModalView bottom and left sides should have a slight shadowy overlay when open. I have tried calling the ModalView property overlay_color with no effect and Canvas Line vertex instructions do not create the right effect. But I cannot seem to only draw a bottom and left border that gives the shadowy effect.
<PopScrollModal>
on_open: app.root._is_modal_open = True
on_dismiss: app.root._is_modal_open = False
id: popscroll
auto_dismiss: True
orientation: 'vertical'
size_hint: (0.94, 0.41)
border: [50, 50, 16, 16]
overlay_color: [0.1, 0.1, 0.1, 0.4]
pos_hint: {'top': 0.72}
background_normal: ''
background_color: (1, 1, 1, 0)
background: 'white.png'
canvas:
Color:
rgba: app.theme_cls.bg_dark
RoundedRectangle:
size: self.size
pos: self.pos
radius: [7,]
canvas.after:
Color:
rgba: (0.2, 0.2, 0.2, 0.4)
Line:
width: 1.
rounded_rectangle: (self.x, self.y, self.width, self.height, 7)
RecycleView:
id: view_popscroll
viewclass: 'PopScrollBut'
pos_hint: {'top': 1}
size_hint: [1, 0.99]
do_scroll_y: True
RecycleGridLayout:
cols: 1
spacing: 1
default_size: None, 70
default_size_hint: 1, None
size_hint: 1, None
size: self.minimum_size
This line instruction draws on the bottom but does not adhere to the radius of the canvas:
canvas.after:
Color:
rgba: (0.2, 0.2, 0.2, 0.4)
Line:
width: 1.
close: False
points: self.pos[0], self.pos[1], self.pos[0] + self.size[0], self.pos[1]]
The Line instruction only draws a line around the ModalView.
Can somebody help to understand how to set the Points so they only appear left and bottom or set the overlay_color in the same way?

Answer 1

You can do that using BorderImage. It is not well documented and difficult to understand how it is actually intended to work. But here is an example that mostly does what you want:
class MyPop(Popup):
pass
kv = '''
<MyPop>:
canvas.before:
BorderImage:
source: 'shadow32.png'
border: 30, 0, 0, 30
pos: self.x - 30, self.y - 30
size: self.width + 60, self.height + 60
'''
And here is the shadow32.png that is used above: