在QML中画一个圆弧/圆扇区？
提问于 2014-09-25 09:39:18
我知道，可以使用以下代码在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来完成这个任务吗？
回答 4
Stack Overflow用户
回答已采纳
发布于 2014-09-25 10:10:00
是的，使用画布(和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();
}
}
}实际上，在Qt的画布实现这画布API时，我从HTML5答案中获取了这段代码。这使得在web上找到示例变得非常容易；例如，只需搜索“绘制饼片html5画布”即可。
为了老鼠的检测，你得把你的数学技能.
..。或者从这里窃取代码。:)
请注意，画布只有在调整大小或调用requestPaint()时才会重新绘制，因此，如果要根据鼠标位置更改切片的颜色，则需要调用该函数来查看颜色的变化。
Stack Overflow用户
发布于 2020-01-20 00:45:22
使用qml绘制它，您不需要画布。作为指导原则，在决定实现之前，我通常先看一下Qt的示例。下面的代码可以在“形状”示例中找到。
import QtQuick 2.11
import QtQuick.Shapes 1.15
Shape {
width: 120
height: 130
anchors.bottom: parent.bottom
anchors.right: parent.right
// multisample, decide based on your scene settings
layer.enabled: true
layer.samples: 4
ShapePath {
fillColor: "black"
strokeColor: "darkBlue"
strokeWidth: 20
capStyle: ShapePath.FlatCap
PathAngleArc {
centerX: 65; centerY: 95
radiusX: 45; radiusY: 45
startAngle: -180
sweepAngle: 180
}
}
}Stack Overflow用户
发布于 2016-04-25 07:30:03
使用图表http://doc.qt.io/QtCharts/qtcharts-qmlmodule.html
import QtQuick 2.0
import QtCharts 2.0
ChartView {
width: 400
height: 300
theme: ChartView.ChartThemeBrownSand
antialiasing: true
PieSeries {
id: pieSeries
PieSlice { label: "eaten"; value: 94.9 }
PieSlice { label: "not yet eaten"; value: 5.1 }
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/26044801
复制相关文章
相似问题
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
