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

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

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

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

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

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

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

спасибо

8
draw javascript line

7 ответов

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

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

17

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

он использует SVG для первых 3 и 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");

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

3

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

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

2

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

1

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

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

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

1

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

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

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

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

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

1

при поддержке вы можете использовать canvas, в IE вы используете функцию поворота фильтров. А вот так:

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

0