«LibCanvas» — фреймворк для работы с Javascript Canvas, часть вторая


    Привет, Хабр! Я хочу рассказать тебе о новой библиотеке, которая помогает очень легко и изящно рисовать всякие штучки-дрючки на html5 canvas. Возможно, ты уже слышал о ней, но сейчас она пережила новое рождение. Что-ж, под катом я покажу тебе много интересненьких примеры, расскажу про нюансы работы и дам ссылку на грозу всех секретарш — почти работающий пасьянс «Косынка», созданную с помощью этой LibCanvas.



    Итак, это библиотека действительно пережила второе рождение. Или, может, повзрослела? Чтобы не томить, я сразу перейду к делу, то есть к примерам.

    Поведения


    Кроме того, о чем я рассказывал в первой части появилась очень существенная фича — поведения. Они позволяют придать какую-то определенную функциональность вашему объекту. Я приведу примеры некоторых из них. На самом деле их немного больше и один может быть завязан на другом

    LibCanvas.Interfaces.Draggable и LibCanvas.Interfaces.Droppable


    Эти интерфейсы многие знают по jQuery. Draggable позволяет двигать объекты. Droppable позволяет бросать один объект во второй. В примерах draggable просто двигаем объекты. В примерах droppable бросаем прямоугольник в круг и мимо круга:
    Пример draggable
    Пример droppable

    LibCanvas.Behaviors.Linkable


    Привязываем какой-то объект к текущему так, чтобы если мы движем текущим объектом — двигался и привязанный. В примере двигаем кругом — двигаются и квадраты, но не наоборот.
    Пример linkable

    LibCanvas.Behaviors.Moveable


    Перемещаем объект в какую-то точку плавно с заданной скоростью или мгновенно
    Пример moveable

    и разные другие интерфейсы, как clickable, drawable (основа основ), bindable (еще одна основа основ), etc. Со временем буду наращивать. Например, в ближайших планах — resizable [если придумаю, как ресайзить LibCanvas.Shapes.Polygon(или просто кидать Exception?)]

    Что-то более приближенное к жизни


    Desktop Environment


    Давайте на том функционале, что есть симитируем среду рабочего стола. Всего 34 строчки кода в App.Start.de() и eсть результат! Конечно, до KDE4 нашей среде еще расти и расти, но надо ведь с чего-то начинать? Как бы её назвать? CDE? Хотя занято, вроде. Ладно, потом придумаю.

    Пасьянс «Косынка»


    А вот и самое интересное. Очень даже играбельное приложение с вменяемым фпсом и кроссбраузерностью (я сказал кроссбраузерностью, про IE там ничего не было!)
    Пасьянс «Косынка» во всей красе на html5+javascript+libcanvas. Наслаждайтесь.

    Лицензия


    LibCanvas — lgpl, исходники в репозитарии на гуглокоде или в архиве
    Пасьянс «Косынка» — gpl v3 — в архиве

    F.A.Q


    1. Mootools — ацтой, испоганили весь libcanvas

    Я очень люблю jQuery. Прям души не чаю в нем. Он прекрасен. Изумителен. Но…
    Он совершенно не подходит для разработки на canvas. Что есть, что нету. jQuery == DOM
    Сначала я делал свой миниатюрный фреймворк для этой библиотеки, но потом осознал, что я изобретаю MooTools. Я успел полюбить этот фреймворк за время работы с ним (а узнал я его после jQuery), и я вам скажу, что он не менее прекрасен! Конечно, для работы с DOM jQuery подходит значительно лучше, но для таких целей, как рисование в канвас без него было бы очень сложно. Каждый класс, каждый метод в LibCanvas просто пропитан мутулзом и без него это все не получилось бы так красиво и изящно

    2. Расширение прототипов(особенно массивов) — зло!

    Такие слова зло, а расширение прототипов(особенно массивов) — это гениальная идея. Использование for (var i in []) вызовет проблемы в ie даже не с раширенными прототипами, зато с другой стороны это позволяет сделать код очень удобочитаемым и изящным. А для массивов используйте ([]).each();

    3. Ну и глючный ваш canvas!

    Я считаю, что канвас(как и html5) сейчас переживает период становления. Год-два и он станет настолько же естественным в вебе, как и flash. Google, Opera, Mozilla, Apple — все улучшают канвас с невероятными темпами. Да даже Microsoft пообещали в будущем детище IE9 ввести поддержку этой технологии. Посмотрите, что было полтора года назад(Firefox 3.0, Opera 9.5, Chrome только появился) и что сейчас (Firefox 4, Opera 10.6, Chrome 6) в плане скорости рендеринга. Разница колосальная. Практически с нуля до приемлимого уровня. И еще через полтора года мы увидим потрясающий результат.

    4. Ну и глючны вашы (LibCanvas|Примеры|Пасьянс)!

    Возможно. Они тоже на этапе становления, бета версия. Принимаю все баги и предложения в багосборник на гуглокоде. Вы можете сделать это лучше.

    5. SVG, RaphaelJS, etc


    Будьте оригинальны — не вспоминайте это тут. Если интересна моя позиция — читайте комменты к предыдущему топику и, главное, комментарии в первой ветке этого поста.
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 54

      –3
      Почему например стоит пользоваться этой библиотекой вместо SVG?
        +5
        таки зря удалил из фака пятый вопрос. в предыдущей теме этот же вопрос был задан и тоже в первом посте. а почему бы не воспользоваться бутербродами с маслом вместо этой библиотеки? почему бы вообще не отказаться от canvas, ведь есть svg?!
          +6
          SVG — векторная графика, Canvas — растровая.
          С уважением, ваш К.О.
            0
            Вы смотрели на API?
            Я обнаружил только функции реализованные в SVG.
            Ничего похожего на post-эффекты.
              0
              не все сразу. тем более, эта либа совершенно не отменяет всех возможностей канваса и растровой графики. она только позволяет сделать работу с канвасом легче и приятнее
                0
                Всё равно мне кажется что овчинка выделки не стоит.
                Через год-два SVG будет на вполне приемлемом уровне реализации в браузерах, чтобы делать то, что может Ваша библиотека _сейчас_.

                То о чем Вы говорите («не всё сразу»), стоило поставить в начало очереди на реализацию. Имею ввиду реализацию заведомо не SVG-шных возможностей. Например для подготовки изображений (спрайтов), пост эффекты и т.д.
                  0
                  Таки я не понял. Это недостаток моей библиотеки, что в СВГ что-то когда-то появится то, что есть в ней сейчас?

                  А почему я должен отталкиваться от SVG? То, что что-то можно реализовать на свг запрещает реализовать мне это на Канвасе? Надо реализовывать что-то другое и, если, не дай бог, это что-то другое вдруг появится в СВГ, то быстро убрать из своей библиотеки?

                  В СВГ по умолчанию есть Draggable, Droppable, etc? Или это реализуется с помощью фреймворков? Зачем нужны эти фреймворки, если все это можно реализовать с помощью канвас?

                  В чем преимущество свг перед канвасом? Ресайзится хорошо и без потери качества? При использовании хоть одного рисунка (или вы все карты в игре, как выше, тоже будете делать свг-шными? хотел бы я на этого посмотреть). Это преимущество сходит на «нет».

                  Производительнее? Возьмите картинку из игры в топике, порежте её на 52 части, каждую увеличьте и добавьте интерактивности. Будет ли больше fps? Сомневаюсь.

                  > для подготовки изображений (спрайтов)
                  у меня в либе есть cachedDrawImage, которая не отличается по интерфейсу от drawImage, она сначала выполняет все действия над картинкой (crop, resize), потом кеширует и уже из кеша рисует, за счет чего я уменьшил время рендеринга кадра в ~ 2 раза.

                  Почитайте раздел «Disadvantages», пункт «Canvas» в сравнении SVG vs Canvas на сайте Оперы. Я убрал значительную часть недостатков Канвас по сравнению с СВГ, оставив его достоинства, разве это плохо?

                  Главное
                  это все пустой треп. я не отказывался от развития этой библиотеки. предлагайте ваши идеи, расскажите, где они могут использоваться, как вы их видите в библиотеке, вполне возможно, в следующей версии все это будет.
          +1
          Подрагивает.
            0
            браузер? сколько фпс? какой пример?
              +1
              freecr.ru/libcanvas/?de — Chrome 6.0.453.1 — 49 FPS.
                +6
                тогда попробуй перестать жевать сухарики)
                  0
                  Не понял. Реально подрагивает, не плавно двигается. Вот виндовые окна плавно следуют за курсором, а это нет.
                    0
                    а теперь?
                0
                Хром 6, косынка, 3 фпс, 1.2ггц проц. Не понимаю, чему там так сильно тормозить.
                  0
                  3 fps? ТРИ? Аж не верится
                    0
                    Сейчас 60, но при перемещении карт сильно тормозит, частота резко падает.
              +2
              >> Использование for (var i in []) вызовет проблемы в ie даже не с раширенными прототипами

              Вообще говоря цикл for-in для массивов может вызвать проблемы в любом браузере и без расширения прототипов. Простой пример

              var a = 'ab'.match(/((a)(b))/); // метод match возвращает массив
              var props = '';
              for (var i in a) {
              props += i + ' ';
              }
              alert(props);
              // IE: input index lastIndex 0 1 2 3
              // Остальные браузеры: 0 1 2 3 index input
                +4
                Чёрт, я так и знал, что всё кончится пасьянсами. Именно секретарши инициировали добавление в html5 canvas.
                  +1
                  Осталось только портировать Zuma и Bejewelled — canvas будет обречен на успех :)
                  +2
                  Посмотрел что вы собираете проект в один файл. Для этого советую использовать проект packager от главного разработчика MooTools. Еще есть packager-web который позволяет собирать проект выделяя нужные компоненты (как ето делается тут, например). Удобные штуки :)

                  Развитию вашей библиотеки очень рад, изучу код на досуге.
                    0
                    сборщик хорош, да. надо выделить время и перейти на него
                    +4
                    А что ж этот пасьянс так CPU грузит? :( Зачем постоянно перерисовывать, когда ничего не происходит?
                      +1
                      Да, и так ведь лето =) А это зимняя версия косынки, с обогревом.
                        0
                        согласен. что-то придумаю
                          +1
                          пофиксил, теперь и fps побольше (40-60) и в соседней вкладке открытым оставить можно без сочувствия процу.
                          +8
                          Спасибо… доосвою СВГ, буду курить канву… с фреймворком будет легче)

                          (я сказал кроссбраузерностью, про IE там ничего не было!)
                          это шедевр))
                            +3
                            За пасьянс спасибо. Не как технический пример реализации LibCanvas, а так… поиграть :) Давно его уже не раскладывал. Сейчас попытаюсь…
                              +2
                              Не хватает кнопки отмены своего действия, т.е. сделать шаг назад.
                              И ещё отступ карты от карты слишком большой.
                                0
                                согласен, этой фишки очень не хватает.

                                а как тогда видеть, какие карты лежат? их масть?
                                  0
                                  Карты, которые ещё не открыты — зачем им такой отступ? Можно и в два раза меньше — все равно я с ними не играюсь, исключительно для того чтобы видеть сколько карт осталось в этой колоде.
                                  С открытыми картами все равно можно как-то поиграться.
                                  И, кстати, ещё вопрос — а зачем вы сделали колоды под углом? :) Мне кажется, вертикальное расположение будет намного лучше и освободит место, которые занимается сейчас абсолютно нерационально. Например, посмотрите как здесь:


                                  Интерфейс намного чище и приятнее.
                                    +1
                                    специально для Вас — кнопка переключения вида в левом верхнем углу) и да, сжал закрытые карты
                                      +1
                                      Это феерия красоты! :))
                                      Спасибо большое, так играть намного удобнее!
                                +4
                                Ну и для ленивых… Кнопку Hint, которая бы советовала какой-нибудь ход :)
                                Кстати, у меня 24-25 FPS (safari mac, 5.0). Не слишком приятно, но играть можно.
                            • НЛО прилетело и опубликовало эту надпись здесь
                                +1
                                А почему бы и нет? У веб-приложений (ну и у веб-игр, соответственно) есть очень серьезные преимущества, и они вполне очевидны, по-моему.
                                Я с Google Docs вообще забыл про «стандартные» Excel и Word — т.к. Word не дает возможности с таким же удобством редактировать документы одновременно множеству людей, которые могут находиться в разных частях света.
                                И Google Docs работает в любом современном браузере на любой современной платформе, в отличие от того же Word'а.
                                А еще он бесплатный :)
                                  +2
                                  вообще у Микрософт офиса с кроссбраузеностью плохо, конечно
                                +2
                                TheShock, неплохо было бы написать встроенную доку, как в Mootools и вылошить все это дело на Github, тогда к разработке легко смогли бы подключиться и другие.
                                    +2
                                    Всё, теперь секретарши будут настойчиво просить обновить IE6 :)
                                      +1
                                      между прочим, меня порадовал хром и огорчили другие браузеры в плане масштабирования картинок:
                                        0
                                        Пасьянс не раскладывается!
                                        –2
                                        Думал, наконец-то кто-то написал хорошую обертку для canvas. Посмотрел — детский сад какой-то. Покажите мне кривые, быструю анимацию. Почему я должен использовать вашу библиотеку, а не Raphaël?
                                          0
                                          Думал, что был добавлен хороший комментарий. Посмотрел — детский сад какой-то. Ни тебе конструктивной критики, ни предложений, а повторение одного и того же.

                                          Быстрая анимация? Вы хотите, чтобы я на чистом жс как-то ускорил отрисовку Канвас в браузере? Все упирается в сам процесс отрисовки, а не какие-то детали реализации нап ДжаваСкрипте. разве что рисовать в буфер, а потом из него выводить частями. это в планах.

                                          плюс, почитайте мой коммент в первой ветке

                                          PS. Но за Raphaël — респект. Достойная работа. Хотя вы это и сами знаете.
                                            0
                                            Вы хотите, чтобы я на чистом жс как-то ускорил отрисовку Канвас в браузере?
                                            Да, я простой пользователь и я хочу чтобы библиотека за меня думала, у неё голова больше. И я хочу нарисовать кривую, полумесяц, там или лого apple и повесить на него onclick. Могу я это сделать в canvas? Могу. А с вашей библиотекой?

                                            Советую посмотреть на это: www.davidflanagan.com/2010/07/cantojs-an-impr.html
                                              0
                                              посмотрел? и что? моя библиотека совершенно не отменяет встроенные в канвас ф-ции, а-ля lineTo и stroke.
                                              я не вижу, чем мне может быть интересна cantojs. Даже не догадываюсь.
                                              мне кажется, вы просто ищете к чему придраться.

                                              Вы хотите, чтобы я на чистом жс как-то ускорил отрисовку Канвас в браузере?
                                              Да,

                                              Это заявление веет неадекватностью. Скорость отрисовки никак не зависит от библиотеки. Если необходимо сделать drawImage, то делается drawImage, на чистом жс эту ф-цию не написать быстрее, чем она реализована в браузере. не говорите глупостей.
                                                0
                                                +1
                                                Покажите мне кривые, быструю анимацию

                                                Тут уже все упирается только в возможности браузеров. Будет аппаратное ускорение (которое пока только в Internet Explorer 9 и Safari 5 — но, думаю, оно будет везде, рано или поздно) — автоматически с ним появится и быстрая анимация. С аппаратным же ускорением будет смысл делать и пост-эффекты, кривые, фильтры, и прочее.
                                                0
                                                Примеры сдохли
                                                  0
                                                  Да, есть такая фигня. Вот новая ссылка:
                                                  libcanvas.github.com/

                                                  Скоро восстановлю и старые примеры)

                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                Самое читаемое