How to set zoom origin for a QML Chart View

问题

I am developing a data presentation application using QT QML with QTCharts. I am using a ChartView and a line series to show XY data. Everything works apart from pinching and zooming the graph. The application is targeting mobile touch device.

I want to be able to pinch and zoom the graph and set the zoom origin to the center of the pinch. Currently, I have it working but the graph only zooms from the center of the graph at all times.

Is this possible in QML?

Thanks for any help.

回答1:

The solution is to use the zoomIn(rect rectangle) method that can receive as a parameter the rectangle that will be visible, in your case the rectangle must have as center the point where you click.

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();
        }

        PinchArea{
            id: pa
            anchors.fill: parent
            onPinchUpdated: {
                chartView.zoomReset();
                var center_x = pinch.center.x
                var center_y = pinch.center.y
                var width_zoom = height/pinch.scale;
                var height_zoom = width/pinch.scale;
                var r = Qt.rect(center_x-width_zoom/2, center_y - height_zoom/2, width_zoom, height_zoom)
                chartView.zoomIn(r)
            }

        }
    }
}

来源：https://stackoverflow.com/questions/50050391/how-to-set-zoom-origin-for-a-qml-chart-view

标签

qml

qtcharts