See my example: https://jsfiddle.net/ksumarine/x7f9yLb7/4/
I have a .Stage that has an offset which puts 0, 0 at the bottom center of the canvas. This has a .Layer which draws the .Shape of an objects path from an array of x,y coordinates.
let routes = [{x: #, y: #}, {x: #, y: #}, ......] // example routes
let testStage = new Konva.Stage({
container: con,
x: 0,
y: 0,
width: 300,
height: 300,
offsetX: ((300 / 2) * -1),
offsetY: (300 * -1)
});
let testLayer = new Konva.Layer();
let testShape = new Konva.Shape({
sceneFunc: function(context) {
context.beginPath();
for (var i = 0; i < routes.length - 1; i++) {
context.moveTo(routes[i].x, routes[i].y);
context.lineTo(routes[i + 1].x, routes[i + 1].y);
}
context.strokeStyle = '#000';
context.lineWidth = 1.5;
context.stroke();
}
});
testLayer.add(testShape);
testStage.add(testLayer);
//////////// here's the button click event
animateButton.addEventListener('click', e => {
let i = 0;
let _ctx = testLayer.getContext()._context;
let draw = () => {
setTimeout(() => {
if (routes.length) {
_ctx.clearRect(0, 0, 300, 300);
_ctx.beginPath();
_ctx.moveTo(routes[0].x, (routes[0].y * -1));
for (let p = 1, plen = i; p < plen; p++) {
_ctx.lineTo(routes[p].x, (routes[p].y * -1));
}
_ctx.strokeStyle = '#000';
_ctx.lineWidth = 1.5;
_ctx.stroke();
(i === routes.length - 1) ? i = 0: i++;
}
requestAnimationFrame(draw);
}, 1000 / 59.940);
}
draw();
});
Everything at this point works well and the path is drawn as expected. I would like to use Konva.Animation to show how the object moved, but I cannot figure it out or find any examples to help.
I've added normal Canvas JS in the button eventListener as an example of the desired effect, but using the testLayer context to draw with puts 0,0 back at the top left...not what I want.
Could someone point me in the right direction to accomplish this using Konva.Animation?
