如何向 QML ChartView 添加矩形？

Question

我想将一些矩形作为叠加层以在 ScatterSeries 的 ChartView 上显示感兴趣的区域。 但是，当我尝试这样做时，它显然使用了与 ScatterSeries 不同的坐标系，因为它是在完全不同的地方绘制的。

例如，以下内容旨在绘制一个捕获所有 ScatterSeries 的矩形，但它只绘制了一个左上角的绿色小矩形，如屏幕截图所示。

        ChartView {
            id: view
            Layout.fillWidth : true
            Layout.fillHeight : true
            Rectangle {
                id: rec
                x: 30
                y: 50
                width: 40
                height: 10
                color: "green"
            }
            ScatterSeries{
                id: series
                XYPoint { x: 30; y: 50 }
                XYPoint { x: 50; y: 60 }
                XYPoint { x: 60; y: 50 }
                XYPoint { x: 70; y: 60 }
                axisX: ValueAxis {
                    min: 0
                    max: 100
                }
                axisY: ValueAxis {
                    min: 0
                    max: 100
                }
            }

文档建议矩形应该使用父 ChartView 的坐标系。 我假设我实际上希望它使用 ChartView 场景的坐标系。 我该怎么做呢？

Answer 1

要将ScatterSeries坐标系转换为像素坐标以在ChartView放置子项， ChartView使用mapToPosition(...) ：

function updateRectangle() {
    var topLeftPoint = view.mapToPosition(Qt.point(30,60), series)
    var bottomRightPoint = view.mapToPosition(Qt.point(70,50), series)

    rec.x = topLeftPoint.x
    rec.y = topLeftPoint.y

    rec.width  = bottomRightPoint.x - topLeftPoint.x
    rec.height = bottomRightPoint.y - topLeftPoint.y
}

其中series是您的ScatterSeries ， rec是您的Rectangle 。

每当重新计算图表点时（例如在创建和大小更改之后）调用更新函数。

另请参阅相关问题如何将 QChart 坐标映射到 QChartView 点？