Javascript QML画布:渲染中的不同行为
我正在尝试使用Canvas对象在QML中绘制环形扇区。 首先,我编写了javascript代码,并通过在浏览器中执行它来验证代码是否正确 这是:Javascript QML画布:渲染中的不同行为,javascript,html,qt,canvas,qml,Javascript,Html,Qt,Canvas,Qml,我正在尝试使用Canvas对象在QML中绘制环形扇区。 首先,我编写了javascript代码,并通过在浏览器中执行它来验证代码是否正确 这是: var can = document.getElementById('myCanvas'); var ctx=can.getContext("2d"); var center = { x: can.width / 2, y: can.height / 2 }; var minRad = 100; var maxRad = 250; var s
var can = document.getElementById('myCanvas');
var ctx=can.getContext("2d");
var center = {
x: can.width / 2,
y: can.height / 2
};
var minRad = 100;
var maxRad = 250;
var startAngle = toRad(290);
var endAngle = toRad(310);
drawAxis();
drawSector();
function drawSector() {
var p1 = {
x: maxRad * Math.cos(startAngle),
y: maxRad * Math.sin(startAngle)
}
p1 = toCanvasSpace(p1);
var p2 = {
x: minRad * Math.cos(startAngle),
y: minRad * Math.sin(startAngle)
}
p2 = toCanvasSpace(p2);
var p3 = {
x: minRad * Math.cos(endAngle),
y: minRad * Math.sin(endAngle)
}
p3 = toCanvasSpace(p3);
var p4 = {
x: maxRad * Math.cos(endAngle),
y: maxRad * Math.sin(endAngle)
}
p4 = toCanvasSpace(p4);
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.arc(center.x, center.y, maxRad, startAngle, endAngle);
ctx.lineTo(p3.x, p3.y);
ctx.arc(center.x, center.y, minRad, endAngle, startAngle, true);
ctx.closePath();
ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
ctx.stroke();
}
function drawAxis() {
ctx.beginPath();
ctx.moveTo(can.width / 2, 0);
ctx.lineTo(can.width / 2, can.height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, can.height / 2);
ctx.lineTo(can.width, can.height / 2);
ctx.stroke();
}
function toRad(degrees) {
return degrees * Math.PI / 180;
}
function toCanvasSpace(p) {
var ret = {};
ret.x = p.x + can.width / 2;
ret.y = p.y + can.height / 2;
return ret;
}
您可以运行上面的代码。
输出如下:
接下来,我将相同的代码移动到Qml中的画布对象中
请参见此处包含画布的main.qml:
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 500
height: 500
x:500
Canvas
{
id: can
anchors.fill: parent
antialiasing: true
onPaint: {
var ctx=can.getContext("2d");
var center = {
x: can.width / 2,
y: can.height / 2
};
var minRad = 100;
var maxRad = 250;
var startAngle = toRad(290);
var endAngle = toRad(310);
drawAxis();
drawSector();
function drawSector() {
var p1 = {
x: maxRad * Math.cos(startAngle),
y: maxRad * Math.sin(startAngle)
}
p1=toCanvasSpace(p1);
var p2 = {
x: minRad * Math.cos(startAngle),
y: minRad * Math.sin(startAngle)
}
p2=toCanvasSpace(p2);
var p3 = {
x: minRad * Math.cos(endAngle),
y: minRad * Math.sin(endAngle)
}
p3=toCanvasSpace(p3);
var p4 = {
x: maxRad * Math.cos(endAngle),
y: maxRad * Math.sin(endAngle)
}
p4=toCanvasSpace(p4);
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.arc(center.x, center.y, maxRad, startAngle, endAngle);
ctx.lineTo(p3.x, p3.y);
ctx.arc(center.x, center.y, minRad, endAngle, startAngle, true);
ctx.closePath();
ctx.strokeStyle="blue";
ctx.lineWidth=2;
ctx.stroke();
}
function drawAxis() {
ctx.beginPath();
ctx.moveTo(can.width / 2, 0);
ctx.lineTo(can.width / 2, can.height);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(0, can.height / 2);
ctx.lineTo(can.width, can.height / 2);
ctx.stroke();
}
function toRad(degrees) {
return degrees * Math.PI / 180;
}
function toCanvasSpace(p) {
var ret = {};
ret.x = p.x + can.width / 2;
ret.y = p.y + can.height / 2;
return ret;
}
}
}
}
在这种情况下,我得到以下输出:
正如你所看到的,底部有一个缺陷
我真的不明白为什么会有这样的缺陷;此外,我不明白为什么相同的代码会给出不同的输出
感谢您的帮助!
谢谢不需要
lineTo
p3
,因为当绘制弧
段时,将根据画布
规范自动绘制连接线:
在这种情况下,arc()方法与ellipse()方法等效
两个半径相等的地方。[……]
调用ellipse()方法时,它必须按以下步骤进行。
首先,如果对象的路径有任何子路径,则该方法必须添加
从子路径中的最后一点到起点的直线
弧线的边缘
此外,不需要移动到p1,因为这将作为第一个圆弧的一部分进行
至于为什么额外的线被画得比第二个弧的起点更远,这可能是Qt中的一个错误(可能是一个被
0
除法的问题-这里只是猜测),或者您只是没有正确计算它的位置。可以验证这是否修复了它。不错。:)哇,我确认这是一个解决方案!非常感谢。