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 );
});

所以当kick 被踢时，它触发kick 声音，当snare 被点击它触发snare 声音等等......每个setup 属性中的sound 属性描述了应该播放的声音。

问题是，所有点击事件都会触发“帽子”声音。我发现这是因为“帽子”属性是设置对象中的最后一个。

我究竟做错了什么？是因为回调吗？

如果您访问此处，您将看到一个示例。

另外，在这个例子中，如果你双击，它只会触发一次声音，当它应该触发两次时！那是怎么回事？

4

2 回答 2

2

我认为是这样的：将 var 从 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将图像名称属性设置为名称，然后使用传递给函数的鼠标事件获取名称，如下所示：

变量 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 回答