마우스를 사용하여 사각형을 그립니다. QML

Question

QML 2.0을 사용하여 웨이브 폼을 만듭니다. 사용자가 파형을 클릭하고 사용자가 마우스 버튼을 놓을 때 끝나는 사각형을 그리는 방법을 알고 싶습니다.

노란색 사각형과 같은 것이 필요합니다.

Canvas에서 시도했지만 제대로 작동하지 않습니다. 도와 주시겠습니까?

Canvas { 
    property int prevX 
    property int prevY 
    property int hh:wave.height 
    property int lineWidth: 2 
    property color drawColor: "red" 
    id:mycanvas 

    height: 200 
    width: 2000 
    MouseArea { 
     id:mousearea 
     anchors.fill: parent 
     cursorShape:Qt.PointingHandCursor 
     onPositionChanged: mycanvas.requestPaint(); 

     onPressed: { 
      prevX = mouse.x; 
      prevY = mouse.y 
      var mousePosition = mouse.x/mousearea.width; 
      wave.zoomOut(mousePosition); 
      console.log("QML: ZoomStart mousePosition " + mousePosition) 

     } 

     onReleased: { 
      var mousePosition = mouse.x/mousearea.width; 
      console.log("QML: ZoomFinish mousePosition " + mousePosition) 
      wave.zoomOut2(mousePosition); 
     } 
    } 

    onPaint: { 
     var ctx = getContext('2d'); 
     ctx.beginPath(); 
     ctx.fillStyle = "#000000" 
     ctx.globalAlpha = 0.05 

     ctx.fillRect(prevX, 0, mousearea.mouseX-prevX,mainRectangle.height/4.5); 

     ctx.stroke(); 
     ctx.restore(); 
    } 
} 

Answer 1

내가 할 것 동적으로 QtQuick 사각형 실체화하고 같은 시간에 시각적 속성을 설정

은 그냥 '웨이브 그래프'성분이 AA 어린이를 넣어 :

MouseArea { 
    id: selectArea; 
    anchors.fill: parent; 
    onPressed: { 
     if (highlightItem !== null) { 
      // if there is already a selection, delete it 
      highlightItem.destroy(); 
     } 
     // create a new rectangle at the wanted position 
     highlightItem = highlightComponent.createObject (selectArea, { 
      "x" : mouse.x 
     }); 
     // here you can add you zooming stuff if you want 
    } 
    onPositionChanged: { 
     // on move, update the width of rectangle 
     highlightItem.width = (Math.abs (mouse.x - highlightItem.x)); 
    } 
    onReleased: { 
     // here you can add you zooming stuff if you want 
    } 

    property Rectangle highlightItem : null; 

    Component { 
     id: highlightComponent; 

     Rectangle { 
      color: "yellow"; 
      opacity; 0.35; 
      anchors { 
       top: parent.top; 
       bottom: parent.bottom; 
      } 
     } 
    } 
} 

그 트릭을해야합니다!