2

我有这个调用功能

    $(文档).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 }（返回值仅用于我的测试）。我还查看了控制台日志，“哈哈哈”文本从未出现过。拖动图像时它没有调用该函数。这两者都在一个<script>标签内和一个 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 回答