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 画布兼容......所以你要么需要绘制一系列中断的线作为答案建议,或者您可以选择使用QPainter
的QQuickPaintedItem
实现,它可以绘制虚线。
【参考方案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) 虚线圆的主要内容,如果未能解决你的问题,请参考以下文章