Qt 2D Canvas和HTML5畫布表現不一樣

Question

我編寫了一些Javascript代碼並使用HTML5 Canvas和Qt的QML 2D Canvas進行了測試。 令我驚訝的是，他們表現得非常不同，我不明白為什么。 HTML5代碼使矩形以螺旋狀運動旋轉，而QML代碼使其旋轉並沿x方向移動。

HTML5 / Javascipt代碼：

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

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只計算一次而且永遠不會改變。

我以編程方式給出的代碼為xCenter屬性xCenter ，並清除它可能具有的任何綁定，因此它不再更改。

Qt 2D Canvas和HTML5畫布表現不一樣

問題描述

1 個解決方案

解決方案1
1 已采納 2015-11-01 19:17:30

Qt 2D Canvas和HTML5畫布表現不一樣

問題描述

1 個解決方案

解決方案1 1 已采納 2015-11-01 19:17:30

解決方案1
1 已采納 2015-11-01 19:17:30