QtQuick/QMLキャンバスで矩形を描画する方法をお考えの場合

Question

イメージの上部にQQuickPaintedItemサブクラスで描画され、QMLで作成された四角形を描画します。キャンバスを使用して矩形を描画します。矩形は、マウスを使用して画像と平行移動および拡大縮小することができます。 次のコードは動作しません。

here

更新：

代わりctx.strokeRectを使用して、私が押されたとき

Canvas{ 
    id:canvas 
    anchors.fill:parent 
    // zoom in/out managed by mouse wheel 
    property double dx:0.0 
    property double dy:0.0 
    property double sx:1.0 
    property double sy:1.0 
    // mapped mouse position will be displayed on the left top of the window 
    property double mx:0 
    property double my:0 
    // mapped mouse postion when last left buttion pressed 
    property double lastx:0.0 
    property double lasty:0.0 
    // flag 
    property bool drawing:false 

    // map x,y to my coordinate 
    function mapToPaint(x,y) 
    { 
     var mx=(x-dx)/sx; 
     var my=(y-dy)/sy; 
     return {"x":mx,"y":my}; 
    } 


    onPaint:{ 
     var ctx = canvas.getContext("2d"); 
     ctx.lineWidth = 1 
     ctx.strokeStyle = Qt.lighter(root.color) 
     ctx.clearRect (0, 0, width, height); 
     ctx.save(); 
     // transform to my coordinate 
     ctx.translate(dx,dy); 
     ctx.scale(sx,sy); 
     // draw a rect 
     // !! I hope drawing can be displayed when mouse moving, 
     // !! but the rect wasn't displayed after the mouse button 
     // !! was released. Instead many rectangles will be showed when 
     // !! I rolled the mouse wheel after the press-drag operation. 
     if(drawing) 
      ctx.rect(lastx,lasty,mx-lastx,my-lasty); 
     ctx.stroke(); 
     ctx.restore(); 
} 
MouseArea { 
    id:area 
    anchors.fill: parent 
    hoverEnabled:true 
    preventStealing:true 
    property double factor: 1.2 
    onPressed: 
    { 

     if (mouse.button == Qt.LeftButton) 
     { 
      var p=canvas.mapToPaint(mouse.x,mouse.y); 
      canvas.lastx=p.x; 
      canvas.lasty=p.y; 
      canvas.drawing=true 
     } 
    } 

    onWheel: 
    { 
     if(wheel.angleDelta.y > 0) // zoom in 
      var zoomFactor = factor 
     else      // zoom out 
      zoomFactor = 1/factor 

     canvas.sx*=zoomFactor; 
     canvas.sy*=zoomFactor; 
     canvas.dx=wheel.x-(wheel.x-canvas.dx)*zoomFactor; 
     canvas.dy=wheel.y-(wheel.y-canvas.dy)*zoomFactor; 
     canvas.requestPaint(); 
    } 
    onPositionChanged: 
    { 
     var p=canvas.mapToPaint(mouse.x,mouse.y); 
     canvas.mx=p.x; 
     canvas.my=p.y; 
     // I hope the rectangle can be showed when draging 
     // but it didn't work!! why? 
     // mouse.button == Qt.LeftButton is always false!!! 
     // so I have to use the canvas.drawing flag 
     // if (mouse.button == Qt.LeftButton) 
     if(canvas.drawing) 
      canvas.requestPaint(); 
    } 

とマウスをドラッグし、私は、次の画像を得ましたctx.rectの、私は右の長方形を持っていますが、onPositionChangedでマウスbuttionをまだ受け取ることができません。一般的に

here

Answer 1

あなたはあなたの四角形のライブプレビュー（または他のオブジェクト）が必要な場合は何をしたいのかあなたがクリックしたとき、あなたはあなたのキャンバスの上に描画するための一時的な四角形を作成する必要がありますマウスを動かす間にマウスの位置デルタの大きさにその1つの長方形のサイズを変更し、マウスを離したときに実際にキャンバスに四角形をペイントしてプレビューを削除します。

これは私がやることですが、QMLで一時的な四角形を作成することはかなり簡単ですので、自分で実装するとうまくいくはずです。

キャンバス上のすべての更新を描画することもできますが、最後の更新を削除するのは簡単ではないので、一時的なオーバーレイでこのアプローチを使用する方が簡単です。