使用KineticJS使形状与其他形状对齐

Question

假设我已经在容器中拖放了一个矩形。如何让其他可拖动的矩形以类似于jqueryUI实现的方式与画布中的现有矩形（其边界不在其中）对齐？

Answer 1

演示：http://jsfiddle.net/m1erickson/rx8SM/

假设您有一个这样定义的网格：

var cellWidth=40;
var cellHeight=40;

然后你可以像这样捕捉到一个细胞交叉点：

捕捉到矩形的x，y所在的左上角交点

rect1.on("dragend",function(){

    // snap to the grid intersection that this rect's x,y is in

    var snapX=parseInt(this.x())/cellWidth)*cellWidth;

    var snapY=parseInt(this.y())/cellHeight)*cellHeight;

    this.position({x:snapX,y:snapY});

    layer.draw();
});

捕捉到最近的左上角交叉点

rect1.on("dragend",function(){

    // snap to the closest top-left grid intersection

    var snapX=parseInt((this.x()+grid.cellWidth/2)/grid.cellWidth)*grid.cellWidth;

    var snapY=parseInt((this.y()+grid.cellHeight/2)/grid.cellHeight)*grid.cellHeight;

    this.position({x:snapX,y:snapY});

    layer.draw();
});