Question

我正在创建一个可拖动图像的脚本，并且可以在双击时更改图像源。

移动图像工作正常，当双击图像（事件为dblclick）时，图像会发生变化但同一时间显示为双倍，而原始位置会出现另一个相同的图像。

代码是：

var picture = new Image();
picture.onload = function() {
   var picture = new Kinetic.Image({
   x: 10,
   y: 10,
   image: picture,
   draggable: true,
   width: 100,
   height: 200
});

picture.on('dblclick', function() {
   picture.src = 'images/picture2.jpg';
});

layer.add(picture);
stage.add(layer);

}

picture.src = 'images/picture1.jpg';

我做错了什么？

Answer 1

那是因为每次更改image.src时，都会触发image onload事件。和onload事件创建一个新的动态图像并添加到图层。这是我的源代码版本。

$( function() {
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 578,
      height: 200
    });
    var layer = new Kinetic.Layer();

    var yoda = new Kinetic.Image({
      x: 140,
      y: stage.getHeight() / 2 - 59,
      width: 106,
      height: 118,
      draggable:true
    });

    var images =[
        'http://www.html5canvastutorials.com/demos/assets/yoda.jpg',
        'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg',
        'http://www.html5canvastutorials.com/demos/assets/wood-pattern.png'
    ];
    var imgIndex = 0;
    var imageObj = new Image();
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

    imageObj.onload = function() {
        yoda.setImage(imageObj);
        layer.draw();
    };

    yoda.on('dblclick',function() {
        imageObj.src = images[ imgIndex++ % 3 ];
    })

    layer.add(yoda);
    stage.add(layer);

});

我相信你会遵循网站的教程，但它并不总是正确的。另外，请记住不要在源上使用相同的可变图像来显示图像和动态对象。它很混乱

Kinect中的可拖动图像事件

1 个答案: