0

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を作成しませんでした。コードが非常に長いためですが、詳細が必要な場合はお知らせください。

4

1 に答える 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 に答える