Kivy中PNG圆形图片按钮显示为柠檬状变形如何解决

图标变形来自Kivy Button的两个默认机制：

• Kivy的Button控件默认对背景图使用九切片（BorderImage）缩放规则，默认边框切割值为(16,16,16,16)，会把完整的圆形图标切割为9个区域分别拉伸，直接造成图案错位、重复堆叠，就是你看到的双柠檬变形效果。
• 你给右侧圆形按钮设置的size_hint=(0.125, 0.15)宽高比不是1:1，就算解决切割问题，圆形也会被拉伸为椭圆。

只需要修改两个圆形菜单项的参数即可：

1. 给按钮添加border=(0,0,0,0)属性，关闭九切片切割，让背景图完整缩放
2. 统一圆形按钮的宽高比例为1:1，保证圆形不会被拉伸。如果需要适配窗口自由缩放，可以给按钮绑定尺寸回调，强制宽高始终相等。

from kivy.app import App 
from kivy.uix.button import Button 
from kivy.config import Config
from kivy.uix.floatlayout import FloatLayout

buttonSize = (0.3, 0.2)
# 统一圆形按钮的尺寸占比，宽高保持1:1
circle_btn_size = 0.125

Config.set('graphics', 'resizable', True)

class MyApp(App):

    def build(self):

        layout = FloatLayout()

        button1 = Button(
            text='1st Function', 
            size_hint=buttonSize,
            pos_hint={'x':.05, 'y':.75}
        )
        
        button2 = Button(
            text='2nd Function',
            size_hint=buttonSize,
            pos_hint={'x':.4, 'y':.75}
        )

        button3 = Button(
            text='3rd Function',
            size_hint=buttonSize,
            pos_hint={'x':.05, 'y':.475}
        )

        button4 = Button(
            text='4th Function',
            size_hint=buttonSize,
            pos_hint={'x':0.4, 'y':0.475}
        )

        button5 = Button(
            text='5th Function',
            size_hint=buttonSize,
            pos_hint={'x':.05, 'y':.2}
        )

        button6 = Button(
            text='6th Function',
            size_hint=buttonSize,
            pos_hint={'x':0.4, 'y':0.2}
        )

        menuButton = Button(
            background_normal='Circular Button.png',
            background_down='Circular Button Down.png',
            size_hint=(circle_btn_size, circle_btn_size),
            pos_hint={'x':0.8, 'y':0.8},
            # 关闭九切片切割
            border=(0, 0, 0, 0)
        )

        patientButton = Button(
            background_normal='Patient Button.png',
            background_down='Patient Button Down.png',
            size_hint=(circle_btn_size, circle_btn_size),
            pos_hint={'x':0.8, 'y':0.5},
            # 关闭九切片切割
            border=(0, 0, 0, 0)
        )

        layout.add_widget(button1)
        layout.add_widget(button2)
        layout.add_widget(button3)
        layout.add_widget(button4)
        layout.add_widget(button5)
        layout.add_widget(button6)
        layout.add_widget(menuButton)
        layout.add_widget(patientButton)

        return layout

if __name__ == '__main__':
    app = MyApp()
    app.run()

如果后续窗口缩放时出现圆形按钮比例错位，可以给圆形按钮加一个尺寸监听回调，强制宽高相等，在return layout前添加如下代码即可：

def force_circle_size(instance, value):
    side_len = min(instance.width, instance.height)
    instance.size = (side_len, side_len)

menuButton.bind(size=force_circle_size)
patientButton.bind(size=force_circle_size)

添加后不管窗口怎么拉伸，按钮都会始终保持正圆形，不会变形。

内容的提问来源于stack exchange，提问作者Zach M.