4

私は、ホバーされた場所が他の画像をロードする場所である、KineticJS を使用してある種のインタラクティブなマップを作成しようとしています。しかし、マウスイベントを正しく機能させることができません。つまり、すべてが正常に機能しますが、最初のマウスオーバー試行でのみ機能し、2回目にホバーすると、マウスアウトトリガーが機能しません:(

つまり、2回目に「マウスアウト」を行うと、マップ部分を再び水色（n_amer画像）にしたいのですが、濃い青（n_amer_sel画像）のままです。

このバグを確認できるリンクは次のとおりです: http://kinlibtst.elitno.net/

私は助けてくれてとても感謝しています！

コード：

  function loadImages(sources, callback) {
    var assetDir = 'PROJECT/';
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for(var src in sources) {
      numImages++;
    }
    for(var src in sources) {
      images[src] = new Image();
      images[src].onload = function() {
        if(++loadedImages >= numImages) {
          callback(images);
        }
      };
      images[src].src = assetDir + sources[src];
    }
  }
  function initStage(images) {
    var stage = new Kinetic.Stage({
      container: 'container',
      width: 900,
      height: 452
    });

    var imagesLayer = new Kinetic.Layer();

    // img vars
    var n_amer = new Kinetic.Image({
      image: images.n_amer,
      x: 0,
      y: 0
    });

    var n_amer_sel = new Kinetic.Image({
      image: images.n_amer_sel,
      x: 0,
      y: 0
    });

    // mouse events
    n_amer.on('mouseover', function() {
        imagesLayer.add(n_amer_sel)
        stage.draw();
    });
    n_amer_sel.on('mouseout', function() {  
        imagesLayer.remove(n_amer_sel);
        stage.draw();
    });

    // imageBuffer for transparent pixels
    n_amer.createImageBuffer(function() {
      imagesLayer.drawBuffer();
    });
    n_amer_sel.createImageBuffer(function() {
      imagesLayer.drawBuffer();
    });        

    // add to stage
    imagesLayer.add(n_amer);
    stage.add(imagesLayer);
  }

  window.onload = function() {
    var sources = {
      n_amer: 'N-Amer.png',
      n_amer_sel: 'N-Amer_sel.png'
    };
    loadImages(sources, initStage);
  };
4

3 に答える 3

2

新しい画像オブジェクトを使用する代わりに、既存のオブジェクトの画像を変更します。

function loadImages(sources, callback) {
    var assetDir = 'http://kinlibtst.elitno.net/PROJECT/';
    var images = {};
    var loadedImages = 0;
    var numImages = 0;
    for (var src in sources) {
        numImages++;
    }
    for (var src in sources) {
        images[src] = new Image();
        images[src].onload = function() {
            if (++loadedImages >= numImages) {
                callback(images);
            }
        };
        images[src].src = assetDir + sources[src];
    }
}

function initStage(images) {
    var stage = new Kinetic.Stage({
        container: 'container',
        width: 900,
        height: 1000
    });

    var imagesLayer = new Kinetic.Layer();

    // img vars
    var n_amer = new Kinetic.Image({
        image: images.n_amer,
        x: 0,
        y: 0
    });

    // mouse events
    n_amer.on('mouseover', function() {
        this.setImage(images.n_amer_sel);
        stage.draw();
    });
    n_amer.on('mouseout', function() {
        this.setImage(images.n_amer);
        stage.draw();
    });

    // imageBuffer for transparent pixels
    n_amer.createImageBuffer(function() {
        imagesLayer.drawBuffer();
    });

    // add to stage
    imagesLayer.add(n_amer);
    stage.add(imagesLayer);
}

window.onload = function() {
    var sources = {
        n_amer: 'N-Amer.png',
        n_amer_sel: 'N-Amer_sel.png'
    };
    loadImages(sources, initStage);
};​
于 2012-09-04T13:07:41.363 に答える
1

これは本当に奇妙な動作です...おそらくイメージバッファと関係があります...リスナー内のバッファを再描画しようとするかもしれません。

いずれにせよ、画像と使用の両方を追加することをお勧めしshow()ますhide()。この操作は通常、子の追加/削除よりも高速です。

var n_amer_sel = new Kinetic.Image({
    image: images.n_amer_sel,
    x: 0,
    y: 0,
    visible: false
});

n_amer.on('mouseover', function() {
    n_amer_sel.show();
    stage.draw();
});
n_amer_sel.on('mouseout', function() {  
    n_amer_sel.hide();
    stage.draw();
});

// add to stage
imagesLayer.add(n_amer);
imagesLayer.add(n_amer_sel);
stage.add(imagesLayer);

このフィドルで（汚染されたキャンバスの問題を除いて）動作しているのを見ることができます

于 2012-09-04T13:07:13.117 に答える