arcTo有时候不会调整大小

时间:2015-10-23 13:08:42

标签: javascript canvas qml

我有以下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中的错误,或者我在某处犯了错误。我希望有人可以帮助我。

1 个答案:

答案 0 :(得分:0)

对我来说看起来像个错误。它似乎与传入的坐标有关:

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()
            }
        }
    }
}