Qt (QML) 虚线圆答案

【问题标题】：Qt (QML) Dashed CircleQt (QML) 虚线圆
【发布时间】：2017-07-25 17:08:23
【问题描述】：

有没有办法在 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();

结果

但我怎样才能让它像这样虚线。

我需要

【问题讨论】：

请提供可以执行和测试的最小代码。
不幸的是，QML 画布实现没有实现 setLineDash() 方法，即使它应该与 HTML 画布兼容......所以你要么需要绘制一系列中断的线作为答案建议，或者您可以选择使用QPainter 的QQuickPaintedItem 实现，它可以绘制虚线。

标签： qt html5-canvas qml

【解决方案1】：

我知道这个问题已经过时了，但它可能会对某人有所帮助。你可以使用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。

【讨论】：

【解决方案2】：

我对 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;
 }

【讨论】：