KineticJSを使用してマウスオーバーで形状を再現する

Question

私はKinetic.jsの使用を開始しましたが、私はCanvasにもほとんど慣れていません。

私は中〜大量の形（50-500）を保持するキャンバスを持っています。

私はこれらのツールを使用したい形状の輪郭を描くことに成功しました：

function DrawPolygon(diagramLayer, polygon) { 
    var diagramImage = new Kinetic.Shape(function() { 
     var context = this.getContext(); 
     context.beginPath(); 
     context.lineWidth = 1; 
     context.strokeStyle = "#ff0000"; 

     var lastVertice = polygon.Vertices[polygon.Vertices.length - 1]; 

     context.moveTo(lastVertice.X, lastVertice.Y); 

     for (var i = 0; i < polygon.Vertices.length; i++) { 
      var vertice = polygon.Vertices[i]; 
      context.lineTo(vertice.X, vertice.Y); 
     } 

     context.stroke(); 
     context.closePath(); 
    }); 

    diagramImage.on("mouseover", function() { 
    }); 

    diagramLayer.add(diagramImage); 
    planViewStage.add(diagramLayer); 
} 

Iマウスオーバーで別の色にdiagramImageのコンテキストのstrokeStyleを変更したいと思います。私はキャンバス要素が「状態」を追跡しておらず、その上に現在その上に形があることを知らないことを理解しています。

私はいくつかのことを疑問に思って：

1. キャンバスについて上記の事実は、キネティックの層要素に当てはまるでしょうか？
2. 私はdiagramImageのコンテキストをクリアし、別の色を使って再描画する必要があるようです - これはマウスオーバー時にちらつきを引き起こしますか？
3. 私の現在の形の下に他の色の形を描くことは、全く有益でしょうか？シェイプの色を一見「変更」するように、シェイプを上に隠すことができますか？
4. 3がtrueの場合、500要素を1000倍にするとパフォーマンスに問題はありますか？

ご了承ください。おかげ

Answer 1

は、ここでは、マウスオーバーで図形の色を変更する方法を示しラボです：

http://www.html5canvastutorials.com/labs/html5-canvas-interactive-flower/