在使用動力學形狀從組中選擇一個形狀的id時遇到困難？

Question

我在使用其id從group中選擇shape時遇到問題。這是我的codepen：http://codepen.io/drixta/pen/AInHL

這是我創建一個方形碼：

function create_square(posr,posc,state,len){ 
var square = new Kinetic.Rect({ 
    id : "sqr"+ posr + "," + posc, 
    posr: posr, 
    posc: posc, 
    state : state, 
    x: posr*len, 
    y: posc*len, 
    width: len, 
    height: len, 
    stroke: 'black', 
    strokeWidth: 2, 
    fill: 'white' 
}); 
console.log(square.attrs.id); 
squareGroup.add(square); 
} 

從這裏一切正常。控制檯將打印出每個方塊的ID。

sqr0,0 javascript.js:44 
sqr0,1 javascript.js:44 
sqr0,2 javascript.js:44 
sqr0,3 javascript.js:44 
sqr0,4 javascript.js:44 
sqr0,5 javascript.js:44 
sqr0,6 javascript.js:44 
sqr0,7 javascript.js:44 

然而，根據這個網站：http://www.html5canvastutorials.com/kineticjs/html5-canvas-select-shape-by-id-with-kineticjs/

我在節目的最後使用console.log((squareGroup.get('#sqr0,0')[0]).attrs.id)嘗試，它說cannot get attrs of undefined。假設這不起作用。

非常感謝！

PS：這是爲凸顯框的代碼：

square.on("mouseover", function(){ 
square.setFill('blue'); 
layer.draw(); 
}); 
square.on("mouseout", function(){ 
square.setFill('white'); 
layer.draw(); 
}); 

我嵌套它在create_square功能，這是極其緩慢，反應遲鈍時的箱數增加時，沒有人知道我在哪裏可以做更好？

Answer 1

您的示例適用於Chrome，沒有任何問題。

提高性能。 問題就在這裏：

square.on("mouseover", function(){ 
square.setFill('blue'); 
    layer.draw(); 
}); 
square.on("mouseout", function(){ 
    square.setFill('white'); 
layer.draw(); 
}); 

你叫layer.draw（）兩次 - 它是緩慢的。你可以這樣做：

square.on("mouseover", function(){ 
    square.setFill('blue'); 
}); 
square.on("mouseout", function(){ 
    square.setFill('white'); 
    setTimeout(function(){layer.draw();}); 
});