python - Kivy (Python) - 椭圆点击事件

Question

我正在尝试翻译 a simple canvas app 的开头部分我用 JavaScript 编写了 Kivy 框架。我已经能够沿圆周分布顶点，但无论是尝试使用 Python 还是 Kv 语言，我都无法在每个顶点上注册点击事件。一个好的开始可能是改变点击的任何顶点的大小。欢迎任何提示、反馈和解决方案。

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.widget import Widget
from kivy.graphics import *
from kivy.properties import NumericProperty
from random import randint
import math

class Vertex(Widget):
    def __init__(self, position=(50,50), **kwargs):
        super(Vertex, self).__init__(**kwargs)
        self.position = position
        self.size = (10,10)


    def draw(self):
     with self.canvas:
        Color(1., 0, 0)
        Ellipse(pos=self.position, size=self.size)


class ChromaticCircle(Widget):
    vertices = []

    def __init__(self, radius=100, **kwargs):
        super(ChromaticCircle, self).__init__(**kwargs)
        self.radius = radius
        self.draw()

    def draw(self):
        interval = (math.pi * 2) / 12

        with self.canvas:
            Color(1., 0, 0)

            for i in range(1, 13):
                angle = (math.radians(360) / 12) * (i + 9)
                position = ((self.center_x + 200) + (self.radius*math.cos(angle)), (self.center_y + 200)+(self.radius)*math.sin(angle))
                self.vertices.append(Vertex(position))

            for j in range(len(self.vertices)):
                self.vertices[j].draw()


class MyApp(App):
    def build(self):
        return ChromaticCircle()

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

Answer 1

您可以使用 on_touch_down 方法中的 collide_point 方法来捕获对您的 Vertex 小部件的点击，以检查 Touch 事件发生在 Vertex 中:

from kivy.app import App
from kivy.uix.label import Label
from kivy.uix.widget import Widget
from kivy.graphics import *
from kivy.properties import NumericProperty
from random import randint
import math

class Vertex(Widget):
    def __init__(self, position=(50,50), **kwargs):
        super(Vertex, self).__init__(**kwargs)
        self.position = position
        self.size = (10,10)
        self.pos = position    # need to set the `pos` as `collide_point` uses it

    def draw(self):
     with self.canvas:
        Color(1., 0, 0)
        Ellipse(pos=self.position, size=self.size)


class ChromaticCircle(Widget):
    vertices = []

    def __init__(self, radius=100, **kwargs):
        super(ChromaticCircle, self).__init__(**kwargs)
        self.radius = radius
        self.draw()

    def on_touch_down(self, touch):
        # check if the touch is on a Vertex
        for vert in self.vertices:
            if vert.collide_point(touch.x, touch.y):
                print('click on vertex: ' + str(vert.pos))
                return True
        return super(ChromaticCircle, self).on_touch_down(touch)

    def draw(self):
        interval = (math.pi * 2) / 12

        with self.canvas:
            Color(1., 0, 0)

            for i in range(1, 13):
                angle = (math.radians(360) / 12) * (i + 9)
                position = ((self.center_x + 200) + (self.radius*math.cos(angle)), (self.center_y + 200)+(self.radius)*math.sin(angle))
                print('adding vertex at ' + str(position))
                self.vertices.append(Vertex(position))

            for j in range(len(self.vertices)):
                self.vertices[j].draw()


class MyApp(App):
    def build(self):
        return ChromaticCircle()

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

您可能需要考虑一些额外的细节。 Ellipse的pos是左下角，所以你的顶点位置不在绘制的Ellipse的中心。