0

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

移动图像可以正常工作，当双击图像（事件是 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';

我究竟做错了什么？

4

1 回答 1

0

那是因为每次更改 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);

});

我相信您遵循该网站的教程，但它并不总是正确的。另外，请记住不要在图像和动力学对象的源上使用相同的可变图片。这很令人困惑

于 2013-02-03T17:34:32.193 回答