0

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

4

1 回答 1

1

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

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

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

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

于 2013-01-21T02:07:14.803 回答