javascript - KineticJS dragBoundFunc 不工作

Question

我有这个调用函数

    $(document).ready(function(){
       $('#change-background').click(function(){
         layers['map'] = new Kinetic.Layer();
         buildMap(layers['map'],'img/test.png');
         stage.add(layers['map']);
       });
    });

而且，我有显示图像的功能

    function 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,
          image: img,
          draggable: true,
          dragBoundFunc: function(pos) {
            // THIS SHOULD EXECUTE
            console.log('hahaha');
            return { x:0, y:0 };
          }
        });
        layer.add(map);
        layer.draw();
      };
    }

我在我的一个单独的项目中有一个类似的代码，它工作得很好。但是它在这里不能很好地工作，这很尴尬。图像显示在 Canvas 中，并且它可拖动，在本例中不应该是因为我明确返回了 { x:0, y:0 }。 (返回值仅供我测试)。我还查看了控制台日志，'hahaha' 文本从未出现。当图像被拖动时它没有调用该函数。这两个都在 <code><script></code> 内标签和一个 html 文档。

Answer 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>