0

私はこのコードを持っています:

var load_image = function( src ){
    var img = new Image();
    img.src = src;
    return img;
};

var stage = new Kinetic.Stage({container: 'main', width: 640, height: 480});
var layer = new Kinetic.Layer();

var setup = {
    kick : {
        sound: 'kick',
        image_config : {
            image : load_image( '/images/bass.png' ),
            x : 250,
            y : 50
        }
    },
    snare : {
        sound: 'snare',
        image_config : {
            image : load_image( '/images/snare.png' ),
            x : 220,
            y : 220
        }
    },
    hats : {
        sound: 'hats',
        image_config : {
            image : load_image( '/images/hi-hat.png' ),
            x : 140,
            y : 150
        }
    }
};

var img;

for ( name in setup )
{
    img = new Kinetic.Image( setup[name].image_config );

    img.on('click', function()
    {
        soundManager.play( setup[name].sound );
    });

    img.createImageHitRegion(function()
    {
        layer.drawHit();
    },true);

    layer.add(img);
}

stage.add(layer);

これが問題です。セットアップ オブジェクトの各属性について、クリック イベントを追加したいと考えています。（上に示しました）

img.on('click', function()
{
    soundManager.play( setup[name].sound );
});

つまり、キックがキックされるとキック サウンドがトリガーされ、スネアがクリックされるとスネア サウンドがトリガーされるなどです。各セットアップ アトリビュートのサウンド アトリビュートは、再生するサウンドを記述します。

問題は、すべてのクリック イベントが「ハット」サウンドをトリガーすることです。「帽子」属性がセットアップオブジェクトの最後の属性であるためであることがわかりました。

私は何を間違っていますか？コールバックのせいですか？

ここにアクセスすると、例が表示されます。

また、この例では、ダブルクリックすると、サウンドが 1 回だけトリガーされますが、2 回トリガーされるはずです! どうしたの？

4

2 に答える 2

2

これだと思います：変数をforループの外側からforループの内側に移動します。var imgこれは、ループが実行されるたびに再定義していた単一の変数になるため、最後の設定が保持されます。

代わりに、ループが実行されるたびに関数が変数を書き換えないように、ローカル スコープを追加する必要があります。以下のようにループ内にローカル変数を作成してみてください

for ( name in setup )
{
    var newImg = new Kinetic.Image( setup[name].image_config );

    newImg.on('click', function()    
    {
        soundManager.play( setup[name].sound );
    });

    newImg.createImageHitRegion(function()
    {
        layer.drawHit();
    },true);

    layer.add(newImg);
}
于 2013-01-07T16:55:09.153 に答える
0

解決策を見つけました。クリック コールバック イベントで参照するのではなくsetup[name].sound、画像名属性を名前に設定し、次のように関数に渡されたマウス イベントを使用して名前を取得しました。

var img;

for ( name in setup )
{
    img = new Kinetic.Image( setup[name].image_config );

    img.attrs.name = name;

    img.on('click', function(i)
    {
        soundManager.play( i.shape.attrs.name );
    });

    img.createImageHitRegion(function()
    {
       layer.drawHit();
    },true);

    layer.add(img);
}
于 2013-01-08T08:31:42.867 に答える