JavaScript Paint

[Ilyan]

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

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

[Kolyaj]

тоесть по-настощему true

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

[Ilyan]

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

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

[Kolyaj]

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

[Ilyan]

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

[Kolyaj]

можно присваивать innerHTML

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

[Ilyan]

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

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

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

[Ilyan]

Много чего не хватает (особенно контрл+зед)

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

[subzey]

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

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

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

[Ilyan]

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