Question

我编写了一些Javascript代码，并使用HTML5 Canvas和Qt的QML 2D Canvas进行了测试。令我惊讶的是，他们表现得非常不同，我不明白为什么。 HTML5代码使矩形以螺旋状运动旋转，而QML代码使其旋转并沿x方向移动。

HTML5 / Javascipt代码：

＆＃13;

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="1000" height="500" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

    var xOffset = 50
    var yOffset = 50
    var xLength = 100
    var yLength = 100
    var xCenter = xOffset + xLength / 2
    var yCenter = yOffset + yLength / 2
    var angle = 0


        function rotateSquare(xCenter, xCenter, width, height, angleIncrement)
        {
            ctx.save()
            ctx.translate(xCenter, yCenter)
            ctx.rotate(angle * Math.PI / 180)
            ctx.translate(-xCenter, -yCenter)
            ctx.clearRect(xOffset, yOffset, width, height)
            var newAngle
            newAngle = angle + angleIncrement
            newAngle %= 360
            var increment = deltaAngle(newAngle, angle)
            ctx.translate(xCenter, yCenter)
            ctx.rotate(increment * Math.PI / 180)
            ctx.translate(-xCenter, -yCenter)
            ctx.fillRect(xOffset++, yOffset, width, height)
            angle = newAngle
            ctx.restore()
        }

        function deltaAngle(current, previous)
        {
            if (current >= previous)
            {
                return current - previous
            }
            else
            {
                return (360 + current) - previous
            }
        }

setInterval( "rotateSquare(xCenter, yCenter, xLength, yLength, 1)", 20 );

</script>

</body>
</html>

＆＃13;

QML代码：

＆＃13;

import QtQuick 2.5
import QtQuick.Window 2.2

Window {
    id: root
    visible: true
    minimumHeight: 600
    minimumWidth: 800

    property int xOffset: 50
    property int yOffset: 50
    property int xLength: 100
    property int yLength: 100
    property var ctx
    property int xCenter: xOffset + xLength / 2
    property int yCenter: yOffset + yLength / 2
    property int angle: 0    //Degrees

    Timer {
        interval: 20;
        repeat: true;
        running: true;
        onTriggered: {
            graphCanvas.requestPaint()
        }
    }

    Canvas {
        id: graphCanvas
        anchors.fill: parent
        renderTarget: Canvas.Image
        renderStrategy: Canvas.Cooperative
        onPaint: {
            ctx.fillStyle = "steelblue"
            rotateSquare(xCenter, yCenter, xLength, yLength, 1)
        }

        function rotateSquare(xCenter, yCenter, width, height, angleIncrement)
        {
            ctx.save()
            ctx.translate(xCenter, yCenter)
            ctx.rotate(angle * Math.PI / 180)
            ctx.translate(-xCenter, -yCenter)
            ctx.clearRect(xOffset, yOffset, width, height)
            var newAngle
            newAngle = angle + angleIncrement
            newAngle %= 360
            var increment = deltaAngle(newAngle, angle)
            ctx.translate(xCenter, yCenter)
            ctx.rotate(increment * Math.PI / 180)
            ctx.translate(-xCenter, -yCenter)
            ctx.fillRect(xOffset++, yOffset, width, height)
            angle = newAngle
            ctx.restore()
        }

        function deltaAngle(current, previous)
        {
            if (current >= previous)
            {
                return current - previous
            }
            else
            {
                return (360 + current) - previous
            }
        }

        Component.onCompleted: ctx = getContext("2d")
    }
}

＆＃13;

Answer 1

要获得与HTML相同的效果，请将组件初始化修改为：

Component.onCompleted: {
    ctx = getContext("2d")

    xCenter = xOffset + xLength / 2
    yCenter = yOffset + yLength / 2
}

在QML中，当你说：

property int xCenter: xOffset + xLength / 2

您创建了一个属性绑定 - 每当xOffset或xLength发生更改时，xCenter也会更改，并且您在渲染代码中修改了xOffset，因此它会产生与JavaScript不同的效果 - 其中xCenter计算一次并且永远不会更改。 / p>

代码我以编程方式为xCenter属性赋值，并清除它可能具有的任何绑定，因此它不再更改。

Qt 2D Canvas和HTML5画布表现不一样

1 个答案: