KineticJS dragBoundFunc 不起作用

Posted 2023-02-16

【中文标题】KineticJS dragBoundFunc 不起作用

【英文标题】：KineticJS dragBoundFunc not working

【发布时间】：2012-12-25 07:43:21

【问题描述】：

我有这个调用函数

$(文档).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 文档中。

【问题讨论】：

我刚刚看到导致问题的错误..我一直在为这个项目使用 kinetic-v3.10.0.. 我认为这个版本 3.10.0 与 dragBoundFunc 有一些问题.. 我试过了导入 4.2.0 但错误将显示在我的控制台上..

jsfiddle 链接：link

您考虑过使用更新版本的 kineticjs 吗？喜欢 4.3？

我刚刚尝试过.. 是的.. 我的 dragBoundFunc 工作了.. 但我的“添加新多边形”没有.. 控制台将是我的消息 Uncaught TypeError: Cannot read property 'x' of undefined 如果我'会折叠它会有一个(anonymous function)写。

【参考方案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>

【讨论】：

jsfiddle.net/xpLPT/3 ，一个更新，如果你看一下它确实会正确触发。作为一个性能问题，每次您单击“#change-background”按钮时，您都在添加一个新图层，不应该这样做。

新版本的动力学已经发布，它修复了阻力边界功能的问题。

它就像一个魅力！ :D 我已经添加了layers['map'].remove(); 但控制台会给我这个错误Uncaught TypeError: Object function map() [native code] has no method 'remove' 我认为这是由 jQuery 引起的..

不是JQuery，问题是函数第一次执行时，对象不存在，但试图被移除。让我编辑它并像上面一样尝试。