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