在QML画布上绘制线段

  • Z时代
  • 2024-01-10
  • 分类：问答

考虑下面的代码，它允许您将连续的点表示为黑色圆圈表示到画布上。代码的目的是，以 将每个连续的点连接到一条红线段。在QML画布上绘制线段

但是，代码给了我一个帆布看起来像这样

只有第一点和第二点被一个红色线段相连。细分市场没有加入其他任何点。我如何解决这个问题？

这里是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

回答：

按照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

以上是 在QML画布上绘制线段 的全部内容， 来源链接： utcz.com/qa/260507.html

回到顶部