2010-04-27

Рисовалка без канвы

Сегодняшняя запись (кстати, с недельным отставанием от графика) посвящена скорее не техническим аспектам, а человеческим взаимоотношениям.


Как обмануть человека, чтоб он остался доволен?


Предистория

Как-то так получилось, но я админю один форум, посвящённый программе для рисования графики Paint Tool SAI (кстати, офигенная штука, на самом деле). И захотелось мне под новый год сделать какой-нибудь эвент. А чём можно порадовать всякого рода художников? Конечно же, маленьким графическим редактором.

Процесс

Было решено сделать графический редактор на javascript, чтоб люди не заморачивались установкой и запуском. Флэш подошёл бы, конечно, лучше, но я на флэшэ не умею :-P

Доля IE на форуме где-то около 15%, так что игнорить его нельзя. Chome Frame использовать не хотелось, мой патентованный ®™ метод рисования кругов я ещё не придумал, а значит решение очевидно - использовать вектора в виде замечательной библиотеки raphaël.

Проблема стёрки

Код рисовалки был написан достаточно быстро, и осталось сделать стёрку. Однако, в векторах это не так просто. Если вы когда-нибудь рисовали во флэшэ, вы знаете о чём я; остальных прошу взглянуть на картинку ниже:

Скажем так... Несколько неожиданно получить скруглённые края после стёрки.
Так как в мои планы не входило написание полноценного векторного редактора с 2D полигонами и булевыми операциями над ними, я решил проблему проще.

Как-то давно, когда Riva TNT 2 была ещё неплохой видеокартой, попалась мне на глаза игра Lemmings на javascript. Так как в то время о канвасе только ходили слухи, то меня невероятно заинтересовало как это они (авторы игры) умудряются стирать части картинки на javascript.

Решение

Всё оказалось гениально просто - вместо того, чтобы стирать части картинки, они дорисовывали поверх неё чёрные дырки.
Этот же метод применил и я, только стёрка рисует белым цветом.

На закуску

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

Код не сжат, и весьма прост (скачайте его, если есть желание).

4 comments:

  1. Жесть... особенно когда смотришь исходный код получившейся картинки :))

    ReplyDelete
  2. в моей опере под линукс версии 10.10 оно при каждом клике рисует линии в 0,0
    http://sai.detstwo.com/jisdraw/view.php?img=2010042721444400

    ReplyDelete
  3. hshhhhh: угу, есть такая проблема в опере. будем считать что это не баг, а специальная фича :)
    исправить, наверное, просто, но нет времени и желания - как показала практика редактор без слоёв нужен разве что пользователям контакта. так что увы (или ура), но без канвы тут не обойтись.

    ReplyDelete
  4. интересно посмотреть на код со стороны php особенно кусок с сохранением картинки

    ReplyDelete