Запись и хранение чертежей в высоком разрешении

Question

Существуют ли какие-либо передовые решения для захвата рукописного рисунка (с планшета, сенсорного экрана или iPad-подобного устройства) на веб-сайте в JavaScript и хранения его на стороне сервера?

По сути, это будет простой холст для рисования мышью со специализацией, что его разрешение (т.е. количество движений мыши, которое он ловит в секунду) должно быть очень высоким, в противном случае круглые линии на чертеже будут стать «полигональным» при быстром перемещении ручки / мыши:

(если бы это было не так, решение inputDraw, предложенное @Gregory, было бы идеально на 100%.)

Он также должен иметь высокий уровень графического качества, то есть antialias the penstroke . Ничего особенного здесь, кроме стиля MS Paint, обводка 1x1 Pixel не подойдет.

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

Любые предложения высоко ценятся. Я бы предпочел решение с открытым исходным кодом, но я также открыт для проприетарных решений, таких как элементы управления ActiveX или апплеты Java.

FF4, поддержка Chrome обязательна; Opera, поддержка IE8 / 9 желательна.

Обратите внимание, что большинство библиотек "canvas" и большинство ответов на другие вопросы, аналогичные моим, относятся к программно рисованию на холсте. Это не , что я ищу. Я ищу что-то, что фиксирует фактические движения пера или мыши пользовательского рисунка в определенной области.

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

Answer 1

Я сомневаюсь, что вы получите что-то более высокое разрешение, чем дает событие «onmousemove», без написания эффективной программы на ассемблере для некоторой встроенной системы, созданной специально для этой цели. Вы работаете внутри ОС, вы играете по правилам ОС, а это значит, что вы ограничены частотой временных интервалов, которые ОС даст вам. (обычно около 100 в секунду, колеблющийся в зависимости от нагрузки) Я не использовал планшет, который может преодолеть проблему «многоугольника», и я использовал несколько высококлассных планшетов. Фотошоп преодолевает проблему с кубической интерполяцией.

То есть, если у вас нет особого планшета, который будет захватывать многие события движения и помещать их в очередь в некоторый внутренний буфер, а также отправлять целый пакет координат в момент отправки данных в ОС. Я смотрел на API планшета, и они дают только один набор координат за раз, поэтому, если это произойдет, вам понадобится специальное оборудование, собственный драйвер и пользовательский API, который может обрабатывать пакеты из нескольких координаты.

Или вы можете просто использовать проклятый тег canvas , событие onmousemove , event.pageX | pageY некоторые кубическая интерполяция , "toDataURI" api canvas, опубликуйте результат в своем php-скрипте, а затем просто скажите, что вы сделали все эти другие интересные вещи.

onmousemove, в моих тестах, даст вам одно событие на пиксель движения, ограниченное только скоростью цикла событий в браузере. Вы получите редкие точки данных (полигоны) с быстрым перемещением, и это так же хорошо, как и без огромного исследовательского гранта и конструктора оборудования. Deal.

Answer 2

для этого в мире оекаки есть несколько апплетов: Художник Ши , Чибипейнт или PaintBBS . Здесь у вас есть классы php для интеграции.

Рисунки, созданные этими апплетами, могут быть довольно хорошего качества. Если вы зарегистрируетесь на oekakicentral.com , вы увидите все галереи, а некоторые рисунки имеют анимационную ссылку, которая показывает, как она была нарисована (это зависит от апплета), поэтому вы можете сравнить возможности апплетов. Некоторые из них с открытым исходным кодом.

Редактировать: см. Также это сделано в HTML 5.

Answer 3

Взгляните на : флэш-компонент, который превращает рисование от руки в SVG. Затем вы можете отправить сгенерированный SVG на ваш сервер.

Это бесплатно для некоммерческого использования. Согласно их сайту, цена коммерческого использования составляет 29 € . Это не с открытым исходным кодом.

ИМХО, стоит посмотреть.

В качестве альтернативы вы реализуете что-то на основе svg-edit с открытым исходным кодом и использующим jQuery ( demo ). Если требуется поддержка Google Frame Plugin для поддержки IE6 +.

РЕДАКТИРОВАТЬ: Я только что нашел проект svg-freehand-signature ( demo ), который захватывает вашу рукописную подпись и отправляет ее на сервер в виде SVG с использованием POST. Он распространяется в виде простого и автономного zip (работает из коробки с Safari и Firefox, вы можете захотеть объединить его с svgweb , который обеспечивает поддержку SVG в Internet Explorer ).

РЕДАКТИРОВАТЬ: Я успешно объединил canvaslol Сезара Оливейры (просто посмотрите на источник страницы, чтобы увидеть, как он работает) с ExplorerCanvas , чтобы что-то использовать в IE. Вы также можете взглянуть на эксперимент Энн ван Кестерен .

Answer 4

markup.io делает это с помощью алгоритма, примененного после наведения мыши.

Я недавно задал похожий вопрос и получил интересные, но неутешительные ответы: Есть ли способ ускорить событие перемещения мыши?