Qt quick用OpenGL在image上逐点画轨迹二维点

如果要在Qt Quick中使用OpenGL在Image上逐点画轨迹，需要对上面的代码进行修改。下面是一个简单的示例：

1.首先，我们需要在QML文件中加载OpenGL，并创建一个绘制线条的函数：

import QtQuick 2.0 import QtQuick.Window 2.0 import QtQuick.Controls 1.0 import QtOpenGL 2.0 Window { id: mainWindow width: 640 height: 480 visible: true // 创建OpenGL窗口 OpenGLSurface { id: glSurface anchors.fill: parent antialiasing: true focus: true // 设置OpenGL属性 property variant glContext: undefined property variant glFunctions: undefined property bool isDrawing: false property int lastX: -1 property int lastY: -1 Component.onCompleted: { glContext = context; glFunctions = context.functions; // 设置OpenGL参数 glFunctions.glViewport(0, 0, width * mainWindow.devicePixelRatio, height * mainWindow.devicePixelRatio); glFunctions.glClearColor(0, 0, 0, 1); glFunctions.glClear(glFunctions.GL_COLOR_BUFFER_BIT | glFunctions.GL_DEPTH_BUFFER_BIT | glFunctions.GL_STENCIL_BUFFER_BIT); glFunctions.glEnable(glFunctions.GL_BLEND); glFunctions.glBlendFunc(glFunctions.GL_SRC_ALPHA, glFunctions.GL_ONE_MINUS_SRC_ALPHA); } // 在OpenGL上画线 function drawLine(x1, y1, x2, y2, color) { glFunctions.glLineWidth(2); glFunctions.glBegin(glFunctions.GL_LINES); glFunctions.glColor4f(color.r, color.g, color.b, color.a); glFunctions.glVertex2f((x1 * 2 / width - 1), (y1 * 2 / height - 1)); glFunctions.glVertex2f((x2 * 2 / width - 1), (y2 * 2 / height - 1)); glFunctions.glEnd(); } // 绘制完成后更新OpenGL onFrameSwapped: { glContext.swapBuffers(); } } // 加载图片 Image { id: img source: "qrc:/image.png" visible: true // 鼠标按下事件，开始绘制 MouseArea { anchors.fill: parent onPressed: { glSurface.isDrawing = true; glSurface.lastX = mouse.x; glSurface.lastY = mouse.y; } // 鼠标移动事件，绘制轨迹 onPositionChanged: { if (glSurface.isDrawing) { var color = Qt.rgba(1, 0, 0, 1); glSurface.drawLine(glSurface.lastX, glSurface.lastY, mouse.x, mouse.y, color); glSurface.lastX = mouse.x; glSurface.lastY = mouse.y; } } // 鼠标释放事件，停止绘制 onReleased: { glSurface.isDrawing = false; } } } }

C 开发交流 赀料君羊：666064665

2.在OpenGLSurface组件中，我们添加了两个属性：isDrawing表示是否正在绘制，lastX和lastY表示上一个点的坐标位置。

3.通过drawLine()函数，我们可以在图片上绘制线条。我们使用glLineWidth()函数设置线条宽度，然后使用glColor4f()函数设置线条颜色。最后，我们使用glVertex2f()函数指定线条的两个端点位置。

4.在Image组件中，我们添加了一个MouseArea鼠标事件处理器。在鼠标按下时，我们将isDrawing设为true，并记录鼠标的坐标作为起点。在鼠标移动时，如果isDrawing为true，则根据上一个点和当前点的坐标绘制一条线条。在鼠标释放时，将isDrawing设为false。

注意：这个示例只是一个简单的演示，实际使用中需要考虑性能问题，比如对轨迹进行优化、清除缓存等。