1

次のコードがあるとします。イベントは時々発生しているように見えますが、次の 2 つの例を見てください。

最初の例これはうまく機能し、イベントは期待どおりに毎回発生します

for (var i = 0; i < items; i++) {
            var rect = new Kinetic.Rect({
                x: 0,
                y: 1+i,
                width: 100,
                height: 2,
                fill: 'green'
            });
            rect.on('mouseover', function(evt) {
                $('#console').text(evt.shape.index);
            });
            layer.add(rect);
        }

実際の様子http://jsfiddle.net/6aTNn/5/

イベントに回転値を追加しても正しく起動していないように見えるときの私の問題は次のとおりです。

for (var i = 0; i < items; i++) {
            var rect = new Kinetic.Rect({
                x: stage.getWidth() / 2,
                y: stage.getHeight() / 2,
                width: 100,
                height: 1,
                fill: 'green'
            });
            rect.on('mouseover', function(evt) {
                console.log(evt.shape.index);
                $('#console').text(evt.shape.index);
            });
            rect.rotate(i * angularSpeed / items);
            // add the shape to the layer
            layer.add(rect);
        }

アクションを見るhttp://jsfiddle.net/6aTNn/8/

これについて何か助けがあれば、何時間もこれに取り組んでいて、うまくいく解決策を見つけることができませんか?

4

1 に答える 1

1

イベントが適切に発生するには、ノードが「細すぎ」、オーバーラップしすぎています。

各ノードの高さを増やし、追加するノードの数を減らしてみてください。
たとえば、 を に置き換えてi++をi += 3に増やしheightます2。

for (var i = 0; i < 800; i += 3) {
    var rect = new Kinetic.Rect({
        x: stage.getWidth() / 2,
        y: stage.getHeight() / 2,
        width: 100,
        height: 2,
        fill: 'green'
    });
    // ...
}
于 2013-01-21T10:15:32.147 に答える