KineticJS，我可以重绘一个形状吗？ （在画布上绘图）

Question

在KineticJS中，我想为图层添加一个形状，并且只重绘最近添加的形状，而不是重绘该图层中的所有形状。这可能吗？或者也许是一些workaroud？

（。draw（）函数重绘图层上的所有子节点）

关于我的情况的更多细节：

我有一个图层，我想画一条线，在动画过程中跟踪一个形状在屏幕上的移动。

       //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 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

这种情况很有效，但随着时间的推移，我得到了大量的积分，重绘线的时间越来越长。

我想要做的是在动画的每个循环中在图层上绘制一条新线，使其分段。像这样：

       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.

但是.draw（）函数重绘了图层上的所有子节点，这不是更高效或更快。

抱歉，我没有提供一个jsfiddle，因为我的代码很长，但如果您需要更多详细信息，请告诉我。

Answer 1

这个问题与不想删除屏幕上任何先前对象但不想重绘任何对象的想法有关，基本上只是绘制一个新项目并显示图层。我通过直接在图层上绘制来解决这个问题。

 var traceLayerDraw = traceLayer.getCanvas();
 var context = traceLayerDraw.getContext('2d'); 
 context.beginPath();
 context.moveTo(xBefore, yBefore);
 context.lineTo(newX, newY);
 context.stroke();

所以我只是使用图层并使用我想要在新位置绘制的对象的值之前和之后绘制它。

我还必须将图层设置为'clearBeforDraw：false'作为图层的属性。