使用KineticJS在鼠標懸停上重新着色形狀

我剛開始使用Kinetic.js，並且我對畫布也很不熟悉，所以如果這個問題很簡單，那麼裸露在身邊。使用KineticJS在鼠標懸停上重新着色形狀

我有一個畫布，可容納中等到大量的形狀（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); 
}

我想diagramImage的上下文的改變的StrokeStyle以不同顏色的鼠標懸停。我明白，畫布元素不會追蹤'狀態'，因此，不知道當前有一個形狀。

我想知道的幾件事情：

是否有關帆布上述事實爲動能的層元素保持爲真？
看來我需要清除diagramImage的上下文並使用不同的顏色重繪 - 這會導致mouseover閃爍嗎？
會在我目前的形狀下面繪製另一種形狀的顏色是否有益？然後，我可以將形狀隱藏在頂部 - 也許通過修改Z-索引 - 看似「改變」形狀的顏色？
如果3是真的，將500個元素翻倍爲1000會有什麼性能問題？

任何信息讚賞。由於

來源

2012-02-14 Sean Anderson

這裏有一個實驗室，告訴您如何改變形狀的顏色與鼠標懸停：

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

來源

2012-02-14 01:12:43

這確實正是我想要的，謝謝。 – 2012-02-14 16:53:49

只是爲了讓你知道，這是非常有用的。一個很好的問題和一個很好的答案。正是我在找什麼。 – 2013-03-21 19:03:32

如何添加相同的行爲，但對於選定的形狀，單擊鼠標並保留顏色直到選擇不同的形狀？是否有像「IsSelected」這樣的屬性？謝謝 – 2013-08-08 07:56:43

使用KineticJS在鼠標懸停上重新着色形狀

回答

相關問題