qml Chartview 拖动放大缩小

最新推荐文章于 2025-02-13 08:30:46 发布

原创最新推荐文章于 2025-02-13 08:30:46 发布 · 845 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#qt

qml 专栏收录该内容

11 篇文章

订阅专栏

这段代码展示了如何使用Qt创建一个带有X和Y轴的图表视图，并实现了缩放、平移等交互功能。SplineSeries用于绘制曲线数据，MouseArea监听鼠标事件，允许用户通过滚轮缩放以及拖动平移图表。

     ChartView{
                    id:chartView
                    width:parent.width - 60
                    height: parent.height - 90
                    anchors.horizontalCenter: parent.horizontalCenter
                    ValueAxis{
                        id:axisx
                        max:50;
                        min:0;
                        tickCount:20
                    }
                    ValueAxis{
                        id:axisy
                        max:50;
                        min:-50;
                        // reverse: true
                        tickCount:20

                    }
                    SplineSeries{
                        id:sp
                        color: Qt.rgba(255,0,0,1)
                        name:"CPU"
                        axisX: axisx
                        //  axisXTop:axisx
                        axisY: axisy
                        XYPoint{x:0;y:0}
                        XYPoint{x:10;y:20}
                        XYPoint{x:15;y:30}
                        XYPoint{x:20;y:10}
                        XYPoint{x:25;y:25}
                        XYPoint{x:30;y:15}
                        XYPoint{x:35;y:10}
                    }
                    MouseArea{
                        id:mosuearea
                        anchors.fill: parent

                        property point clickPos: "0,0"


                        onWheel: {
                            if(wheel.angleDelta.y > 0)
                            {
                                chartView.zoom(1.1 )
                            }else
                            {
                                chartView.zoom(0.9)
                            }
                        }
                        onPressed: {
                            clickPos  = Qt.point(mouse.x,mouse.y)
                        }


                        onPositionChanged: {
                            var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)

                            if(delta.x > 30)
                            {
                                chartView.scrollLeft(30)
                            }
                            else if(delta.x< -30)
                            {
                                chartView.scrollLeft(-30)
                            }else
                            {
                                chartView.scrollLeft(delta.x)
                            }

                            if(delta.y > 30)
                            {
                                chartView.scrollUp(30)
                            }
                            else if(delta.y< -30)
                            {
                                chartView.scrollUp(-30)
                            }else
                            {
                                chartView.scrollUp(delta.y)
                            }

                            clickPos  = Qt.point(mouse.x,mouse.y)
                        }
                    }
                }