We will extend our component now and implement its main functionality–drawing a heartbeat-like diagram.
Add the following property declarations to canvas:
property int lineWidth: 2 property var points: [] property real arg: -Math.PI
Below, add a declaration for a timer that will drive the whole component:
Timer {
interval: 10
repeat: true
running: true
onTriggered: {
arg += Math.PI/180
while(arg >= Math.PI) arg -= 2*Math.PI
}
}Then, define the handler for when the value of arg is modified:
onArgChanged: {
points.push(func(arg))
points = points.slice(-canvas.width)
canvas.requestPaint()
}Then, implement func:
function func(argument) {
var a=(2*Math.PI/10); var b=4*Math.PI/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()...