Qml 画布动画错误

Question

我在我的一个主窗口文件中实现了这个 qml 文件。但是，动画没有显示。我从有关画布动画的教科书教程中复制了这一点，因此我确信不会出现可预见的语法错误。调试时没有错误，但我看不到动画的任何部分。有什么想法吗？

心跳.qml

Canvas{
id: canvas
visible: true

width: 600
height: 300

property int lineWidth: 2
property var points: []
property real arg: -Math.PI

Timer{
    interval: 10
    repeat: true
    running: true
    onTriggered: {
        arg += Math.PI/180
        while(arg >= Math.PI) arg -= 2*Math.PI
    }
}

onArgChanged: {
    points.push(func(arg))
    points = points.slice(-canvas.width)
    canvas.requestPaint()
}

function func(argument){
    var a=(2*Math.PI/10); var b=4*Math/5
    return Math.sin(20*argument) * (
                Math.exp(-Math.pow(argument/a, 2)) +
                Math.exp(-Math.pow((argument-b)/a,2)) +
                Math.exp(-Math.pow((argument+b)/a, 2))
                )
}

onPaint:{
    var ctx = canvas.getContext("2d")
    ctx.reset()
    ctx.clearRect(0, 0, canvas.width, canvas.height)
    var pointsToDraw = points.slice(-canvas.width)
    ctx.translate(0, canvas.height/2)
    ctx.beginPath()
    ctx.moveTo(0, -pointsToDraw[0]*canvas.height/2)
    for(var i=1; i<pointsToDraw.length; i++)
        ctx.lineTo(i, -pointsToDraw[i]*canvas.height/2)
    ctx.lineWidth = canvas.lineWidth
    ctx.stroke()
}
}

Main.qml

Item{
    id: container
    x: 530
    y: 542
    width: 600
    height: 300
HeartBeat{
    id: heartBeatMonitor
}
}

我对其他画布动画没有问题...只是这个动画。

Answer 1

添加日志记录是早期调试的好主意。

onArgChanged: { points.push(func(arg)) points = points.slice(-canvas.width) console.log(points); canvas.requestPaint() }

之后我看到该数组被大量的 NaN 填充。然后我查看了var b=4*Math/5，在Math 之后似乎缺少一些字母。我不知道那里会打印什么。

伙计，你应该找到更好的教科书！