In KineticJS, I would like to add a shape to a layer, and only redraw the most recently added shape, rather than all shapes in that layer. Is this possible? Or maybe some workaroud?
(.draw() function redraws all the child nodes on the layer)
More details on my situation:
I have a layer on which I want to draw a line which traces the movement of an shape across the screen during animation.
//create my shapes first
var myShape = new Kinetic.Circle({config});
//myShape gets its own layer, shapeLayer
var traceLine= new Kinetic.Line({x: myShape.getX() , y: myShape.getY()});
//traceLine gets its own layer, traceLayer
During animation I execute this code to update and redraw the line:
//during animation loop
var points = traceLine.getPoints();
points.push({x: myShape.getX() , y: myShape.getY()});
traceLine.setPoints(points); // this is currently the most efficient method I can think of
traceLayer.draw(); // redraw the line
shapeLayer.draw(); // the shape gets redrawn as well
This works well for a short while, but as time goes on I am getting a large array of points and the time to redraw the line is getting longer.
What I would like to do is draw a new line onto the layer during each loop of the animation, making it segmented. Like so:
var traceLine= new Kinetic.Line({x: myShape.getX() , y: myShape.getY(), x: myShape.getX()+1, y: myShape.getY()+1}); // draw as a point
traceLayer.add(traceLine);
traceLayer.draw(); //this slows it down as all lines get redrawn.
But the .draw() function redraws all the child nodes on the layer, which is not any more efficient or faster.
Sorry I didn't put up a jsfiddle, cause my code is very long, but if you need more details just let me know.