javascript - arcTo 有时不会在调整大小时绘制

Question

我有以下 QML 文件，它绘制一个绿色圆圈(通过 QML 矩形)并在圆圈上绘制一个黑色圆弧(通过 Canvas 和 arcTo)。圆的位置和半径取决于窗口的大小。对于大多数尺寸来说，这似乎工作得很好，但对于某些尺寸来说，弧线就消失了。重现该行为的完整 main.qml 如下:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    visible: true
    height: 400
    width: 400
    Rectangle{
        x:20
        y:20
        height: parent.height-40
        width: parent.width-40

        Rectangle{
            id:circle
            x:(parent.height<parent.width?parent.height:parent.width)/3
            y:x
            height:(parent.height<parent.width?parent.height:parent.width)/3
            width: height
            radius: height/2
            border.color: 'green'
        }

        Canvas{
            anchors.fill: parent
            visible: true
            onPaint: {
                var ctx = getContext("2d");
                ctx.strokeStyle = 'black';
                ctx.lineWidth = 4;
                var x = circle.x;
                var y = circle.y;
                var r = circle.radius;
                ctx.beginPath();
                ctx.moveTo(x,y+r);
                ctx.arcTo(x,y+2*r,x+r,y+2*r,r);
                ctx.stroke();

            }
        }
    }
}

问题当然是这是否是 QML 中的错误或者我是否在某个地方犯了错误。我希望有人能帮助我。

Answer 1

对我来说看起来像是一个错误。好像和传入的坐标有关系:

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    id: window
    visible: true
    height: 400
    width: 400

    Rectangle {
        anchors.fill: parent
        anchors.margins: 20

        Canvas {
            anchors.fill: parent
            onPaint: {
                var ctx = getContext("2d")
                ctx.strokeStyle = 'black'
                ctx.lineWidth = 4
                var x = 0
                var y = 0
                var r = parent.height / 2
                ctx.beginPath()
                // Visible:
                ctx.moveTo(120.33333333333333, 180.5)
                ctx.arcTo(120.33333333333333, 240.66666666666666, 180.5, 240.66666666666666, 60.166666666666664)
                // Not visible:
//                ctx.moveTo(120.66666666666667, 181)
//                ctx.arcTo(120.66666666666667, 241.33333333333334, 181, 241.33333333333334, 60.333333333333336)
                ctx.stroke()
            }
        }
    }
}