Qml Canvas 애니메이션 오류

Question

이 메인 윈도우 파일 중 하나에이 qml 파일을 구현했습니다. 그러나 애니메이션은 보이지 않습니다. 캔버스 애니메이션에 대한 교과서 자습서에서이 내용을 복사 했으므로 구문에 예측 가능한 오류가 없을 것이라고 확신했습니다. 디버깅 할 때 오류는 없지만 애니메이션의 일부는 볼 수 없습니다. 어떤 아이디어?

HeartBeat.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 다음에 missng 인 것처럼 보인다. 거기에 인쇄 될 것으로 예상되는 것이 무엇인지 모르겠습니다.

남자, 당신은 더 나은 교과서를 찾아야합니다!