Javascript рисует динамическую линию

Question

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

Точно так же, как инструмент «Линия» в Photoshop (например):

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

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

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

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

Спасибо

Answer 1

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

Я рекомендую Рафаэль Дж.С.

Answer 2

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

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

http://raphaeljs.com/

например

// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff"); 

Я использовал его, чтобы нарисовать линию при перетаскивании, и могу ручаться за простоту использования.

Answer 3

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

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

Answer 4

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

Answer 5

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

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

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

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

Answer 6

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

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

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

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

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

Answer 7

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

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