KineticJS dragBoundFunc 不起作用

Question

我有这个调用函数

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

而且，我有这个功能来显示图像

功能构建地图（层，img_src）{ var img = new Image(); img.src = img_src; img.onload = 函数（e）{ var map = new Kinetic.Image({ id: 'map_img', x: 0, y: 0, 图片：img， 可拖动：真， dragBoundFunc：函数（位置）{ // 这应该执行 console.log('哈哈哈'); 返回 { x:0, y:0 }; } }); layer.add(地图); 图层.draw(); }; }

我在一个单独的项目中有一个类似的代码，它就像一个魅力。但它在这里不能很好地工作，这很尴尬。图片显示在画布中，并且它的可拖动，在这种情况下不应该是因为我明确返回了{ x:0, y:0 }（返回值仅用于我的测试）。我还查看了控制台日志，'hahaha' 文本从未出现过。拖动图像时它没有调用该函数。这两个都在<script> 标记和一个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>