如何在kivy python中制作一个不规则的四边形按钮？

Posted 2023-04-14

【中文标题】如何在kivy python中制作一个不规则的四边形按钮？

【英文标题】：How to make an irregular quadrilateral shaped button in kivy python?

【发布时间】：2021-09-19 16:14:27

【问题描述】：

我正在尝试用 kivy 制作一个 android 应用程序。它的用户界面从名为“2D”和“3D”的这两个按钮开始。请帮我用 kivy 创建一个不规则的四边形按钮。

【参考方案1】：

您可以扩展 Button 使其表现得好像是两个 Buttons：

class MyButton(Button):
    my_state = StringProperty('')  # this will be 'b1' or 'b2', even when button is not down
    my_down_image = StringProperty('')
    def on_touch_down(self, touch):
        if self.collide_point(*touch.pos):
            rx, ry = self.to_widget(*touch.pos, relative=True)
            if ry > self.height/2.0:  # more complex geometry calculation required
                self.my_down_image = 'B2Down.png'
                self.my_state = 'b2'
            else:
                self.my_down_image = 'B1Down.png'
                self.my_state = 'b1'
        return super(MyButton, self).on_touch_down(touch)

MyButton 类为Button 添加了两个属性，即my_state 和my_down_image 属性。 my_state 属性将是 b1 或 b2，具体取决于按下的子按钮（由 on_touch_down() 设置）。 my_down_image 属性设置为B1Down.png 或B2Down.png，这描述了我们希望MyButton 在按下B1 或B2 时的样子。上面代码中的简单 y 坐标比较将不起作用，并且必须更复杂才能正确确定按下了哪个子按钮。 MyButton 可以像这样在kv 中使用：

MyButton:
    background_normal: 'B1andB2.png'
    on_press: app.do_butt_press(self)
    on_release: app.do_butt_release(self)

app 方法如下所示：

def do_butt_press(self, button):
    print('on_butt_press', button.state, button.my_state)

def do_butt_release(self, button):
    print('on_butt_release', button.state, button.my_state)

在kv:

<-MyButton>:
    state_image: self.background_normal if self.state == 'normal' else self.my_down_image
    disabled_image: self.background_disabled_normal if self.state == 'normal' else self.background_disabled_down
    canvas:
        Color:
            rgba: self.background_color
        BorderImage:
            border: self.border
            pos: self.pos
            size: self.size
            source: self.disabled_image if self.disabled else self.state_image
        Color:
            rgba: 1, 1, 1, 1
        Rectangle:
            texture: self.texture
            size: self.texture_size
            pos: int(self.center_x - self.texture_size[0] / 2.), int(self.center_y - self.texture_size[1] / 2.)

上述kv 规则大部分只是Kivy 使用的默认Button 规则的副本。唯一的变化是在state_image 定义中使用了my_down_image。

对于本例，B1andB2.png 可以是：

B1Down.png:

和B2Down.png:

【讨论】：

非常感谢兄弟。它对我有用。