Vue Konva. Improve performance of rendering multiple circles with animation
You can just use layer, that you already created in your template:
addPing(e, stage) { const layer = this.$refs.layer.getNode(); const amplitude = 25; const period = 500; let item = new Konva.Circle({ x: e.evt.x, y: e.evt.y, radius: 0, stroke: "red", strokeWidth: 5 }); layer.add(item); const anim = new Konva.Animation(frame => { item.radius(amplitude * Math.sin((frame.time * Math.PI) / 1000)); }, layer); anim.start(); setTimeout(() => { item.destroy(); anim.stop(); layer.batchDraw(); }, period); },
And just for fun, here is @lavrton's answer in plain JS. Run the snippet and wave your mouse over the white canvas. Red circles ensue.
function addPing(e) { var amplitude = 25, period = 500; var item = new Konva.Circle({ x: e.evt.x, y: e.evt.y, radius: 0, stroke: "red", strokeWidth: 5 }); layer.add(item); var anim = new Konva.Animation( function(frame) { item.radius(amplitude * Math.sin((frame.time * Math.PI) / 1000)); }, layer); anim.start(); setTimeout(function(){ item.destroy(); anim.stop(); layer.batchDraw(); }, period);}function setup() {// Set up a stage and a shapestage = new Konva.Stage({ container: 'konva-stage', width: 800, height: 500});layer = new Konva.Layer();stage.add(layer);stage.draw()stage.on('mousemove', function(e){ addPing(e) })}var stage, layer;setup().konva-stage { width: 100%; height: 100%;<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/konva/4.0.13/konva.js"></script><div id="konva-stage"></div>