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 に答える