JavaScript Paint
 

Доделал JavaScript Paint для несложного редактирования изображений. Много чего не хватает (особенно контрл+зед), но все жизненоважное присутствует :) Поиграться можно тут.

Круг, эллипс, квадрат, прямоугольник, кисть, надпись (в т.ч. ссылки), "картинка в картинке", пока все. За ядро взята вот эта библиотека. Вначале думал, что библиотка канвасовская, но потом узрел, что рисует она чистым DOM, тоесть по-настощему true :)

Что трушного в куче дивов?

Трувеб. Paint - точечный рисунок. Каждая точка в данном случае - элемент страницы, а не вектор. Туда можно поместить любой элемент html (ссылка, картинка, даже другой скрипт или событие при наведении на точку).

Тру -- это SVG, а дивы -- костыль.

Не вникал в SVG, спорить не буду. Элементам svg можно присваивать innerHTML, присваивать события типа element.onclick = function() {}?

Какому из дивов, образующих эллипс, вы будете присваивать innerHTML?

Эллипс - дети (набор дивов) родительского дива. Для каждой фигуры создается отдельный див, в т.ч. для линии кисти, уже в этом диве рисуется то, что надо.

---
innerHTML я привел для примера, основная сила дома - в событиях. По клику на эллипсе можно перекрашивать этот эллипс например или менять координаты положения.

Добавил "отмену".

Насчет innerHTML не уверен, но .setAttribute() и .appendChild() вполне себе работают.

События вешать — да, можно. И css. И бесскриптовую анимацию.

subzey, спасибо, тогда и это намного интереснее, чем я думал, пойду изучать :) Значит, единственный недостаток свг - кроссбраузерность?

Есть vml для IE. Или не мучаясь http://raphaeljs.com/

Спасибо, обязательно поэксперементирую. Если понравится - перепишу :)

http://mugtug.com/sketchpad/
;)

Круто :) Только чувак не стал решать проблему зернистости, просто сделал огромный размер кисти :)

Там все настраивается

innerHTML в SVG не работает, и еще keyCode не работает вроде как )
Ilyan, просто svg по разному вставляется в html... а писать прямо в документе можно вроде только в firefox, и то если у документа стоит расширение xhtml.
На мой взгляд лучше использовать сочетание canvas и vml.

Canvas (англ. «холст») — изображение, содержимое каждого пикселя которого контролируется яваскриптом.

Растровый графический редактор — приложение, которое контролирет каждый пиксель рабочей области.

По-моему, целесообразность использования canvas для растрового графредактора очевидна. :)

Ковырял, ковырял это svg, наковырял до того, что получилось трансформировать и перемещать фигуры по клику, получилось создать новую фигуру по тому же клику по другой фигуре. А вот onmousedown и onmousemove ну никак не хочет работать у меня, получить координаты курсора тоже не удается. И браузеры не выдают ошибок text/ecmascript. Как-то неинтересно становится без результатов :)

Переделал на SVG.
IE пока в топку :)