Выравнивание фигур по плану, Алгорыхтм - PullRequest
Новая
       27

Выравнивание фигур по плану, Алгорыхтм

0 голосов
/ 10 ноября 2009

Я разрабатываю простой инструмент для построения диаграмм с фигурами на плане, используя flex. Сначала я использовал простую сетку 20 * 20.

Но по-настоящему круто то, что это магнитный эффект авто-топора, так я его называю, по крайней мере, чтобы понять, почему я имею в виду то, что я снял небольшое видео с balsamiq.

http://screenr.com/clB

http://www.balsamiq.com/

Как вы можете видеть, он выравнивается по вертикальной горизонтальной границе и центральной оси.

  • Границы: серые топоры
  • Горизонтальное выравнивание (высота / 2) Центр: синий топор
  • Без вертикального выравнивания (ширина / 2) топор
  • Некоторые промежуточные отступы 25px: зеленые оси

Как вы думаете, как работают такие алгоритмы: Сейчас я буду делать без вращения.

Дана форма S1 , выбранная в верхнем левом положении x, y ширины w и высоты h .

Посмотрите на все фигуры, пересекающие две зоны:

из xmin = x, xmax = x + w для y> 0.

от yming = y, ymax = y + h для x> 0.

Как только у меня есть список соответствующих фигур, я проверяю, соответствуют ли какие-либо условия:

Когда я использую '=', его приближение + или - 2 пикселя даст желаемый эффект "магнита"

  • S1 x = S'x => Серая линия в x
  • S1 x + w = ​​S'x => Серая линия в x + w
  • S1 y = S'y => Серая линия у y
  • S1 y + h = S'y => Серая линия при y + h
  • S1 x = S'x и S1 x + w = ​​S'x + w => Синяя линия при x + w / 2

А учитывая набивочный магнит 20 px

  • S1 x = S'x + PADD => зеленая линия в S1 x
  • S1 x = S'x - PADD => зеленая линия при S1 x
  • S1 y = S'y + PADD => зеленая линия на S1 y
  • S1 y = S'y - PADD => зеленая линия на S1 y

Что вы думаете об этом?

1 Ответ

0 голосов
/ 10 ноября 2009

Я написал алгоритм привязки Бальзамика. Ты довольно близко Одна «умная» вещь, которую мы делаем (если можно так сказать, сам), - это предварительно заполнить два разреженных массива привязывающими координатами onMouseDown, чтобы их было легко / быстро / дешево найти на MouseMove. То, что я делаю на Доме Дауна, таково:

давайте поговорим о координатах x (затем повторите то же самое для y):

  • скажем, ГРАВИТАЦИЯ 5
  • посмотрите на все формы
  • для каждой фигуры посмотрите на левый край, скажем, на 100. Заполните объект xSnappingPositions от 100-GRAVITY (95) до 100 + GRAVITY (105) числом 100. Повторите для правого края

Затем, когда вы делаете onMouseMove, вы смотрите на элемент управления, который вы перетаскиваете по x и y. Есть ли что-то в xSnappingPositions и ySnappingPosition, что соответствует левому краю сейчас? если это так, перейдите к значению, сохраненному в массиве, вместо использования позиции, обнаруженной мышью (то есть привязка к ней). Повторите проверку для правого края, центра и т. Д.

Надеюсь, это поможет!

...