我知道可以使用以下代码在 QML 中绘制一个圆圈:
Rectangle {
width: 150
height: 150
anchors.horizontalCenter: parent.horizontalCenter
anchors.top: parent.top
color: "#095e7b"
border.color: "#0a2f4a"
border.width: 2
radius: width*0.5
}
我的问题是:如果我需要画一个圆的扇区怎么办。 (比萨切片)并使这些切片中的每一个都可点击?我可以只使用 QML 来做到这一点吗?
最佳答案
是的,使用 Canvas(和 Context2D):
import QtQuick 2.3
Rectangle {
width: 400
height: 400
Canvas {
anchors.fill: parent
onPaint: {
var ctx = getContext("2d");
ctx.reset();
var centreX = width / 2;
var centreY = height / 2;
ctx.beginPath();
ctx.fillStyle = "black";
ctx.moveTo(centreX, centreY);
ctx.arc(centreX, centreY, width / 4, 0, Math.PI * 0.5, false);
ctx.lineTo(centreX, centreY);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "red";
ctx.moveTo(centreX, centreY);
ctx.arc(centreX, centreY, width / 4, Math.PI * 0.5, Math.PI * 2, false);
ctx.lineTo(centreX, centreY);
ctx.fill();
}
}
}
我实际上从 this 中获取了此代码回答,因为 Qt 的 Canvas 实现了 HTML5 Canvas API。这使得在网络上找到示例变得非常容易;例如,只需搜索“绘制饼图切片等等 html5 Canvas ”。
对于鼠标检测,你必须刷掉你的数学技能......
...或者只是从 here 窃取代码. :)
请注意,Canvas 仅在调整大小或 requestPaint() 时重新绘制被调用,因此如果您想根据鼠标位置更改切片的颜色,则需要调用该函数以查看颜色变化。
关于qt - 在 QML 中绘制弧/圆扇区?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26044801/