如何在Kivy中实现点击仅圆形区域生效的完美圆形按钮

Kivy 中ButtonBehavior的默认点击碰撞检测是基于组件的整个矩形边界框实现的，你仅在画布层绘制了圆形样式，没有修改碰撞检测逻辑，因此圆形外的四角区域依然会被判定为点击命中。

重写自定义按钮类CBB的collide_point方法，仅当点击坐标落在圆形范围内时才返回命中，修改后的Python代码如下：

from kivy.app import App
from kivy.uix.boxlayout import BoxLayout
from kivy.uix.behaviors import ButtonBehavior
from kivy.uix.label import Label

class Dom(BoxLayout):
    pass

class CBB(ButtonBehavior, Label):
    def collide_point(self, x, y):
        # 计算点击点到圆心的距离平方，避免开方运算提升性能
        distance_square = (x - self.center_x) ** 2 + (y - self.center_y) ** 2
        # 圆形半径和你KV中定义的200直径对应，为100
        return distance_square <= 100 ** 2

class CBApp(App):
    pass

CBApp().run()

你现有的KV文件CB.kv不需要做任何修改，直接使用原有代码即可正常生效。

如果后续需要动态调整圆形大小，避免硬编码半径，可以将半径设置为类属性和KV中的圆形尺寸绑定：

• Python中给CBB类添加半径属性：

class CBB(ButtonBehavior, Label):
    radius = 100
    def collide_point(self, x, y):
        distance_square = (x - self.center_x) ** 2 + (y - self.center_y) ** 2
        return distance_square <= self.radius ** 2

• KV中绑定Ellipse的大小到radius属性：

<CBB>:
    canvas:
        Color:
            rgba: (1, 0, 1, 0.1) if self.state == 'down' else (1,1,0,0.1)
        Ellipse:
            id:el
            pos: self.center[0]- self.radius, self.center[1]- self.radius
            size: self.radius*2, self.radius*2

后续只需修改CBB的radius属性即可同步修改圆形大小和碰撞检测范围。

内容的提问来源于stack exchange，提问作者Abhay Kumar