qt - 通过 MouseArea 向 ChartView 添加橡皮筋缩放

Question

我有一个在 QML 中声明的 ChartView 项，我需要类似橡皮筋的缩放功能。这可以通过半透明矩形和 MouseArea 项目来实现。问题是对于一个矩形，它只能选择从左上角到右下角的区域，因为带有负 dim-s 的矩形项目是不可见的或被禁用的。尽管可以将变换应用于矩形

transform: Scale { origin.x: 0; origin.y: 0; xScale: -1}

我没能找到如何从外部操作 xScale/yScale 属性。

现在我画了 4 个矩形，每个象限一个，具有正确的 xScale/yScale 和 dims(最后的代码)。

所以我想知道是否有更优雅/更简单的解决方案来解决这个问题？

ChartView {
    id: chartViewTop
    ...

    Rectangle{
        id: rubberBandRec1
        border.color: "black"
        border.width: 1
        opacity: 0.3
        visible: false
        transform: Scale { origin.x: 0; origin.y: 0; yScale: -1}
    }

    Rectangle{
        id: rubberBandRec2
        border.color: "black"
        border.width: 1
        opacity: 0.3
        visible: false
        transform: Scale { origin.x: 0; origin.y: 0; yScale: -1; xScale: -1}
    }

    Rectangle{
        id: rubberBandRec3
        border.color: "black"
        border.width: 1
        opacity: 0.3
        visible: false
        transform: Scale { origin.x: 0; origin.y: 0; xScale: -1}
    }

    Rectangle{
        id: rubberBandRec4
        border.color: "black"
        border.width: 1
        opacity: 0.3
        visible: false
    }

    MouseArea {
        anchors.fill: parent
        hoverEnabled: true
        onPressed: {
            rubberBandRec1.x = mouseX; rubberBandRec1.y = mouseY; rubberBandRec1.visible = true;
            rubberBandRec2.x = mouseX; rubberBandRec2.y = mouseY; rubberBandRec2.visible = true;
            rubberBandRec3.x = mouseX; rubberBandRec3.y = mouseY; rubberBandRec3.visible = true;
            rubberBandRec4.x = mouseX; rubberBandRec4.y = mouseY; rubberBandRec4.visible = true;
        }
        onMouseXChanged: {
            rubberBandRec1.width = mouseX - rubberBandRec1.x;
            rubberBandRec2.width = rubberBandRec2.x-mouseX;
            rubberBandRec3.width = rubberBandRec3.x-mouseX;
            rubberBandRec4.width = mouseX - rubberBandRec4.x;
        }
        onMouseYChanged: {
            rubberBandRec1.height = rubberBandRec1.y - mouseY;
            rubberBandRec2.height = rubberBandRec2.y - mouseY;
            rubberBandRec3.height = mouseY - rubberBandRec3.y;
            rubberBandRec4.height = mouseY - rubberBandRec4.y;
        }
        onReleased: {
            var x = rubberBandRec4.x-(rubberBandRec4.width<0)*Math.abs(rubberBandRec4.width);
            var y = rubberBandRec4.y-(rubberBandRec4.height<0)*Math.abs(rubberBandRec4.height);

            if (Math.abs(rubberBandRec4.width*rubberBandRec4.height)>100)
                chartViewTop.zoomIn(Qt.rect(x, y, Math.abs(rubberBandRec4.width),
                                            Math.abs(rubberBandRec4.height)));
            rubberBandRec1.visible = false;
            rubberBandRec2.visible = false;
            rubberBandRec3.visible = false;
            rubberBandRec4.visible = false;
        }
    }
}

Answer 1

设置缩放的外部属性，然后只需在 onMouseXChanged 和 onMouseYChanged 事件中更改这些属性，如下所示。这似乎对我有用:

property int xScaleZoom: 0
property int yScaleZoom: 0

Rectangle{
    id: recZoom
    border.color: "steelblue"
    border.width: 1
    color: "steelblue"
    opacity: 0.3
    visible: false
    transform: Scale { origin.x: 0; origin.y: 0; xScale: xScaleZoom; yScale: yScaleZoom}
}
MouseArea {
    anchors.fill: parent
    hoverEnabled: true
    onPressed: {
        recZoom.x = mouseX;
        recZoom.y = mouseY;
        recZoom.visible = true;
    }
    onMouseXChanged: {
        if (mouseX - recZoom.x >= 0) {
            xScaleZoom = 1;
            recZoom.width = mouseX - recZoom.x;
        } else {
            xScaleZoom = -1;
            recZoom.width = recZoom.x - mouseX;
        }
    }
    onMouseYChanged: {
        if (mouseY - recZoom.y >= 0) {
            yScaleZoom = 1;
            recZoom.height = mouseY - recZoom.y;
        } else {
            yScaleZoom = -1;
            recZoom.height = recZoom.y - mouseY;
        }
    }
    onReleased: {
        var x = (mouseX >= recZoom.x) ? recZoom.x : mouseX
        var y = (mouseY >= recZoom.y) ? recZoom.y : mouseY
        chartView.zoomIn(Qt.rect(x, y, recZoom.width, recZoom.height));
        recZoom.visible = false;
    }
}