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 を警告するだけです。

どんな助けでも大歓迎です。

4

2 に答える 2

2

形状 IDのboardBlankArray[i].getId()の代わりにthis.attrs.idを試してください


固定出力:

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>
于 2012-12-04T08:39:29.177 に答える
1

クリックの代わりにこれを試して、イベントの形状オブジェクトを evt.shape で取得し、そのオブジェクトで getId() を使用します

   boardBlankArray[i].on("click", function(evt) {
var node=evt.shape;
            alert(node.getId());
        });
于 2012-12-04T09:47:44.827 に答える