Qt（QML）Dashed Circle

Question

有没有办法在QML中绘制半虚线圈？我用这种方式画了半圈

   var Circle = getContext("2d");
          Circle.save();
          var CircleGradient = 
 Circle.createLinearGradient(parent.width/4,parent.height,parent.width/4,0);
        CircleGradient.addColorStop(0, firstGradientPoint);
                  CircleGradient.addColorStop(1, secondGradientPoint);
                  Circle.clearRect(0, 0, parent.width, parent.height);
                  Circle.beginPath();
                  Circle.lineCap = "round";
                  Circle.lineWidth = 10;
                  Circle.strokeStyle = CircleGradient
                  Circle.arc(parent.width/2, parent.height/2, canvas.radius - (Circle.lineWidth / 2), Math.PI/2, canvas.Value);
                  Circle.stroke();
                  Circle.restore();

结果

但我怎么能让它像这样破灭。

我需要

Answer 1

我知道QML有点但从未编码过。 但是你可以通过逻辑来解决你的问题。

这是逻辑 - 下面的代码是伪的，不起作用但会给你一个想法。

在循环中绘制小弧，中间有空格。

//DECLARE YOUR ANGLES START AND END
startAngle = 0.0;
endAngle = pi/20;// 10 ARCS AND 10 SPACES

 while (q++ < 10){

   Circle.arc(parent.width/2, parent.height/2, canvas.radius - (Circle.lineWidth / 2), startAngle, endAngle, canvas.Value)

   //LEAVE SPACE AND CREATE NEW START AND END ANGLE.
   startAngle = endAngle + endAngle;
   endAngle  = startAngle + endAngle;
 }

Answer 2

我知道这个问题已经过时了，但是可能会对某人有所帮助。您可以使用Qt Quick Shapes（自Qt 5.10起）呈现所需的内容。它不是复制粘贴代码，而是更多方法：

Shape {
    ShapePath {
        id: shapePath
        strokeColor: "black"
        strokeStyle: ShapePath.DashLine
        dashPattern: [6, 8]
        fillColor: "transparent"

        PathArc {
            x: 0
            y: radiusX + radiusY
            radiusX: 100
            radiusY: 100
            useLargeArc: true
        }
    }
}

PathArc文档几乎包含了您需要的所有内容。这里还有更多Shape Examples。