QMLキャンバスにセグメントを描画する

Question

以下のコードを参考にして、黒い円で表された連続した点をキャンバスに挿入することができます。コードの目的は、 に、それぞれの連続する点を赤い線分で結合することです。

しかし、コードは私にのみ第一および第二の点は赤色セグメントによって接合されているこの

ように見えるキャンバスを与えます。他のポイントはセグメントで結合されていません。どうすれば修正できますか？ここ

はQMLコードはdocumentationによれば

import QtQuick 2.7 
import QtQuick.Window 2.2 
import QtQuick.Controls 1.4 
Window{ 
    id: root 
    width: 640 
    height: 480 
    visible: true 

    Canvas { 
     id: mycanvas 
     width: 500 
     height: 500 
     function clear() { 
      var ctx = getContext("2d"); 
      ctx.reset(); 
      mycanvas.requestPaint(); 
     } 

     Path { 
      id: myPath 
      startX: 0; startY: 100 
      PathLine { x: 400; y: 500 } 
     } 
     property var arrpoints : [] 

     onPaint: { 
      var context = getContext("2d"); 

      // Render all the points as small black-circles 
      context.strokeStyle = Qt.rgba(0, 1, 1, 0) 
      for(var i=0; i < arrpoints.length; i++){ 
       var point= arrpoints[i] 
       context.ellipse(point["x"], point["y"], 10, 10) 
      } 

      context.fill() 
      context.stroke() 

      // Join successive points with red segments 
      for (var j=1 ; j < arrpoints.length ; j++){ 
       var start = arrpoints[j-1] 
       var end = arrpoints[j] 
       context.beginPath(); 
       context.lineWidth = 2; 
       context.moveTo(start["x"], start["y"]); 
       context.strokeStyle = "red" 
       context.lineTo(end["x"], end["y"]); 
      } 
      context.stroke(); 
     } 

     MouseArea { 
      id: mymouse 
      anchors.fill: parent 
      onClicked: { 
       mycanvas.arrpoints.push({"x": mouseX, "y": mouseY}) 
       mycanvas.requestPaint() 
       console.log(mycanvas.arrpoints) 
      } 
     } 
    } 

    Button { 
     text: "Clear Points" 
     anchors.top : mycanvas.bottom 
     onClicked: { 
      mycanvas.arrpoints.length = 0 
      mycanvas.clear() 
      console.log(mycanvas.arrpoints) 
     } 
    } 
}//Window 

Answer 1

ある：

オブジェクト楕円（実数x、実際のY、実W、実時間）

が作成します左上隅の（x、y）、幅w、高さhで定義されている外接矩形内の楕円形をに追加しますパスを閉じたサブパスとして指定します。

楕円は時計回りの曲線で構成され、0度（3時の位置）に開始および終了 を開始および終了します。

つまり、位置（x、y）とサイズw、hによって決まる矩形に楕円が描かれているため、マウスポイントと半径を使ってtopLeftポイントを取得する必要があります。

各行のパスを作成する必要はありませんラインのために、あなただけのパスを使用する必要がありますし、行を作成し、以下に示すように次のポイントに移動します。

import QtQuick 2.7 
import QtQuick.Window 2.2 
import QtQuick.Controls 1.4 
Window{ 
    id: root 
    width: 640 
    height: 480 
    visible: true 

    Canvas { 
     id: mycanvas 
     width: 500 
     height: 500 
     function clear() { 
      var ctx = getContext("2d"); 
      ctx.reset(); 
      mycanvas.requestPaint(); 
     } 

     Path { 
      id: myPath 
      startX: 0; startY: 100 
      PathLine { x: 400; y: 500 } 
     } 
     property real radius: 10 
     property var arrpoints : [] 

     onPaint: { 
      var context = getContext("2d"); 
      context.save() 
      if(arrpoints.length > 0){ 
       for(var i=0; i < arrpoints.length; i++){ 
        var point= arrpoints[i] 
        context.ellipse(point["x"]-radius, point["y"]-radius, 2*radius, 2*radius) 
       } 
       context.strokeStyle = Qt.rgba(0, 1, 1, 0) 
       context.fill() 
       context.stroke() 
       context.beginPath() 
       var start = arrpoints[0] 
       context.moveTo(start["x"], start["y"]) 
       for(var j=1; j < arrpoints.length; j++){ 
        var end= arrpoints[j] 
        context.lineTo(end["x"], end["y"]) 
        context.moveTo(end["x"], end["y"]) 
       } 
       context.closePath() 
       context.strokeStyle = "red" 
       context.lineWidth = 2; 
       context.stroke() 
      } 
      context.restore() 
     } 

     MouseArea { 
      id: mymouse 
      anchors.fill: parent 
      onClicked: { 
       mycanvas.arrpoints.push({"x": mouseX, "y": mouseY}) 
       mycanvas.requestPaint() 
      } 
     } 
    } 

    Button { 
     text: "Clear Points" 
     anchors.top : mycanvas.bottom 
     onClicked: { 
      mycanvas.clear() 
      console.log(mycanvas.arrpoints) 
     } 
    } 
}//Window