Ограничить объект, чтобы остаться в пределах другого объекта - PullRequest
Новая
       26

Ограничить объект, чтобы остаться в пределах другого объекта

2 голосов
/ 08 апреля 2011

Все,

Это связано с SVG, у меня есть большой объект SVG, состоящий из путей, который остается статичным.Одним нажатием кнопки я могу создать еще один объект SVG внутри более крупного объекта.Второй объект можно перетащить с помощью mousedown.

ПРОБЛЕМА: Теперь я хочу добавить ограничение, чтобы второй созданный объект не мог выходить за пределы основного объекта.

Я пытался использовать 'mouseup'для ограничения, но это не работает, потому что ограничение применяется в соответствии с точкой курсора на втором объекте, а не с границей второго объекта.

Надеюсь, что кто-то может помочь.Приветствия,

ОБНОВЛЕНИЕ:

@ Phrogz: Мы пытались заставить код Кевина работать, но изо всех сил пытаемся получить любые результаты.У нас есть функция, прикрепленная к onmouseup, чтобы найти точки пересечения объекта на нижнем пути.

Предполагается, что функция выдаст результаты пересечения и выдаст предупреждение о том, что функция была выполнена.Это ничего не дает в ответ, заставляя нас задаться вопросом, выполняется ли функция вообще.

Вот основной код: 

var path=svgDoc.getElementById("path");


var str=intersectPathShape(path,DragTarget);
     alert(str)

Phrogz, есть мысли по этому поводу?

Ответы [ 2 ]

2 голосов
/ 08 апреля 2011

Вам нужно будет использовать библиотеку пересечений, например , созданную Кевином Линдси , чтобы определить, когда пути перекрывают друг друга, и предотвратить это.(Он также предоставляет демонстрации своего кода .)

В зависимости от того, как вы осуществляете перетаскивание, вам также может понадобиться установить флажок из двух элементов дляубедитесь, что одно содержится в другом (поскольку перетаскивание дочернего элемента полностью за пределы родительского элемента приведет к тому, что они не будут пересекаться, но и не будут являться допустимой позицией).

Простейшим кодом будет сохранение последней позицииребенка и верните его в это положение, когда будет обнаружено пересечение.Однако при быстром перетаскивании это может привести к тому, что ребенка перестанут перетаскивать в месте, которое на самом деле не касается.Для лучшего взаимодействия с пользователем вы можете попробовать выполнить двоичный поиск промежуточных смещений между последней хорошо известной позицией и текущей позицией, чтобы найти ближайшую точку на этом пути, которая является допустимой.

0 голосов
/ 19 июля 2011

Kayote,

Я думаю, что ответил на это в другом вопросе. Короткая версия - взгляните на этот проект github:

https://github.com/thelonious/js-intersections

В частности, функция loadShapes в этом файле:

https://github.com/thelonious/js-intersections/blob/master/samples/IntersectionUtilities.js

Вам нужно будет создать конкретный объект для каждого типа узла, а затем передать его в Intersection.intersectShapes.

НТН, Кевин

...