Qt (QML) 虚线圆

Posted

技术标签:

【中文标题】Qt (QML) 虚线圆【英文标题】:Qt (QML) Dashed Circle 【发布时间】: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 画布兼容......所以你要么需要绘制一系列中断的线作为答案建议,或者您可以选择使用QPainterQQuickPaintedItem 实现,它可以绘制虚线。 【参考方案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;
 

【讨论】:

以上是关于Qt (QML) 虚线圆的主要内容,如果未能解决你的问题,请参考以下文章

在没有Canvas的QML中绘制虚线圆圈

canvas绘制虚线,虚线方框,虚线圆

svg 虚线 圆 动画所以它旋转

如何隐藏 Qt QListView 或 QListWidget 中的选择矩形/虚线?

Qt如何去掉按钮等控件的虚线框(焦点框)

Qt如何去掉按钮等控件的虚线框(焦点框)(三种办法)