使用鼠标绘制矩形QML

Question

我使用QML 2.0创建了一个波形。 我想知道如何在用户点击波形时开始绘制矩形，并在用户释放鼠标按钮时结束。

我需要类似黄色的矩形。

我尝试使用画布，但无法正常工作。 你能帮我吗？

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矩形动态，并在同一时间设置它的视觉特性：

只是把这个障患儿你的“波形图”组成的：

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

这应该做的伎俩！