Easeljs привязка к сетке

Question

Я создаю приложение с использованием HTML5, в котором нарисована сетка. У меня есть некоторые формы, которые вы можете перемещать. То, что я пытаюсь сделать, - это привязать объекты к некоторым точкам, определенным при наведении их при перемещении фигуры. То, что я пытался это сохранить якоря точек внутри массива и когда форма удаляется, я рисую форму на ближайшей точке крепления. Easeljs - мой главный js lib, поэтому я хочу его сохранить, но при необходимости я могу использовать другой с easeljs.

Заранее благодарим за вашу помощь!

Answer 1

Это довольно просто:

1. Цикл по каждой точке, и получить расстояние до мыши
2. Если элемент находится ближе, чем другие, установить объект в положение
3. В противном случае оснастки к мыши вместо

Вот краткий пример с последним 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; 
} 

Надежда, что помогает!