Привязывайте края объектов друг к другу и предотвращайте наложение
Моя цель состоит в том, чтобы предотвратить наложение двух или более прямоугольников внутри моего полотна FabricJS.
Представьте себе два прямоугольника, имеющие информацию о положении и размере, и вы можете перетаскивать любой прямоугольник внутри холста.
Если прямоугольник A подходит достаточно близко к прямоугольнику B, положение прямоугольника A должно привязываться к краю прямоугольника B. Это должно работать для любого края прямоугольника B. Вершины не должны совпадать, потому что размеры прямоугольников являются переменными ,
У меня есть рабочий пример для привязки к одному измерению (оси X).
Моя лучшая попытка jsfiddle
Увидетьjsfiddle.
Но мне нужно, чтобы обойти прямоугольник в обоих измерениях. Я совершенно уверен, что мой код недостаточно хорош для этого.
Фрагменты кода, которые могут помочь:
object.oCoords.tl.x //top-left corner x position. similar goes for top-right (tr), bottom-left (bl), bottom-right (br) and .y for y-position
mouse_pos = canvas.getPointer(e.e);
mouse_pos.x //pointer x.position
mouse_pos.y //pointer y.position
object.intersectsWithObject(targ) // object = dragged rectangle, targ = targeted rectangle
Привязка должна работать для неограниченного количества объектов (не только для двух прямоугольников).