Kivy技术问题：如何实现多段线条组成图形的拖拽移动

你可以沿用原椭圆拖拽的核心逻辑，将线条或组合图形封装为独立的Widget，通过绑定Widget的pos属性实时更新图形位置，同时处理触摸事件实现拖拽。以下是具体实现方案：

核心思路 #

1. 将需要拖拽的线条/组合图形放在自定义Widget的画布中
2. 绑定Widget的pos到重绘方法，位置变化时同步更新图形坐标
3. 实现触摸事件（on_touch_down/on_touch_move/on_touch_up）处理拖拽逻辑

完整代码示例 #

from kivy.app import App
from kivy.uix.widget import Widget
from kivy.graphics import Color, Line
from kivy.core.window import Window
from random import randint

class LineGroupWidget(Widget):
    def __init__(self, line_points, **kwargs):
        super(LineGroupWidget, self).__init__(**kwargs)
        # 存储线条相对于Widget原点的偏移坐标
        self.relative_points = line_points
        with self.canvas:
            Color(1, 0, 0, 0.8)
            self.lines = Line(points=self._get_absolute_points(), width=2)
        # 绑定pos变化触发重绘
        self.bind(pos=self.redraw)

    def _get_absolute_points(self):
        # 将相对坐标转换为窗口绝对坐标
        absolute_points = []
        for i in range(0, len(self.relative_points), 2):
            x = self.relative_points[i] + self.x
            y = self.relative_points[i+1] + self.y
            absolute_points.extend([x, y])
        return absolute_points

    def redraw(self, *args):
        # 更新线条的绝对坐标
        self.lines.points = self._get_absolute_points()

    def on_touch_down(self, touch):
        if self.collide_point(*touch.pos):
            touch.grab(self)
            # 记录触摸点与Widget的偏移，避免拖拽跳变
            self.offset_x = touch.x - self.x
            self.offset_y = touch.y - self.y
            return True
        return super(LineGroupWidget, self).on_touch_down(touch)

    def on_touch_up(self, touch):
        if touch.grab_current is self:
            touch.ungrab(self)
            return True
        return super(LineGroupWidget, self).on_touch_up(touch)

    def on_touch_move(self, touch):
        if touch.grab_current is self:
            # 根据偏移更新Widget位置
            self.pos = (touch.x - self.offset_x, touch.y - self.offset_y)
            return True
        return super(LineGroupWidget, self).on_touch_move(touch)

class RootWidget(Widget):
    def __init__(self, **kwargs):
        super(RootWidget, self).__init__(**kwargs)
        # 添加不同的组合线条图形
        # 三角形
        triangle_points = [0,0, 50,100, 100,0, 0,0]
        self.add_widget(LineGroupWidget(line_points=triangle_points, pos=(randint(0, Window.width-100), randint(0, Window.height-100))))
        # 折线
        polyline_points = [0,0, 30,40, 60,20, 90,50]
        self.add_widget(LineGroupWidget(line_points=polyline_points, pos=(randint(0, Window.width-100), randint(0, Window.height-100))))
        # 矩形
        rect_points = [0,0, 80,0, 80,60, 0,60, 0,0]
        self.add_widget(LineGroupWidget(line_points=rect_points, pos=(randint(0, Window.width-100), randint(0, Window.height-100))))

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

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

关键说明 #

• 相对坐标设计：relative_points存储线条相对于Widget原点的坐标，Widget移动时只需将相对坐标加上Widget的pos，即可得到线条在窗口中的绝对位置
• 触摸偏移修正：on_touch_down时记录触摸点与Widget原点的偏移量，拖拽时用触摸位置减去偏移量更新pos，避免图形跳变到触摸点
• 组合图形扩展：如果需要更复杂的组合图形（如线条+椭圆），只需在自定义Widget的画布中添加对应元素，并在redraw方法同步更新所有元素的位置

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