jquery拖放和捕捉kinetic中的網格

嘿，我正在實施使用Kineticjs的拖放操作現在我想圖像互相捕捉，如果他們接近.. 我看到了動物在海灘上的例子在KineticJs這對我沒有任何幫助，因爲我的功能然後看到了jquery捕捉到網格的東西..但是如果我使用它，那麼我將不得不擺脫KineticJs。是否有任何方法來實現jquery snap propery元素kineticJs 在jquery中導致它們已經通過了img的id使它可以拖動然後捕捉。因此，如何能我用這個跟我kinetic.js圖像jquery拖放和捕捉kinetic中的網格

jQuery的可拖動：http://jqueryui.com/demos/draggable/#snap-to

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

感謝

阿希什

來源

2012-02-29 ashishashen

如果你打算爲捕捉到一個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.

編輯，oops錯過了部分問題。爲了捕捉到其他的廣場，這裏就是我想要做的：

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

來源

2012-03-05 09:14:51 randompast

非常感謝,,,一定會試試看 – ashishashen 2012-03-05 09:32:17

謝謝..對於幫助..把它.. :) – ashishashen 2012-03-05 12:06:09

很高興聽到。我是KineticJS的大力支持者，很高興看到您使用它。我鼓勵你在KineticJS論壇發帖分享你的創作。 – randompast 2012-03-06 05:04:01

我首先創建網格

var grid = new Array(gridSize); 
    for (var row = 0; row < gridSize; row++) { 
     grid[row] = new Array(gridSize);// the columns 
    }

我再拿到細胞

function current_cell(mousePos) { 
     var x = mousePos.x + half_column_width; 
     var y = mousePos.y + half_column_height; 
     if ((x < column_width) || (y < column_height) || (x > board_width + column_width) || (y > board_height + column_height)) { 
     return false; 
     } 
     x = Math.min(x, (board_width * column_width) + column_width); 
     y = Math.min(y, (board_height * column_height) + column_height); 
     cell_x = Math.floor(x/column_width); 
     cell_y = Math.floor(y/column_height); 
     if (grid[cell_x][cell_y] == undefined) { 
     grid[cell_x][cell_y] = {}; 
     } 
     var cell = grid[cell_x][cell_y]; 
     cell.cell_x = cell_x; 
     cell.cell_y = cell_y; 
     cell.x = cell_x * piece_width; 
     cell.y = cell_y * piece_height; 
     return cell; 
    }

然後在鼠標移動

shape.on('dragmove', function() { 

    var mousePos = stage.getMousePosition(); 
    cell = current_cell(mousePos) 
    shape.setPosition(cell.x, cell.y); 
});

來源

2013-09-29 22:09:38 Davinj

jquery拖放和捕捉kinetic中的網格

回答

相關問題