Запись и хранение чертежей в высоком разрешении
Существуют ли какие-либо передовые решения для захвата рукописного рисунка (с планшета, сенсорного экрана или iPad-подобного устройства) на веб-сайте в JavaScript и хранения его на стороне сервера?
По сути, это будет простой холст для рисования мышью со специализацией, что его разрешение (то есть количество движений мыши, которое он ловит в секунду) должно быть очень высоким, иначе круглые линии на чертеже станут "многоугольными" при перемещении пера / мышь быстро:
(Если бы это было не так, решение inputDraw, предложенное @Gregory, было бы идеальным на 100%.)
Это также должно было бы иметь высокий уровень графического качества, т.е. Ничего особенного здесь, кроме стиля MS Paint, 1x1 Pixel Stroke это не сработает.
Я нахожу это очень интересной вещью в целом, поскольку планшетные ПК становятся все более распространенными. (Не то чтобы они привлекли внимание, я чувствую, что они заслуживают).
Любые предложения высоко ценятся. Я бы предпочел решение с открытым исходным кодом, но я также открыт для проприетарных решений, таких как элементы управления ActiveX или апплеты Java.
FF4, поддержка Chrome обязательна; Opera, поддержка IE8/9 желательна.
Обратите внимание, что большинство библиотек "canvas" и большинство ответов на другие вопросы, аналогичные моим, относятся к программному рисованию на холсте. Это не то, что я ищу. Я ищу что-то, что записывает фактические движения пера или мыши пользовательского рисунка в определенной области.
Начать щедрость из любопытства, изменилось ли что-нибудь за время, прошедшее после того, как был задан этот вопрос.
4 ответа
Я сомневаюсь, что вы получите что-то более высокое разрешение, чем дает событие "onmousemove", без написания эффективной программы на ассемблере для некоторой встроенной системы, созданной специально для этой цели. Вы работаете внутри ОС, вы играете по правилам ОС, а это значит, что вы ограничены частотой временных интервалов, которые ОС даст вам. (обычно около 100 в секунду, колеблющийся в зависимости от нагрузки) Я не использовал планшет, который может преодолеть проблему "многоугольника", и я использовал несколько высококлассных планшетов. Фотошоп преодолевает проблему с кубической интерполяцией.
То есть, если у вас нет особого планшета, который будет захватывать многие события движения и помещать их в очередь в некоторый внутренний буфер, а также отправлять целый пакет координат в момент отправки данных в ОС. Я смотрел на API планшета, и они дают только один набор координат за раз, поэтому, если это произойдет, вам понадобится специальное оборудование, собственный драйвер и пользовательский API, который может обрабатывать пакеты из нескольких координаты.
Или вы можете просто использовать проклятый тег canvas, событие onmousemove, event.pageX | pageY, некоторую кубическую интерполяцию, API-интерфейс холста toDataURI, опубликовать результат в своем php-сценарии, а затем просто сказать, что вы сделали все эти другие интересные вещи.,
В моих тестах onmousemove даст вам одно событие на пиксель движения, ограниченное только скоростью цикла событий в браузере. Вы получите редкие точки данных (полигоны) с быстрым перемещением, и это так же хорошо, как и без огромного исследовательского гранта и конструктора оборудования. По рукам.
Для этого в мире оекаки есть несколько апплетов: Shi Painter, Chibipaint или PaintBBS. Здесь у вас есть php классы для интеграции.
Рисунки, созданные этими апплетами, могут быть довольно хорошего качества. Если вы зарегистрируетесь на http://www.oekakicentral.com/, вы увидите все галереи, и на некоторых рисунках есть анимационная ссылка, которая показывает, как она была нарисована (зависит от апплета), так что вы можете сравнить возможности апплетов. Некоторые из них с открытым исходным кодом.
Изменить: см. Также это сделано в HTML 5.
Взгляните на
Это бесплатно для некоммерческого использования. Согласно их сайту, цена коммерческого использования составляет 29 €. Это не с открытым исходным кодом, хотя.
ИМХО это стоит посмотреть.
В качестве альтернативы вы реализуете что-то на основе svg-edit с открытым исходным кодом и использует jQuery ( демо). Если требуется поддержка Google Frame Plugin для IE6+, хотя.
РЕДАКТИРОВАТЬ: Я только что нашел проект http://code.google.com/p/svg-freehand-signature/ ( демо), который захватывает вашу рукописную подпись и отправляет ее на сервер в виде SVG с использованием POST. Он распространяется в виде простого и автономного почтового индекса (работает из коробки с Safari и Firefox, вы можете захотеть объединить его с svgweb, который обеспечивает поддержку SVG для Internet Explorer).
РЕДАКТИРОВАТЬ: Я успешно объединил canvaslol Сезара Оливейры (просто посмотрите на источник страницы, чтобы увидеть, как он работает) с ExplorerCanvas, чтобы что-то на IE. Вы также можете взглянуть на эксперимент Энн ван Кестерен с Paintr.
http://markup.io/ делает это с помощью алгоритма, примененного после наведения мыши.
Недавно я задал похожий вопрос и получил интересные, но не удовлетворительные ответы: есть ли способ ускорить событие перемещения мыши?