qml可拖动折线图

qt5.15.2  qml

演示：

可直接运行的代码demo：

import QtQuick 2.15 import QtQuick.Controls 2.15 import QtQuick.Layouts 1.15 import QtQuick.Shapes 1.15 ApplicationWindow { id: rootWindow visible: true width: 1200 height: 800 title: "可拖动折线图编辑器 - 长按拖动模式" color: "#1a1a1a" // 图表数据点（x: 0-100, y: 0-100） property var dataPoints: [ {x: 0, y: 20}, {x: 10, y: 45}, {x: 20, y: 30}, {x: 30, y: 60}, {x: 40, y: 35}, {x: 50, y: 80}, {x: 60, y: 55}, {x: 70, y: 90}, {x: 80, y: 40}, {x: 90, y: 65}, {x: 100, y: 50} ] // 图表配置 property int chartMargin: 80 property int pointRadius: 10 property int lineWidth: 3 property color lineColor: "#00a8e8" property color pointColor: "#ffffff" property color pointHoverColor: "#00a8e8" property color gridColor: "#333333" property color textColor: "#888888" // 当前选中的点索引 property int selectedPointIndex: -1 property int hoveredPointIndex: -1 // 拖动状态 property bool isDragging: false property int draggedPointIndex: -1 property real dragOffsetX: 0 property real dragOffsetY: 0 ColumnLayout { anchors.fill: parent spacing: 0 // 顶部工具栏 Rectangle { Layout.fillWidth: true height: 60 color: "#252525" Row { anchors.centerIn: parent spacing: 20 Button { text: "重置示例" onClicked: { dataPoints = [ {x: 0, y: 20}, {x: 10, y: 45}, {x: 20, y: 30}, {x: 30, y: 60}, {x: 40, y: 35}, {x: 50, y: 80}, {x: 60, y: 55}, {x: 70, y: 90}, {x: 80, y: 40}, {x: 90, y: 65}, {x: 100, y: 50} ] selectedPointIndex = -1 canvas.requestPaint() } } Button { text: "添加点" onClicked: { if (dataPoints.length < 20) { var lastX = dataPoints[dataPoints.length - 1].x var newX = Math.min(100, lastX + 10) dataPoints.push({x: newX, y: 50}) canvas.requestPaint() } } } Button { text: "删除选中" onClicked: { if (selectedPointIndex >= 0 && dataPoints.length > 2) { dataPoints.splice(selectedPointIndex, 1) selectedPointIndex = -1 canvas.requestPaint() } } } Rectangle { width: 1 height: 30 color: "#444444" anchors.verticalCenter: parent.verticalCenter } Text { text: isDragging ? "拖动中... 松开固定位置" : (selectedPointIndex >= 0 ? "选中点 #" + (selectedPointIndex + 1) + " X: " + dataPoints[selectedPointIndex].x.toFixed(1) + " Y: " + dataPoints[selectedPointIndex].y.toFixed(1) : "长按拐点拖动，松手固定位置") co