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();
      };
    }

我在我的一个单独的项目中有类似的代码，它就像一个魅力..但它很尴尬，它在这里不能很好地工作。图片显示在画布上，其可拖动，在这种情况下不应该是因为我明确返回{ x:0, y:0 } （返回值仅供我测试）< / strong>即可。我还查看了控制台日志，'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>

KineticJS dragBoundFunc不能正常工作

1 个答案: