猕猴桃中的圆角按钮角 [英] Rounding button corners in kivy

问题描述

为猕猴桃中的按钮创建圆角的首选方法是什么?

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

还有其他同样可行的方法来执行此任务吗?谢谢.

Are there other equally viable ways to perform this task? Thank you.

推荐答案

这是一个棘手的问题.就我而言，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.

这是一段代码，非常简单(我尝试解释

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.

警告:小部件仍然是矩形.这意味着即使您单击圆角，该按钮仍会接收该事件.我想这是一个合理的价格.如果您想做得更好，也许我可以为您提供帮助，但我们将需要使用一些数学方法来求和.文档中 Pong Game教程的技巧之一是，实际上，球是正方形.我在此处发布了一个相关问题，但是您需要使用

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

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