Kivy 中的圆角按钮角 [英] Rounding button corners in Kivy

问题描述

在 Kivy 中为按钮创建圆角的首选方法是什么?

What is the preferred way to create rounded corners for buttons in Kivy?

是否有其他同样可行的方法来执行此任务?

Are there other equally viable ways to perform this task?

推荐答案

这是一个棘手的问题.就我而言，Widgets 始终是矩形.但是我们可以分别使用 background_normal 和 background_down 属性更改背景并为正常和关闭状态放置几个图像.您还需要了解 border 属性.

This is a tricky one. As far as I am concern Widgets are always rectangles. But we can change the background and put a couple of images for the normal and down states using the background_normal and background_down properties respectively. Also you will need to understand the border property.

使用这两个名为 normal.png 和 down.png 的图像，您可以开始添加圆形边框.

With this two images called normal.png and down.png, you can start adding your round borders.

这是一段非常简单的代码(我试着解释一下border 属性如下):

Here is the piece of code, which is very straight forward (I try to explain the border property below):

from kivy.app import App
from kivy.uix.floatlayout import FloatLayout
from kivy.uix.button import Button
from kivy.lang import Builder

Builder.load_string("""
<Base>:
    Button:
        background_normal: 'normal.png'
        background_down: 'down.png'
        border: 30,30,30,30
""")


class Base(FloatLayout):
    pass

class ButtonsApp(App):
    def build(self):
        return Base()

if __name__ == "__main__":
    ButtonsApp().run()

我的理解方式(我可能是错的)是这样的.border: 30,30,30,30 中的值表示顶部、右侧、底部和左侧有多少像素将用于背景按钮的边框.其余部分将填充中间部分.我不确定这里.顺便说一句，如果你想看一些很酷的东西，请参见例如 border: 150,150,150,150.原因是我们拾取的边框比实际图像大.

The way I understand this (and I might be wrong) is this. The values in border: 30,30,30,30 tells how many pixels on the top, right, bottom and left are going to be used for the border of the background's button. The rest is going to be filled with the middle part. I am not sure here. By the way, If you want to see something cool, see for example border: 150,150,150,150. The reason is that we are picking up a border bigger than the actual image.

警告:小部件仍然是矩形.这意味着即使您单击圆角，按钮仍会收到事件.我想这是一个合理的价格.如果你想做得更好，也许我可以帮助你，但我们需要使用一些数学来碰撞点.文档中乒乓球游戏教程的技巧之一是，实际上球是一个正方形.我在此处发布了一个相关问题，但您需要使用画布

The caveat: Widgets are still rectangles. That means that even if you click on the rounded corners, the button still receive the event. I guess it is a fair price. If you want to do something better, maybe I can help you but we will need to use some maths to collide the points. One of the tricks with the Pong Game tutorial in the documentation is that actually the ball is a square. I posted a related question here, but you will need to use the Canvas

这篇关于Kivy 中的圆角按钮角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！