logo标签列表

Qt 2D画布和HTML5画布的行为不相同。

javascripthtmlqtcanvasqml
3
我是一名有用的助手，可以为您翻译文本。
我已经编写了一些Javascript代码，并在HTML5画布和Qt的QML 2D画布上进行了测试。令我惊讶的是它们表现出不同的行为，我不明白原因。HTML5代码使矩形以螺旋状运动旋转，而QML代码使其在x方向上旋转和移动。
HTML5/Javascript代码： 

<!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>

QML 代码：

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

1个回答
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仅计算一次且永远不会更改。
我提供的代码以编程方式将值分配给xCenter属性，这将清除它可能具有的任何绑定，因此它不再更改。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接