[qml]ChartView+LineSeries搭配实现曲线局部缩放功能

最新推荐文章于 2024-03-20 23:45:34 发布

丸子君君

最新推荐文章于 2024-03-20 23:45:34 发布

阅读量1.1k

点赞数

分类专栏： qml 文章标签： c++

本文链接：https://blog.csdn.net/chubu3218/article/details/127286852

版权

qml 专栏收录该内容

3 篇文章 1 订阅

订阅专栏

 Rectangle {
        id: view_rect
        anchors.fill: parent
        ChartView {
            id: view
            title: "*****"
            anchors.fill: parent
            legend.visible: false
            antialiasing: true
            property point hoveredPoint: Qt.point( 0, 0 )
            property bool hovered: false
            ValueAxis {
                id: axisX
                min: 0
                max: 50
                tickCount: 5
            }
 
            ValueAxis {
                id: axisY
                min: -0.5
                max: 1.5
            }
 
            LineSeries {
                id: series1
                axisX: axisX
                axisY: axisY
            }
 
            MouseArea {
                anchors.fill: parent
                hoverEnabled: true
                onPositionChanged: {
                    var point = Qt.point( 0, 0 )
                    point.x = mouse.x
                    point.y = mouse.y
                    var hoveredPoint = view.mapToValue( point, series1 )
                    if( hoveredPoint.x >= 0 && hoveredPoint.x <= 50 ) {
                        view.hovered = true
                        view.hoveredPoint = hoveredPoint
                    } else {
                        view.hovered = false
                    }
                }
 
                onWheel: {
                    if( view.hovered ) {
                        if( wheel.angleDelta.y > 0 ) {
                            if( axisX.max - axisX.min <= 2 ) {
                                return
                            }
                            view.zoomIn( view.hoveredPoint )
                        } else {
                            view.zoomOut( view.hoveredPoint )
                            if( axisX.min <= 0 ) {
                                axisX.min = 0
                            }
                            if( axisX.max >= 50 ) {
                                axisX.max = 50
                            }
                        }
                    }
                }
            }
 
            function zoomIn( hoveredPoint ) {
                if( hoveredPoint.x - axisX.min <= 1 ) {
                    return
                }
                var scale = parseFloat( ( hoveredPoint.x - axisX.min ) / ( axisX.max - axisX.min ) )
                axisX.min++
                axisX.max = ( hoveredPoint.x - axisX.min ) / scale + axisX.min
            }
 
            function zoomOut( hoveredPoint ) {
                var scale = parseFloat( ( hoveredPoint.x - axisX.min ) / ( axisX.max - axisX.min ) )
                axisX.min--
                axisX.max = ( hoveredPoint.x - axisX.min ) / scale + axisX.min
            }
        }
 
        Component.onCompleted: {
            for (var i = 0; i <= 50; i++) {
                series1.append(i, Math.random());
            }
        }
    }

实现该功能最关键在于获取鼠标位置对应的坐标值，ChartView提供一个方法mapToValue，指明一个point与series，就可获得这个point对应series的坐标值。现在通过一个覆盖整个ChartView的MouseArea获取mouse，转换成point，当鼠标在坐标轴内移动时，就可记录到hoveredPoint内。

放大功能写在zoomIn函数内，这里每次放大的值只是将最小值+1，可自己调整。注意一点的是hoverPoint.x是不能小于axisX.min的，所以在放大前做了判断；

缩小功能写在zoomOut函数内，这边是想让曲线饱满的覆盖在整个坐标内，所以对两个极端做了判断，超出范围就将边界值赋值给它；