• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

在QML画布上绘制线段

qt 来源:smilingbuddha 3次浏览

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

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

enter image description here

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

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

enter image description here


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)