Recuperación de una forma en el mouseover usando KineticJS

Question

Acabo de empezar a usar Kinetic.js, y tampoco estoy muy familiarizado con Canvas, por lo que debo contarme si esta pregunta es trivial.

Tengo un lienzo que tendrá una cantidad moderada a grande de formas (50-500).

he tenido éxito en dibujar el contorno de la forma me gustaría utilizar estas herramientas:

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

me gustaría cambiar strokeStyle del contexto de diagramImage a un color diferente en mouseOver. Entiendo que el elemento lienzo no realiza un seguimiento de 'estado' y, como tal, no tiene idea de que actualmente hay una forma.

Me pregunto algunas cosas:

1. ¿El hecho anterior sobre lienzo son válidas para el elemento de la capa de cinética?
2. Parece que tendría que borrar el contexto de diagramImage y volver a dibujar con un color diferente. ¿Esto causará parpadeo en mouseover?
3. ¿Dibujaría otro color de forma 'debajo' mi forma actual sería beneficiosa? ¿Puedo ocultar la forma en la parte superior, tal vez modificando un índice Z, para aparentemente "cambiar" el color de las formas?
4. Si 3 es cierto, ¿esto tendría algún problema de rendimiento si doblamos 500 elementos a 1000?

Cualquier información apreciada. Gracias

Answer 1

Aquí hay un laboratorio que muestra cómo se puede cambiar el color de una forma con pasar el ratón:

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