首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >用kivy顶点指令在ModalView上画一个阴影边框?

用kivy顶点指令在ModalView上画一个阴影边框?
EN

Stack Overflow用户
提问于 2020-09-20 10:28:35
回答 1查看 191关注 0票数 0

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

代码语言:javascript
运行
复制
<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

这一行指令在底部绘制,但不坚持画布的半径:

代码语言:javascript
运行
复制
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吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-09-22 03:23:29

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

代码语言:javascript
运行
复制
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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63977934

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档