【问题标题】:Draw a shadow border on ModalView with kivy Vertex Instruction?使用 kivy 顶点指令在 ModalView 上绘制阴影边框?
【发布时间】:2020-09-20 10:28:35
【问题描述】:

我正在尝试使用Canvas Line 顶点指令为ModalView 绘制阴影。 IE。 ModalView 底部和左侧在打开时应该有轻微的阴影覆盖。我试过调用ModalView 属性overlay_color 没有效果,Canvas Line 顶点指令不会产生正确的效果。但我似乎不能只画一个产生阴影效果的底部和左侧边框。

<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

这条线指令在底部绘制,但不遵循画布的半径:

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

Line 指令仅在ModalView 周围画一条线。 有人可以帮助了解如何设置Points,使它们只出现在左侧和底部,或者以同样的方式设置overlay_color

【问题讨论】:

    标签: python-3.x kivy trigonometry kivy-language vertex


    【解决方案1】:

    您可以使用BorderImage 做到这一点。它没有很好的文档记录,也很难理解它实际上是如何工作的。但这里有一个例子,主要做你想做的事:

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

    这是上面使用的shadow32.png

    【讨论】:

    • 非凡!在这里,我正在完善我的三角书,以了解Points 属性,再次@John Anderson,您使复杂化看起来如此简单。谢谢...再次!
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-03-03
    • 1970-01-01
    • 2010-11-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多