Рисование каретки между точкой и перетаскиваемым элементом - PullRequest
0 голосов
/ 17 декабря 2008

У меня есть перетаскиваемый div, представляющий небольшое всплывающее окно с информацией, которое пользователь может перетаскивать по экрану. Но этот div привязан к точке на экране, и я хотел бы, чтобы между div и точкой, к которой он привязан, была нарисована каретка.

Пример этого можно найти на картах Google, когда вы наводите курсор на магазин или интересующую вас достопримечательность. Вы увидите каретку между точкой и всплывающим окном. Это достаточно просто, но их всплывающее окно не перетаскивается, в то время как мое.

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

Спасибо!

Ответы [ 2 ]

1 голос
/ 17 декабря 2008

То есть вы пытаетесь нарисовать динамическое изображение между двумя точками на экране? Я не уверен, насколько это практично в HTML. Дом не поддерживает повороты изображения и изменение размера изображения ограничено по качеству. Вы можете создать изображение размером с сервер, но это будет медленно и приведет к высокой нагрузке на сервер.

Некоторые новые браузеры (не IE) поддерживают объект Canvas, который может позволить вам сделать это, если вы хотите исключить 80% пользователей.

В конце концов, я не уверен, что есть лучшее решение, чем то, что вы уже думаете, - и я не уверен, насколько хорошо это будет работать.

0 голосов
/ 06 мая 2009

Этот урок по Рисование линий в JavaScript может оказаться полезным для вас, так как он показывает, как создавать относительно эффективные динамические рисования линий с использованием JavaScript (см. Примеры внизу страницы).

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

...