2016-10-14 2 views
0

Я работаю над приложением, и у меня есть ломаная линия на холсте макета сверху вниз без регулярного заказа.
Мышь перемещается по холсту, курсор появляется, и я хочу заставить его двигаться только в соответствии с координатой Y положения мыши на полилинии.Как заставить курсор двигаться только на полилинии?

До сих пор мне удалось это сделать, найдя, сколько пикселей на каждом сантиметре занимает холст (полилиния представляет собой набор диапазонов с независимыми пространствами между ними), но это не достаточно хорошо.

Кто-то может думать по-другому?

+0

Представление [Q & A] (http://stackoverflow.com/questions/23610167/how-to-find-the-coordinates-of-a-line-in-html5-canvas/23611965#23611965), описывающее как найти ближайшую точку на линии, заданной mouseX, mouseY. – markE

ответ

0

Посмотрите на polyline.PointToScreen и PointFromScreen, таким образом вы сможете иметь точки p = мышиные координаты относительно полилинии (0, 0).

Затем вам нужно будет вычислить проекцию p на каждый сегмент полилинии.

совет: для вычисления P»= проекция Р на сегменте S (P1, P2)

  1. Compute линия L1 определяется Р1, Р2
  2. вычислить линия L2, которая является перпендикулярной к L1, который идет через P
  3. вычислить пересечение P 'из L1 и L2
  4. , если Р' между P1 и P2: остановка
  5. еще, если нет: если DIST (P1P ') < DIST (P2P'): множество Р» = P1 и останов
  6. еще: множество P «= P2 и остановить

и, проходя через все сегменты полилинии S, держать всегда в Р», где расстояние (PP ') является минимальным.

Наконец: установите положение мыши на P '.

Таким образом, вы всегда будете размещать мышь точно на полилинии.

  • по желанию: если вы хотите только Y мышей следовать полилинии, установите только мыши Y для P'.y

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

рафинированного ответ для поиска только от горизонтальной линии:

  1. получить мышь xCoord
  2. Еогеаспа сегмент полилинии
  3. Если мышь xCoord между сегментом концов затем вычислить пересечение между сегментом и вертикальной линией xCoord

Вы можете сделать то же самое для yCoord: Если полилиния s eces следуют друг за другом только по X-Axis, ищущему пересечение между сегментом и вертикальной линией (мышь xCoord) Если сегменты полилинии следуют друг за другом по оси Y-оси для пересечения между сегментом и горизонтальной линией (мышь yCoord)

Полилиния Il не следует никаким правилам, использовать первый ответ - лучший выбор.

+0

Спасибо. Это решение выглядит немного тяжелым в режиме запуска для данной полилинии с чем-то вроде 200 сегментов сейчас? Учитывая, что мышь может двигаться очень быстро ... Я попробую. Можете ли вы придумать решение для поиска по текущей горизонтальной линии холста, где мышь в любой момент находим пиксель, представляющий полилинию для этой горизонтальной линии? – Nadavp

+0

@Nadavp. Разделите свой холст на 4,8 или 16 ортантов. Сначала найдите линии внутри и вокруг ортантов, ближайших к мыши. – markE

+0

Я отредактировал/завершил свой ответ в соответствии с новым вопросом. Обратите внимание, если это соответствует вашей проблеме. –