QML 使用中间按钮在缩放图表内移动

QML move inside zoomed charts with Middle button

我正在使用 QML 图表。我现在有一个情节 :

import QtQuick 2.9
import QtQuick.Window 2.2
import QtCharts 2.0

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    ChartView {
        id: chartView
        anchors.fill: parent
        theme: ChartView.ChartThemeBrownSand
        antialiasing: true

        LineSeries {
            name: "LineSeries"
            XYPoint { x: 0; y: 0 }
            XYPoint { x: 1.1; y: 2.1 }
            XYPoint { x: 1.9; y: 3.3 }
            XYPoint { x: 2.1; y: 2.1 }
            XYPoint { x: 2.9; y: 4.9 }
            XYPoint { x: 3.4; y: 3.0 }
            XYPoint { x: 4.1; y: 3.3 }
        }

        MouseArea{
            anchors.fill: parent
            onDoubleClicked: chartView.zoomReset();
        }
    }
}

我可以使用 ZoomIn(QRect) 来放大和缩小

var r = Qt.rect(x, y, w, h)
chartView.zoomIn(r)

缩放完成后,我需要按下中间按钮(滚轮)在缩放图中移动,并在 chartView 中向右或向左移动我的位置。

如何获得按下中间按钮的位置并根据该位置移动绘制的系列?!

编辑: middle click option 不重要,可以 right click 。但是如何检测它仍然是按下并获取它的位置并将其设置在 ZoomIn(Qrec) 上。

你可以使用 2 个参数:

property bool btnClicked: false
property int mouseLastX

然后按下:

onPressed: {
    if (mouse.button == Qt.LeftButton) {
        btnClicked = true
        console.log("down")
    }
}

然后发布:

onReleased: {
    btnClicked = false
}

最后在改变位置(拖动时)做你想做的事:

    onPositionChanged: {

    if (btnClicked) {
        console.log("dragging")

        // zoome based on mouse position :
        var ch = mouseX - mouseLastX
        console.log(ch)
        mouseLastX = mouseX

        chartView.zoomIn(Qt.rect(chartView.plotArea.x + ch, 0,
                                 chartView.plotArea.width,
                                 chartView.plotArea.height))
    }
}