Javascript рисовать динамические линии

Question

Я ищу код Javascript, позволяющий пользователю нарисовать линию (на изображении).

Так же, как линейный инструмент в Photoshop (например):

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

Мне также потребуется вызываемая функция для отправки странице начальных и конечных координат.

Я нашел этот очень хороший скрипт для выбора области: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/

и я нашел много скриптов для рисования линий (и других фигур в JS), но не смог найти то, что искал.

Спасибо

Answer 1

Поскольку не существует стандартного метода рисования, если вы хотите поддерживать старые браузеры и IE, вам нужно будет использовать библиотеку. Библиотека будет обрабатывать кросс-платформенные проблемы рисования с SVG или Microsoft VML

Я рекомендую Рафаэль JS

Answer 2

raphael.js - это облегченный инструмент рендеринга для javascript (лицензия MIT), который работает в FF, Safari, Chrome и IE6 +.

Он использует SVG для первых 3 и VML для IE, но API одинаков для всех браузеров и очень приятный.

Я использовал его для рисования линий при перетаскивании и могу ручаться за простоту использования

Answer 3

Кросс-браузерное решение для рисования линий в javascript, без каких-либо внешних библиотек, можно найти здесь: http://bytes.com/topic/javascript/answers/88771-drawing-vector-lines-javascript

Это работает во всех браузерах, включая IE.

Answer 4

Я работаю над чем-то похожим.Рисовать линию на холсте довольно просто.Вы можете взять из моего кода здесь.

http://p -func.com / html5_test / test2.html

Просто следуйте за слушателем mousedown.

Хотя при загрузке изображений я обнаружил, что библиотеку Raphael лучше использовать.Я видел это, потому что Canvas выглядит как плоское изображение.Поэтому, если я хочу добавить к нему прицел, а затем разрешить пользователю манипулировать этим изображением, оно не позволит мне (если я что-то упускаю).

Рафаэль позволяет вам рисовать и по-прежнемуиспользовать эти рисунки и изображения, как объекты.

Answer 5

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

• -webkit-transform: повернуть
• -moz-transform: повернуть
• -о-преобразование поворота
• Матричный фильтр трезубца

Создавая например. высокий делитель 1px, например. верхнюю границу вашей «линии» и использование события перетаскивания мышью для ее позиционирования и поворота.

Безумие лежит таким образом но это было бы довольно забавное упражнение. (Вы должны использовать что-то вроде Raphael JS, которое является кроссбраузерным и вменяемым - см. Выше)

Answer 6

Попробуйте использовать элемент canvas для отображения изображения. Затем нарисовать на нем линию (или что-нибудь еще) тривиально.

Answer 7

Если поддерживается, вы можете использовать холст, в IE вы используете функцию вращения фильтров. Как здесь работает на обоих:

http://www.gatekeeperel.co.uk/interactives/web.html