MouseAreaを介してChartViewにラバーバンドズームを追加

Question

QMLで宣言されたChartViewアイテムがあり、ラバーバンドのようなズーム機能が必要です。これは、半透明の矩形とMouseAreaアイテムで実現できます。問題は、1つの矩形では、負のdim-sを持つRectangle項目が不可視または無効のため、左上から右下に領域を選択することのみが可能です。

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

xScale/yScaleプロパティを外部から操作する方法を見つけることができませんでした。

今私は4つの四角形を1つずつ描き、正しい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; 
    } 
}