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

【问题标题】：KineticJS, can I just redraw one shape? (drawing on canvas)KineticJS，我可以只重绘一个形状吗？（画在画布上）
【发布时间】：2013-01-19 18:02:03
【问题描述】：

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

(.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，因为我的代码很长，但是如果您需要更多详细信息，请告诉我。

【问题讨论】：

标签： javascript animation canvas kineticjs

【解决方案1】：

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

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

所以我只是拿了图层并使用要在新位置绘制的对象的前后值在其上绘制。

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

【讨论】：