Рисование в браузере.

[pistol]

Рисование в браузере.

Вот тут пример того, что это.

Суть:

* Рисуем в окне браузера по принципу "точечного рисунка".
* Преобразовываем рисунок посредством GD функций в картинку (png, jpg, gif).

Принцип работы:

* При движении или клике мышки в определенном поле документа, JS скрипт вставляет туда по 1 элементу в зависимости от инструмента и настроек.

* На сервер отправляется строка типа:

p;341;148;1;#000000;|p;341;150;1;#000000;|p;341;151;1;#000000;|p;340;153;1;#000000;|
p;339;154;1;#000000;|p;337;155;1;#000000;|p;336;156;1;#000000;|p;335;157;1;#000000;|
p;334;158;1;#000000;|p;333;158;1;#000000;|p;331;159;1;#000000;|p;329;160;1;#000000;|
p;327;161;1;#000000;|p;326;161;1;#000000;|p;325;161;1;#000000;|p;324;161;1;#000000;|
p;323;161;1;#000000;|p;322;161;1;#000000;|p;321;161;1;#000000;|p;321;163;1;#000000;|
p;320;164;1;#000000;|

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

В примере выше, скрипт просто выводит созданное иображение.

Вот исходник

 

[berkut]

прикольно. только прямоугольник и надпись вообще неюзабельны. рисовалка уж очень необычно работает - клик - рисем - клик - умрёшь нафиг. а то что дырявый след кисть оставляет если быстро двигать - это так задуманно?

-~{}~ 01.03.08 22:28:

при переключении с кисти на что-либо и обратно - кисть перестаёт воспринимать диаметр(рисует диаметром 1) - нужно его изменить - потом опять реагирует на диаметр

 

[pistol]

только прямоугольник и надпись вообще неюзабельны

Это "точечный рисунок", остальные инструменты - дополнение.

рисовалка уж очень необычно работает - клик - рисем - клик - умрёшь нафиг. а то что дырявый след кисть оставляет если быстро двигать - это так задуманно?

Всё упирается в возможности JS и браузера...

при переключении с кисти на что-либо и обратно - кисть перестаёт воспринимать диаметр(рисует диаметром 1) - нужно его изменить - потом опять реагирует на диаметр

Да, с сохранением параметров проблемы. Потом решу.

 

[berkut]

Всё упирается в возможности JS и браузера...

тогда вопрос: зачем это вообще нужно, если пользоваться этим ну совсем неудобно? может flash тут проконает

 

[pistol]

А зачем вообще нужен JS и HTML? Flash всегда рулит с точки зрения простого пользователя. Почему лидерство за HTML и JS?

Просто JS и HTML - это текст, который может формировать выводить PHP (или другой серверный язык). С помощью PHP можно формировать некоторые функции в JS в зависимости от других факторов: можно менять размеры поля исозражения, можно оперировать с инструментами. Всё это - простой текст. А FLASH сковывает эти действия до неприличия.

 

[Scud]

Ну не особо сковывает, HTTP запросы отправлять из флэша можно и XML с настройками получать соответственно тоже, события из флэша в браузер пулять можно и соответственно перехватывать на JavaScript тоже, но это так - лирика. А вот вы, крупноколиберный вы наш, Google Canvas компонентик смотрели ли, может быть им рисовать удобнее будет....

 

[pistol]

Scud
Здесь тоже в ту степь понесло людей

Может быть, тут мне скажете, по каким критериям можно сравнивать SVG или Canvas (векторная графика) и точечный рисунок с скрипте? Если я нарисую точку в XML формате SVG, а не как простой див, кому от этого станет легче?

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

 

[tashkentchi]

В тему: http://pilat.free.fr/dessin_loc/draw.svg

Раз есть редакторы векторной графики на JS, почему бы не появиться для растровой

Про дополнение SVG. - Скоро во всех браузерах будет встроенным. В ФФ 1.5, Опере 8 и в IE7 встроен.

 

[pistol]

В тему: http://pilat.free.fr/dessin_loc/draw.svg

Прикольно Кино играть переставало когда водил по полю. Посмотрел исходник - стало понятно почему.

 

[berkut]

про флэш сказал Scud.

Всё упирается в возможности JS и браузера...

но это всё фигня. состороны юзера главный вопрос - нахрена мне абсолютно неюзабильный инструмент, будь он на флэш, свг, яваскрипте или на чёмто ещё?
pistol
можешь привести пример где твоя реализация может вообще иметь какой-то смысл?

 

[pistol]

можешь привести пример где твоя реализация может вообще иметь какой-то смысл?

Изначально это было просто дополнение к висивиг-редактору.

Примеров куча, ведь довольно часто к сообщению где-либо (форум, гостевая) хочется прикрепить не только текст, но и набросать картинку (схемка, смаёлик, аватар).

А вообще, как это использовать - личное дело кажого

 

[berkut]

о и набросать картинку (схемка, смаёлик, аватар).

дык в том-то и дело, что набросать картинку - одно мучение. из-за системы клик-рисуем-клик и из-за того, что нужно вести курсор очень медленно - иначе дырки в линии. получается что практического применения такой реализации просто нет.
к гибкости флэш - есть ещё и Ming.

 

[pistol]

berkut
Пусть последнее слово останется за тобой, иначе просто холивар начнется (SVG vs Canvas vs JS vs AS).

Каждый для себя решит, зачем ему это нужно\ненужно )

 

[berkut]

ок. всё, молчу

 

[TutanXamoN]

-как назвать блондинку вышедшую из душа?
-чистая глупость

Интересно сделано.
Есть конечный результат.
Конечный результат ограничен лишь выбором средств реализации.
ИМХО: сам любил на начальных етапах делать всё своё, реализовывать то что я понимал так как я хочу. А потом вырос/обленился(нужное подчеркнуть) и либо юзаю готовые решения(в случае когда понимаю их досконально) либо пишу своё основываясь на имеющемся опыте создания подобных решений найденных в интернете.
ЗЫ: ето всё я написал лишь для того чтоб фраза "зачем изобретать велосипед на 5 колёсах?" не выглядела так грубо.

Холивар начинаться и не будет. Холивар имеет место быть когда сравниваемые екземпляры имеют свои преимущества и недостатки и предоставляют, при использовании каждого, отдельные возможности коих нет в другом.