Ponowne kolorowanie kształtu przy najechaniu myszą przy użyciu KineticJS

Question

Właśnie zacząłem używać Kinetic.js, a także jestem bardzo obeznany z Canvas, więc nie bój się, jeśli to pytanie jest banalne.

Mam płótno, które pomieści od umiarkowanej do dużej ilości kształtów (50-500).

udało mi się rysunek zarys kształtu chciałbym za pomocą tych narzędzi:

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); 
} 

chciałbym zmienić strokeStyle diagramImage za kontekst do innego koloru po najechaniu myszą. Rozumiem, że element canvas nie śledzi "stanu" i jako taki nie ma pojęcia, że ​​obecnie jest na nim jakiś kształt.

Zastanawiam się kilka rzeczy:

1. Czy powyższy fakt o płótnie prawdziwe dla elementu warstwy kinetyczna jest?
2. Wygląda na to, że powinienem wyczyścić kontekst diagramuImage i przerysować go przy użyciu innego koloru - czy spowoduje to migotanie przy najechaniu myszą?
3. Czy rysunek innego koloru "pod" moim aktualnym kształtem byłby w ogóle korzystny? Czy mogę ukryć kształt na górze - może modyfikując indeks Z - aby pozornie "zmienić" kolor kształtów?
4. Jeśli 3 jest prawdą, czy miałoby to jakieś problemy z wydajnością z podwojeniem 500 elementów do 1000?

Wszelkie informacje doceniane. Dzięki

Answer 1

Oto laboratorium, który pokazuje w jaki sposób można zmienić kolor kształt jest przy najechaniu myszą:

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