如何实现OpenGL Canvas中十字图形的鼠标拖拽移动（Vispy+Qt）

针对你的需求，以下是实现红色十字鼠标拖拽的完整方案，解决点击检测和位置更新的问题：

核心思路 #

1. 点击检测：将鼠标屏幕坐标转换为画布数据坐标，判断点击点是否落在十字线条的范围内（结合线长、线宽）。
2. 位置更新：通过更新十字图形的数据源而非直接修改pos属性来实现位置刷新，拖拽时记录鼠标与十字中心的偏移量，保证拖拽过程平滑。

完整代码示例 #

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QWidget, QVBoxLayout
from vispy import app
from vispy.scene import SceneCanvas, visuals as scene_visuals

class CrossCanvas(SceneCanvas):
    def __init__(self, parent=None):
        super().__init__(keys='interactive', parent=parent)
        self.unfreeze()
        # 初始化视图与相机
        self.view = self.central_widget.add_view()
        self.view.camera = 'panzoom'
        self.view.camera.set_range(x=(-10, 10), y=(-10, 10))

        # 十字图形参数
        self.cross_center = (0, 0)  # 中心位置
        self.cross_length = 2       # 十字臂长
        self.cross_width = 2        # 线条宽度

        # 创建十字：两条交叉线（水平+垂直）
        self.cross_lines = scene_visuals.Line(parent=self.view.scene)
        self._update_cross()

        # 拖拽状态变量
        self.is_dragging = False
        self.drag_offset = (0, 0)  # 鼠标点击点与十字中心的偏移

        # 绑定鼠标事件
        self.events.mouse_press.connect(self._on_mouse_press)
        self.events.mouse_move.connect(self._on_mouse_move)
        self.events.mouse_release.connect(self._on_mouse_release)
        self.freeze()

    def _update_cross(self):
        # 根据当前中心位置更新十字的线条数据
        cx, cy = self.cross_center
        # 构造十字的四个端点坐标
        line_positions = [
            [cx - self.cross_length/2, cy],
            [cx + self.cross_length/2, cy],
            [cx, cy - self.cross_length/2],
            [cx, cy + self.cross_length/2]
        ]
        # 更新线条数据
        self.cross_lines.set_data(pos=line_positions, color=(1, 0, 0, 1), width=self.cross_width)

    def _on_mouse_press(self, event):
        if event.button == 1:  # 仅响应左键点击
            # 将鼠标屏幕坐标转换为画布数据坐标
            data_pos = self.view.scene.transform.imap(event.pos)
            mx, my = data_pos
            cx, cy = self.cross_center

            # 判断是否点击到十字：点落在水平线或垂直线的范围内
            hit_horizontal = (abs(my - cy) <= self.cross_width/2) and (abs(mx - cx) <= self.cross_length/2)
            hit_vertical = (abs(mx - cx) <= self.cross_width/2) and (abs(my - cy) <= self.cross_length/2)
            
            if hit_horizontal or hit_vertical:
                self.is_dragging = True
                # 记录偏移量，避免拖拽时十字跳转到鼠标位置
                self.drag_offset = (cx - mx, cy - my)

    def _on_mouse_move(self, event):
        if self.is_dragging:
            # 转换当前鼠标位置到数据坐标
            data_pos = self.view.scene.transform.imap(event.pos)
            mx, my = data_pos
            # 计算新的十字中心
            new_center = (mx + self.drag_offset[0], my + self.drag_offset[1])
            self.cross_center = new_center
            # 更新十字显示
            self._update_cross()

    def _on_mouse_release(self, event):
        if event.button == 1:
            self.is_dragging = False

class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("Draggable Red Cross")
        central_widget = QWidget()
        self.setCentralWidget(central_widget)
        layout = QVBoxLayout(central_widget)
        # 添加Vispy画布到Qt布局
        self.canvas = CrossCanvas(parent=central_widget)
        layout.addWidget(self.canvas.native)

if __name__ == '__main__':
    qt_app = QApplication(sys.argv)
    main_win = MainWindow()
    main_win.show()
    # 启动Vispy与Qt的事件循环
    app.run()

关键细节说明 #

1. 点击检测逻辑：

   • 使用imap方法将屏幕坐标（像素）转换为画布的数据坐标（与相机范围一致），避免屏幕缩放/平移影响检测准确性。
   • 通过判断点击点是否落在十字的线条区域内（线宽的一半范围内，且在线长范围内），确认是否命中十字。

2. 位置更新方式：

   • 十字的位置存储在cross_center变量中，每次更新后调用_update_cross重新生成线条的坐标数据，再通过set_data方法更新LineVisual的显示。
   • 直接修改pos属性无效是因为Vispy的视觉元素数据是通过set_data批量更新的，单独修改属性不会触发视图刷新。

3. 拖拽平滑性：

   • 记录鼠标点击点与十字中心的偏移量，拖拽时基于当前鼠标位置加上偏移量计算新中心，保证十字与鼠标的相对位置不变，避免跳跃。

可选调整 #

• 如果使用scene_visuals.Markers绘制十字（marker='+'），只需将线条替换为标记，点击检测改为判断鼠标点到中心的距离是否小于标记大小的一半，更新时修改markers的pos数据即可。
• 可根据需求调整十字的cross_length（臂长）和cross_width（线宽）参数。

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