Comments 19
Мультитач (по крайней мере на iPad) — это ведь не баг? Случайно коснулся больше чем одним пальцем, весело :)
habrastorage.org/files/399/8ae/135/3998ae1354054d518b1cd7a165924056.jpg
habrastorage.org/files/399/8ae/135/3998ae1354054d518b1cd7a165924056.jpg
конечно баг, надо ловить id поинтера и рисовать две отельные линии
есть отличный курс от гугла на юдасити (Mobile Web Development), вот отрывок про этот баг как раз
www.youtube.com/watch?v=XFz9smzAgpY
есть отличный курс от гугла на юдасити (Mobile Web Development), вот отрывок про этот баг как раз
www.youtube.com/watch?v=XFz9smzAgpY
1. Если начать линию, выйти за границы canvas, отпустить мышь, потом снова внести мышь в canvas, то линия продолжается (хотя мышь не нажата), а при клике где-нибудь в canvas вся линия исчезает. Firefox 24.7.0.
2. Предлагаю значение по умолчанию для Line alpha снизить процентов на 50.
2. Предлагаю значение по умолчанию для Line alpha снизить процентов на 50.
1. Есть два варианта: при выходе за канвас и отпускании вне пределов мыши а) линию убирать и б) рисовать до границы пересечения и считать при этом, что мышь отпущена как только пересекает границу канваса. Какое поведение предпочтительнее?
2. ок, попробуем.
2. ок, попробуем.
1. Мне вариант 2) кажется лучшим. Если пользователь вёл линию (и она тем более отображалась на экране), то убирать её не надо. Если пользователь вышел мышкой за границу, а потом, не отпуская мыши, вошёл обратно, то линию нужно продолжить или начать новую. То есть, если пользователь ведёт нажатую мышь по canvas, линия так или иначе должна оставаться и не должна исчезать.
Интуитивно можно представить лист бумаги, лежащий на столе. Художник заехал кистью за границы листа и краска попала на стол, но потом он вернулся кистью на лист и рисование по листу продолжилось с этого места.
Кстати, если оставить как есть, то это некое подобие функции Undo, о которой просят ниже. Не понравилась текущая линия, выехал за canvas и линии нет. Так вот баги и переходят в фичи :)
Интуитивно можно представить лист бумаги, лежащий на столе. Художник заехал кистью за границы листа и краска попала на стол, но потом он вернулся кистью на лист и рисование по листу продолжилось с этого места.
Кстати, если оставить как есть, то это некое подобие функции Undo, о которой просят ниже. Не понравилась текущая линия, выехал за canvas и линии нет. Так вот баги и переходят в фичи :)
по поводу аналогии с листом бумаги — о, да, доча так и рисует — в итоге часть картины на столе, на полу и руках художника: ) спасибо за развернутый комментарий, это во всех браузерах так проявляется, попробую запилить, т.к. в текущем виде исчезновение линии немного раздражает.
По поводу Undo в текущей реализации — согласитесь, что это довольно неочевидное поведение, не так ли? В принципе, само undo не сложная вещь в реализации, более того используя pixi.js просто записывание всех линий в массив, из которого можно удалять в обратном порядке.
Другое дело, что это может и не надо: порисовал, закосячил, очистил, порисовал еще раз. Рисовалка. Если реализовывать что-то хотя бы уровня MSPaint'а, то да прямоугольники, овалы, линии, ластик, undo-redo и т.д.
По поводу Undo в текущей реализации — согласитесь, что это довольно неочевидное поведение, не так ли? В принципе, само undo не сложная вещь в реализации, более того используя pixi.js просто записывание всех линий в массив, из которого можно удалять в обратном порядке.
Другое дело, что это может и не надо: порисовал, закосячил, очистил, порисовал еще раз. Рисовалка. Если реализовывать что-то хотя бы уровня MSPaint'а, то да прямоугольники, овалы, линии, ластик, undo-redo и т.д.
Мне кажется, лучше и проще всего перенести обработчик mouseup (который «отпускает» линию) с canvas-а на body.
Это же вариант, о котором упомянули выше («выехал за границы, заехал обратно и рисуешь дальше»).
Это же вариант, о котором упомянули выше («выехал за границы, заехал обратно и рисуешь дальше»).
У меня на Nexus'е нечто аналогичное: двумя пальцами ведешь параллельно и делается заливка: )
habrastorage.org/files/4fe/6e1/4e1/4fe6e14e18524bbf9050b22f58cbfe82.JPG
habrastorage.org/files/4fe/6e1/4e1/4fe6e14e18524bbf9050b22f58cbfe82.JPG
Кстати, хорошая идея для мильтитач-инструмента: рисование линии с толщиной зависящей от расстояния между пальцами :) Особенно на больших экранах было бы круто
тогда уж от ширины пальца: рисуешь мизинцем — тонкая линия, большим — толстая.
будет время, то попробую пофиксить это поведение как пишет frst habrahabr.ru/post/234545/#comment_7911109
будет время, то попробую пофиксить это поведение как пишет frst habrahabr.ru/post/234545/#comment_7911109
Undo? :)
А надо ли? Так одно-другое-третье и бац Picozu Editor: ) www.picozu.com/editor/
Вот бы сохранение в SVG.
Не сочтите за камень в огород, но вот бы кто догадался, что само по себе рисование для бОльшей части людей не уперлось ни разу. Нужны объекты как в ворде или balsamiq, которые визуально приятно выглядят и имеют ограниченное, но достаточное количество степеней свободы. А просто кривые линии сплошным цветом хорошо работают как демо, не более
Вы абсолютно правы! В самом первом предложении я упомянул, что это выдернуто из большого проекта, где рисование — это выделение маркером значимых вещей, более того это выделение маркером одна маленькая фича из большого объема возможностей продукта.
Более того, код данного рисовалки оформлен в виде компоненты (можно установить через bower). Т.е. вы, к примеру, хотите реализовать сбор подписей на сайте или в html5-мобильном приложении, вставляете данный компонент на странице и при нажатии кнопки «Сохранить» получаете картинку подписи, далее сохраняете на сервере.
А так, демо — это и есть демо.
Более того, код данного рисовалки оформлен в виде компоненты (можно установить через bower). Т.е. вы, к примеру, хотите реализовать сбор подписей на сайте или в html5-мобильном приложении, вставляете данный компонент на странице и при нажатии кнопки «Сохранить» получаете картинку подписи, далее сохраняете на сервере.
А так, демо — это и есть демо.
Ага, проходили :) Внедрял такую штуку на своем проекте пару лет назад. Пользователей радует :) Яндекс.Картинки даже что-то индексирует.
Так же был получен фидбек: необходимы разные кисти, а не только круг. Быть может вам будет интересно сделать.
Так же был получен фидбек: необходимы разные кисти, а не только круг. Быть может вам будет интересно сделать.
Примеры реальных работ юзеров
И даже
Sign up to leave a comment.
Pixi-editor — простая рисовалка на pixi.js