在QML畫布上繪製線段

Question

考慮下面的代碼，它允許您將連續的點表示爲黑色圓圈表示到畫布上。代碼的目的是，以 將每個連續的點連接到一條紅線段。

但是，代碼給了我一個帆布看起來像這樣

只有第一點和第二點被一個紅色線段相連。細分市場沒有加入其他任何點。我如何解決這個問題？

這裏是QML代碼

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

按照documentation：

對象橢圓（真實X，真實Y，真實瓦特，真實1H）

創建一個（x，y），寬度w和高度h的左上角定義的邊界矩形內的橢圓，並將其添加到 作爲封閉子路徑的路徑。

橢圓由一條順時針曲線組成，在零度（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