Easeljs 捕捉到网格

Question

我正在构建一个使用 HTML5 绘制网格的应用程序。我上面有一些你可以移动的形状。我想要做的是将对象捕捉到您在移动形状时悬停它们时定义的某些点。我尝试的是将锚点保存在一个数组中，当形状被放下时，我在最近的锚点上绘制形状。 Easeljs 是我的主要 js 库，所以我想保留它，但如果需要，我可以使用另一个带有 easeljs 的库。

在此先感谢您的帮助！

Answer 1

这很简单：

遍历每个点，得到到鼠标的距离
如果项目比其他项目更近，则将对象设置到它的位置
否则改为捕捉到鼠标

这是最新 EaselJS 的快速示例：http://jsfiddle.net/lannymcnie/qk1gs3xt/

距离检查如下所示：

// Determine the distance from the mouse position to the point
var diffX = Math.abs(event.stageX - p.x);
var diffY = Math.abs(event.stageY - p.y); 
var d = Math.sqrt(diffX*diffX + diffY*diffY);        

// If the current point is closeEnough and the closest (so far)
// Then choose it to snap to.
var closest = (d<snapDistance && (dist == null || d < dist));
if (closest) {
     neighbour = p;          
}

快照超级简单：

// If there is a close neighbour, snap to it. 
if (neighbour) {
    s.x = neighbour.x;
    s.y = neighbour.y;

// Otherwise snap to the mouse
} else {
    s.x = event.stageX;
    s.y = event.stageY;
}

希望对您有所帮助！

Easeljs 捕捉到网格

Easeljs snap to grid

javascript

canvas

drag-and-drop

easeljs

createjs