2

私はこの呼び出し関数を持っています

    $（document）.ready（function（）{
       $（'＃change-background'）。click（function（）{
         layer ['map'] = new Kinetic.Layer（）;
         buildMap（layers ['map']、'img / test.png'）;
         stage.add（layers ['map']）;
       }）;
    }）;

そして、画像を表示するこの機能があります

    関数buildMap（layer、img_src）{
      var img = new Image（）;
      img.src = img_src;
      img.onload = function（e）{
        var map = new Kinetic.Image（{
          id：'map_img'、
          x：0、
          y：0、
          画像：img、
          ドラッグ可能：true、
          dragBoundFunc：function（pos）{
            //これは実行する必要があります
            console.log（'hahaha'）;
            return {x：0、y：0};
          }
        }）;
        layer.add（map）;
        layer.draw（）;
      };
    }

私の別のプロジェクトにも同様のコードがあり、それは魅力のように機能します。しかし、ここではうまく機能しないのはかなり厄介です。画像はキャンバスに表示され、ドラッグ可能です。この場合は、明示的に返したためではありません{ x:0, y:0 }（戻り値はテスト専用です）。また、コンソールログを確認しました。 「hahaha」というテキストは表示されません。画像がドラッグされたときに関数が呼び出されませんでした。これらは両方とも<script>タグ内と1つのhtmlドキュメント内にあります。

4

1 に答える 1

1

これを修正しました: http://jsfiddle.net/xpLPT/2/

試す ：

 dragBoundFunc: function(pos) {
      console.log('hahaha');  //check the jsfiddle, this does work.
      return {
        x: this.getAbsolutePosition().x,  //constrain vertically
        y: this.getAbsolutePosition().y   //constrain horizontally
      }
 }

また、stage.draw(); を追加してクリック機能を変更します。

$(document).ready(function(){
   $('#change-background').click(function(){
     //if(layers['map'])
          // layers['map'].remove(); // this is optional, but recommended, as it removes the current map layer before adding a new one
     layers['map'] = new Kinetic.Layer();
     buildMap(layers['map'],'img/test.png');
     stage.add(layers['map']);
     stage.draw();
   });
});

新しいバージョンのカイネティクスを使用してみてください:

    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.0.min.js"></script>
于 2013-01-10T20:11:42.010 に答える