JavaScript проводит динамическую линию
Я ищу код JavaScript для разрешения пользователю чертить линию (на изображении).
Так же, как инструмент строки в Photoshop (например):
Пользователь нажимает на изображение, перетаскивает мышь (в то время как строка между стартовой точкой и точкой мыши динамично натянута, мышь перетаскивает).
Мне также была бы нужна вызываемая функция, чтобы отправить странице координаты конца и запуск.
Я нашел этот очень хороший сценарий для выбора области: http://www.defusion.org.uk/code/javascript-image-cropper-ui-using-prototype-scriptaculous/
и я нашел многих сценарием для проведения линий (и другие формы в JS), но не мог найти то, что я ищу.
Спасибо
5 ответов
Поскольку стандартного метода рисования не существует, если вы хотите поддерживать старые браузеры и IE,
вам потребуется библиотека. Библиотека будет обрабатывать кроссплатформенные проблемы рисования с помощью SVG или Microsoft VML
. Я рекомендую Raphael JS
raphael.js - это облегченный инструмент рендеринга для javascript (под лицензией MIT), который работает в FF, Safari, Chrome и IE6 +.
Он использует SVG для первых трех и VML для IE, но API идентичен во всех браузерах и очень приятен.
например.
// 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");
Я использовал его, чтобы рисовать линию при перетаскивании, и могу поручиться за простоту использования
Рассмотрите возможность использования элемента canvas для отображения изображения. Затем нарисовать линию (или что-нибудь еще) на нем тривиально.
Если ваши математические данные достаточно хороши, можно (хотя и безумно) сделать это без тега canvas для большинства современных браузеров, используя один из (при необходимости) :
Создавая, например. div высотой 1px, например. верхняя граница для вашей «линии» и с помощью события перетаскивания мыши расположить и повернуть ее.
Так кроется безумие , но это было бы довольно забавное упражнение. (Вам следует использовать что-то вроде Raphael JS, который является кроссбраузерным и разумным - см. Выше)
Я работаю над чем-то похожим. Нарисовать линию на холсте довольно просто. Вы можете взять мой код здесь.
http://p-func.com/html5_test/test2.html
Просто следуйте за слушателем mousedown.
Хотя я обнаружил, что при загрузке изображений лучше использовать библиотеку raphael. Я увидел это, потому что Canvas, кажется, действует как плоское изображение. Поэтому, если я хочу добавить к нему цель, а затем разрешить пользователю манипулировать этим изображением, это не позволит мне (если только что-то мне не хватает).
Рафаэль позволяет вам рисовать и по-прежнему использовать эти рисунки и изображения в качестве объектов.