Добавление масштабирования резинки в ChartView через MouseArea

Question

У меня есть элемент ChartView, объявленный в QML, и мне нужна функция масштабирования, подобная резинке. Этого можно достичь с помощью полупрозрачного прямоугольника и элемента MouseArea. Проблема состоит в том, что с одним прямоугольником можно выбрать область сверху вниз вправо-вправо из-за того, что элемент Rectangle с отрицательным 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; 
    } 
}