2012-12-03 61 views
1

我只是想設置每個形狀的單擊事件特定形狀ID,我希望能夠以顯示給我哪方是基於了他們的身份證。動力學獲得點擊

var stage = new Kinetic.Stage({ 
container: 'container', 
    width: 700, 
    height: 700, 
}); 


var squareLayer; 
var boardBlankArray; 

function drawBoard() { 
    var squareLayer = new Kinetic.Layer(); 
    var initialSquares = 64; 
    var squareX = 20; 
    var squareY = 20; 
    boardBlankArray = []; 

for (i = 0; i < initialSquares; i++) { 
    var square = new Kinetic.Rect({ 
     x: squareX, 
     y: squareY, 
     width: 50, 
     height: 50, 
     fill: "blue", 
     stroke: "black", 
     strokeWidth: 2, 
     id: "squares" + i 
    }); 

    squareX += 60; //update squares X (horizontal) position 
    if (squareX > 450) { 
     squareX = 20; 
     squareY += 60; 
    } 


    boardBlankArray[i] = square; 

    squareLayer.add(boardBlankArray[i]); 

    boardBlankArray[i].on("click", function() { 
     alert(boardBlankArray[i].getId()); 
    }); 
} 
    stage.add(squareLayer); 
} 


drawBoard(); 

http://jsfiddle.net/tSvmd/

我做了小提琴和出於某種原因跟它boardBlankArray是不確定的,但它顯然是。另外,當我在我的計算機上進行本地操作時,我不會收到該錯誤。相反,它只是提醒所有廣場的相同ID。

任何幫助將不勝感激。

回答

2

嘗試this.attrs.id代替boardBlankArray [I] .getId()爲形狀標識


固定輸出:

http://jsfiddle.net/tSvmd/1/

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script type='text/javascript' src='http://www.kineticjs.com/download/v4.0.5/kinetic-v4.0.5.min.js'></script> 
<script type='text/javascript'> 
window.onload=function(){ 
var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 700, 
    height: 700, 
}); 
var squareLayer; 
var boardBlankArray; 
function drawBoard() { 
    var squareLayer = new Kinetic.Layer(); 
    var initialSquares = 64; 
    var squareX = 20; 
    var squareY = 20; 
    boardBlankArray = []; 
    for (i = 0; i < initialSquares; i++) { 
     var square = new Kinetic.Rect({ 
      x: squareX, 
      y: squareY, 
      width: 50, 
      height: 50, 
      fill: "blue", 
      stroke: "black", 
      strokeWidth: 2, 
      id: "squares" + i 
     }); 
     squareX += 60; //update squares X (horizontal) position 
     if (squareX > 450) { 
      squareX = 20; 
      squareY += 60; 
     } 
     boardBlankArray[i] = square; 
     squareLayer.add(boardBlankArray[i]); 
     boardBlankArray[i].on("click", function() { 
      alert(this.attrs.id); 
     }); 
    } 
    stage.add(squareLayer); 
} 
drawBoard(); 
} 
</script> 
</head> 
<body> 
<div id="container"> 
</div> 
</body> 
</html> 
+0

非常簡單。我應該記住'this',也可以發現它也適用於this.getId()。謝謝! – j0hnstew

1

試試這個,而不是點擊一下,用ev來獲取事件的形狀對象t.shape並在該對象上使用getId()

boardBlankArray[i].on("click", function(evt) { 
var node=evt.shape; 
      alert(node.getId()); 
     });