Jquery拖放并在kineticJS中捕捉到网格

Question

嘿,我正在使用Kineticjs实现拖放操作现在我希望图像在相邻时能够互相捕捉..我在KineticJs看到了海滩上的动物示例,这对我的功能没什么帮助,然后看到了jquery snap如果我使用那个,那么我将不得不摆脱KineticJs.是什么方式实现jquery snap属于kineticJs中的元素导致在jquery中他们已经传递了img的id以使其可拖动然后按下.那么如何在我的kinetic.js图像中使用它

jquery draggable:http://jqueryui.com/demos/draggable/#snap-to

kinetic.js:http://www.kineticjs.com/

谢谢

阿希什

Answer 1

如果你想要捕捉到nxm网格的东西,你需要添加一个调用一个捕获它的函数的监听器.你可能想在"dragend"这样做

http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-events-tutorial/

  box.on("dragend", function(){
    snaptogrid(box);
  });

...方块瓷砖的100x100网格

  function snaptogrid(YourObject){
     YourObject.x = Math.floor(YourObject.x/100) * 100 + 50;
     YourObject.y = Math.floor(YourObject.y/100) * 100 + 50;
  }

例如:如果YourObject.x = 325,那么你将得到Math.floor(3.25)*100 + 50 = 350.左边和上边都应该是300,而中心是350.

编辑,哎呀错过了部分问题.为了捕捉到其他方块,这是我要做的:

function snaptoOther(YourSquares, index){
   var lastone = YourSquares.length-1;
   var maxDist = 125;
   var minDist = 75;
   var squarelength = 100;

   for(var i=0; i<lastone; i++)
   {
     var checkx = abs(YourSquares[index].x - YourSquares[i].x);
     var checky = abs(YourSquares[index].y - YourSquares[i].y);
     var multiplyX = Math.round((YourSquares[index].x - YourSquares[i].x)/squarelength);
     var multiplyY = Math.round((YourSquares[index].y - YourSquares[i].y)/squarelength);

      if(checkx < maxDist && checkx > minDist && i !== index)
        {
          YourSquares[index].x = YourSquares[i].x + multiplyX*squarelength;
        }
      if(checky < maxDist && checky > minDist && i !== index)
        {
          YourSquares[index].y = YourSquares[i].y + multiplyY*squarelength;
        }
   }
}