我正在使用HTML5构建应用程序,其中绘制了网格。我上面有一些可以移动的形状。
我想做的是将对象移动到形状时将它们捕捉到定义的某些点。
我尝试的是将锚点保存在数组中,并在放置形状时在最接近的锚点上绘制形状。
Easeljs是我的主要js库,因此我想保留它,但是如果需要,我可以将另一个与easyljs一起使用。

在此先感谢您的帮助!

最佳答案

这很简单:


循环遍历每个点,并获得与鼠标的距离
如果该项目比其他项目更近,则将对象设置为其位置
否则,请捕捉到鼠标


以下是使用最新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;
}


希望有帮助!

关于javascript - Easeljs捕捉到网格,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30726835/

10-10 15:21