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

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

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

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

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

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

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

Спасибо


javascript draw line
person Ranch    schedule 24.03.2010    source источник

Ответы (7)


arrow_upward
17
arrow_downward

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

Я рекомендую Raphael JS

person The Who    schedule 24.03.2010
comment
+1 Еще одна библиотека, которую следует учитывать, — это библиотека Google Closure: code.google.com/closure/library (см. пакет goog.graphics). - person T.J. Crowder; 24.03.2010
comment
Что ж, я думаю, это будет Raphael JS. Я взглянул на его API, и он выглядит великолепно. Мне нужно было бы реализовать перетаскивание линии самостоятельно, но я мог бы справиться с этим... Спасибо. - person Ranch; 25.03.2010
comment
@Ranch, можешь опубликовать пример? - person karse23; 24.12.2012

arrow_upward
3
arrow_downward

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

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

http://raphaeljs.com/

e.g. 

// 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");

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

person plodder    schedule 25.03.2010

arrow_upward
2
arrow_downward

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

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

person Benubird    schedule 14.12.2010
comment
Я искал чистый код JS, и он прекрасно работает в IE9 и Firefox8 (проверено на обоих, другие браузеры тоже могут поддерживаться). Когда вы копируете их код, вам нужно отформатировать строку, а также изменить цвет строки с #FFFFFF на #FF0000 (потому что фон белый!). - person Mario Awad; 29.12.2011

arrow_upward
1
arrow_downward

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

person Eli Bendersky    schedule 24.03.2010
comment
Обратите внимание, что canvas является относительно современным, поэтому он есть только в последних браузерах, а в IE его нет даже сейчас: en.wikipedia.org/wiki/Canvas_element#Support - person T.J. Crowder; 24.03.2010

arrow_upward
1
arrow_downward

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

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

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

person adamnfish    schedule 24.03.2010

arrow_upward
1
arrow_downward

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

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

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

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

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

person pfunc    schedule 19.04.2010

arrow_upward
0
arrow_downward

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

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

person user1164035    schedule 15.02.2012