Question

我正在用qml (my program output）编写一个程序，其中弧形/圆形应该在＆＃34; +＆＃34;上涂上黄色。按钮按下（）。实际上我的代码工作但问题是它从右中心开始绘制画布。我希望以中心作为画布绘画的起点。

你们能告诉我什么吗？似乎，这完全是关于起点的一些数学计算，但它没有点击给我。

click here to see the current code output and my expectation

# import QtQuick 2.0 
# import QtQuick.Window 2.0
Rectangle
{
    id:main
    width: 400
    height: 400
    property real counter: 0.0

    property int count: 1

    property real angle : 0;
    property int value: 0
    property int maxHours: 0

    onValueChanged:
    {
        console.log("======> canvas.maxHours = ",maxHours);
        if(maxHours < 4)
        {
            if(360 === (angle += 6))
            {
                angle = 0;//-1.5;
                if(360 === (hoursAngle += 90))
                {
                   // 0.00001 is needed to correct working ctx.arc(...) formulas on corner cases
                    angle = hoursAngle -= 0.0001
                }
                maxHours++;
            }
            canvas.requestPaint();
        }

    }

    Canvas
    {
        id: canvas

        anchors.centerIn: main

        width: 170
        height: 170
        smooth: true
        visible: true
        renderStrategy: Canvas.Threaded;
        renderTarget: Canvas.Image;
        antialiasing: true;

        onPaint:
        {
            var ctx = getContext("2d");
            ctx.reset()

            var centreX = width / 2;
            var centreY = height / 2;


            //M Indicator
            ctx.beginPath();
            ctx.fillStyle = Qt.rgba(0,0,0,0.3);
            ctx.moveTo(centreX, centreY);
            ctx.arc(centreX, centreY, width/2 - 5, 0, 360, false); // Outer circle
            ctx.arc(centreX, centreY, width/2 - 10, 0, 360, true); // Inner circle
            ctx.closePath();
            ctx.fill();


            ctx.beginPath();
            ctx.fillStyle = "yellow"
            ctx.moveTo(centreX, centreY);
            console.log("===> Ravi  centreX =",centreX)
            console.log("===> Ravi  centreY =",centreY)
            console.log("===> Ravi  angle =",angle)
            console.log("===> Ravi  angle * Math.PI / 180 =",angle * Math.PI / 180)


            ctx.arc(centreX, centreY, width/2 - 5, 0,  angle * Math.PI / 180, false); // Outer circle
            ctx.arc(centreX, centreY, width/2 - 10, angle * Math.PI / 180, 0, true); // Inner circle

            ctx.closePath();
            ctx.fill();

        }
    }

    Rectangle
    {
        id:addElement
        width:35
        height:35
        anchors.right: parent.right
        anchors.top: parent.top
        Text
        {
            text: "+"
            font.pixelSize: 50
            anchors.centerIn: addElement
        }
        MouseArea
        {
            anchors.fill: addElement
            onClicked:
            {
                value++;

            }
        }
    }
}

Answer 1

您使用的arc方法定义如下（see the documentation）：

object arc(real x, real y, real radius, real startAngle, real endAngle, bool anticlockwise)

您的startAngle为0，因此从您所谓的“右中心”开始绘制圆圈：根据三角圆定义角度。如果您希望从“顶部中心”抽取圈子，只需将startAngle设置为Math.PI/2

这给了你：

property real angle : -90;
...
ctx.arc(centreX, centreY, width/2 - 5, -Math.PI/2,  angle * Math.PI / 180, false); // Outer circle
ctx.arc(centreX, centreY, width/2 - 10, angle * Math.PI / 180, -Math.PI/2, true); // Inner circle

画布画从右中心开始而不是顶部中心

1 个答案: