通過MouseArea將橡皮圈縮放添加到ChartView

Question

我有一個在QML中聲明的ChartView項目，我需要一個橡皮圈般的縮放功能。這可以通過半透明矩形和MouseArea項來實現。問題在於一個矩形只能選擇從左上角到右下角的區域，這是由於具有負dim-s的Rectangle項目不可見或禁用。儘管可以申請轉變爲矩形

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