Pixi-editor — простая рисовалка на pixi.js

    Занимаясь одним большим проектом, добавил небольшую функциональность — выделение «маркером». Затем выделил эту часть в Pixi-editor. И теперь Pixi-editor — это рисовалка на основе pixi.js, и как следствие использует для рисования в браузере. Довел до примерного функционала рисовалки граффити Вконтакте.

    Кому любопытно: демо, гитхаб.
    Далее скриншот и пара комментариев.


    image

    А еще рисовалкой заинтересовалась доча, которой недавно исполнилось 4 года. И так ей захотелось рисовать в рисовалке на компьютере, что стала пользоваться мышкой для управления карандашом. Так глядишь и освоит ПК. Хотя раньше все компьютерные программы и рядом не стояли рядом с планшетными приложениями, где все управление на "тыч"-интерфейсе. В котором ребенок и музыку, и мультики, и игрушки включить может на раз-два с двух лет. Кстати, рисовалка работает и на планшетном Chrome.

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

    Надеюсь, кому-нибудь пригодится. Идеи, баги, предложения?
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 19

      +2
      Мультитач (по крайней мере на iPad) — это ведь не баг? Случайно коснулся больше чем одним пальцем, весело :)
      habrastorage.org/files/399/8ae/135/3998ae1354054d518b1cd7a165924056.jpg
        +1
        конечно баг, надо ловить id поинтера и рисовать две отельные линии
        есть отличный курс от гугла на юдасити (Mobile Web Development), вот отрывок про этот баг как раз
        www.youtube.com/watch?v=XFz9smzAgpY
          0
          из видео код перепечатывать?: )

          а если серьезно, то спасибо за конкретный пример, где корректно работает, попробую внедрить в pixi-editor
        +2
        1. Если начать линию, выйти за границы canvas, отпустить мышь, потом снова внести мышь в canvas, то линия продолжается (хотя мышь не нажата), а при клике где-нибудь в canvas вся линия исчезает. Firefox 24.7.0.

        2. Предлагаю значение по умолчанию для Line alpha снизить процентов на 50.
          0
          1. Есть два варианта: при выходе за канвас и отпускании вне пределов мыши а) линию убирать и б) рисовать до границы пересечения и считать при этом, что мышь отпущена как только пересекает границу канваса. Какое поведение предпочтительнее?

          2. ок, попробуем.
            +1
            1. Мне вариант 2) кажется лучшим. Если пользователь вёл линию (и она тем более отображалась на экране), то убирать её не надо. Если пользователь вышел мышкой за границу, а потом, не отпуская мыши, вошёл обратно, то линию нужно продолжить или начать новую. То есть, если пользователь ведёт нажатую мышь по canvas, линия так или иначе должна оставаться и не должна исчезать.

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

            Кстати, если оставить как есть, то это некое подобие функции Undo, о которой просят ниже. Не понравилась текущая линия, выехал за canvas и линии нет. Так вот баги и переходят в фичи :)
              0
              по поводу аналогии с листом бумаги — о, да, доча так и рисует — в итоге часть картины на столе, на полу и руках художника: ) спасибо за развернутый комментарий, это во всех браузерах так проявляется, попробую запилить, т.к. в текущем виде исчезновение линии немного раздражает.

              По поводу Undo в текущей реализации — согласитесь, что это довольно неочевидное поведение, не так ли? В принципе, само undo не сложная вещь в реализации, более того используя pixi.js просто записывание всех линий в массив, из которого можно удалять в обратном порядке.

              Другое дело, что это может и не надо: порисовал, закосячил, очистил, порисовал еще раз. Рисовалка. Если реализовывать что-то хотя бы уровня MSPaint'а, то да прямоугольники, овалы, линии, ластик, undo-redo и т.д.

              0
              Мне кажется, лучше и проще всего перенести обработчик mouseup (который «отпускает» линию) с canvas-а на body.

              Это же вариант, о котором упомянули выше («выехал за границы, заехал обратно и рисуешь дальше»).
            0
            У меня на Nexus'е нечто аналогичное: двумя пальцами ведешь параллельно и делается заливка: )
            habrastorage.org/files/4fe/6e1/4e1/4fe6e14e18524bbf9050b22f58cbfe82.JPG
              +1
              Кстати, хорошая идея для мильтитач-инструмента: рисование линии с толщиной зависящей от расстояния между пальцами :) Особенно на больших экранах было бы круто
                0
                тогда уж от ширины пальца: рисуешь мизинцем — тонкая линия, большим — толстая.
                будет время, то попробую пофиксить это поведение как пишет frst habrahabr.ru/post/234545/#comment_7911109
              +1
              Undo? :)
                +1
                А надо ли? Так одно-другое-третье и бац Picozu Editor: ) www.picozu.com/editor/
                  +1
                  Мне не надо. Просто обратил внимание что Ctrl+Z не сработал.
                +2
                Вот бы сохранение в SVG.
                  0
                  Не сочтите за камень в огород, но вот бы кто догадался, что само по себе рисование для бОльшей части людей не уперлось ни разу. Нужны объекты как в ворде или balsamiq, которые визуально приятно выглядят и имеют ограниченное, но достаточное количество степеней свободы. А просто кривые линии сплошным цветом хорошо работают как демо, не более
                    +1
                    Вы абсолютно правы! В самом первом предложении я упомянул, что это выдернуто из большого проекта, где рисование — это выделение маркером значимых вещей, более того это выделение маркером одна маленькая фича из большого объема возможностей продукта.

                    Более того, код данного рисовалки оформлен в виде компоненты (можно установить через bower). Т.е. вы, к примеру, хотите реализовать сбор подписей на сайте или в html5-мобильном приложении, вставляете данный компонент на странице и при нажатии кнопки «Сохранить» получаете картинку подписи, далее сохраняете на сервере.

                    А так, демо — это и есть демо.
                    +1
                    Ага, проходили :) Внедрял такую штуку на своем проекте пару лет назад. Пользователей радует :) Яндекс.Картинки даже что-то индексирует.

                    Так же был получен фидбек: необходимы разные кисти, а не только круг. Быть может вам будет интересно сделать.

                    Примеры реальных работ юзеров


                    И даже
                      0
                      круто рисуют!

                    Only users with full accounts can post comments. Log in, please.