Как стать автором
Обновить

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

Очень интересный проект, интересуют следующие вопросы:

1) В чем принципиальное отличие от SVG? SVG по сути все то же самое, но без канвы.

2) В комментариях к коду написано, что на десктопах вы всегда принимаете devicePixelRatio за единицу из-за того, что на него влияет зум страницы и появляются артефакты. О каких артефактах идет речь? Мне видится два варианта — либо проблема в том, что значение devicePixelRatio может отличаться для двух канв, если пользователь поменял зум между их созданиями. Тогда нужно закешировать значение при создании страницы. Либо артефакты от того, что значение devicePixelRatio при зуме получается дробным. Но тогда я не вижу причин таким же артефактам не появляться на мобильных устройствах. Может просто округлять devicePixelRatio до целого в меньшую сторону? Также мне кажется полезным задать максимальный devicePixelRatio, не отменяющий автодетект. На моем телефоне например это значение равно четырем. Рисовать на канве в таком разрешении я считаю безумием.

3) У вас есть поиск элементов «по имени» с точкой, как это сделано в CSS с классами. Но беда в том, что в HTML атрибут называется class, а не name, а name является эквивалентом id (содержит одно значение, не разделенное пробелами). Почему вы не назвали атрибут class?
1. Принципиальное отличие в том, что это canvas. Что лучше canvas или svg это отдельная тема и зависит от сферы применения. Можно поискать «canvas vs svg».

2. К сожалению не могу прокомментировать применение devicePixelRatio для десктоп устройств. Данная часть кода написанна не мной, а самостоятельно протестировать я не могу за не имением подходящего десктоп устройства. Я тестировал только на мобильном устройстве с retina. Спасибо за предложение по поводу ограничения максимального значения ratio. У вас на устройстве devicePixelRatio = 4, а чему равно «backingStoreRatio»? Так как увеличивается разрешение в (devicePixelRatio/backingStoreRatio) раз. Применение высокое разрешение опять же зависит от конкретного приложения.

3. Так получилось исторически. Сначала у объекта мог быть уникальный id и не уникальное имя (name). Потом пришел pull request по поводу того, что имен у одного объекта могло бы быть несколько (т.е. name это одна строка где имена разделены пробелом). Потом я добавил методы «addName», «removeName», «hasName». В результате получился некоторый аналог classList DOM узла. В комментарии написал «аналогия с css классами», так как интерфейс действительно получился очень похожий, но name не имеет никакого отношения к стилям в отличии от css class.
Принципиальное отличие в том, что это canvas.
Но вы делаете из канвы полный аналог SVG, убирая это различие. В чем смысл?

а чему равно backingStoreRatio?
undefined. Насколько мне известно, этот параметр был выдуман Эпл в Сафари 7 и в 8 оно уже всегда 1 (по крайней мере в десктопе).

Так как увеличивается разрешение в (devicePixelRatio/backingStoreRatio) раз.
Ваше логическое разрешение, в котором вы считаете координаты, увеличивается в devicePixelRatio / backingStoreRatio, а физическое разрешение, память выделенная под канву и сложность отрисовки увеличивается в devicePixelRatio * backingStoreRatio.

но name не имеет никакого отношения к стилям в отличии от css class.
Аттрибут class тоже не имеет отношение к стилям, это распространенное заблуждение. Атрибут сlass это просто class данного элемента, а никакой не «css class». Просто в css есть средства удобной выборки классов и идентификаторов, но есть и другие способы выбрать элементы. Мне кажется вам нужно переименовать name в class, слишком уже очевидно сходство.
НЛО прилетело и опубликовало эту надпись здесь
самое страшное, что здесь может произойти — это потеря чёткости изображения при увеличении зума
Но фиксированный dPR равный 1 только значительно усугубляет эту проблему, а не решает ее. На мобильных точно так же можно зазумиться после загрузки страницы. Я не вижу каких-то причин фиксировать это значение только на десктопе. lavrton, давайте отменим это ограничение для десктопа?

число 1.2999999523162841 (живой пример) ничем не хуже целого числа 2 — это же просто математика.
На самом деле это не вся правда. Если вы нарисуете картинку в дробных координатах, она будет смазанной. А между двумя соседними картинками появится дыра. Смотреть пример.
Если же округлять координаты перед нанесением, может появиться дыра уже в следствии округления.
НЛО прилетело и опубликовало эту надпись здесь
dPR отличный от 1 уже предполагает подобное поведение by design
Только дробный же. С целым dPR такого не происходит.

А на мелкой сетке разрыв в 1 пиксель это уже какая-то теоретически-перфекционистская проблема
Вообще, полоску контрастных пикселей отлично видно на любой сетке. Но я сейчас проверил на телефоне, мой пример рисуется с округленными координатами и в Хроме и в Фаерфоксе. Сюрприз.
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
НЛО прилетело и опубликовало эту надпись здесь
Canvas, как правило, быстрее SVG, и ресурсов кушает меньше, но это от фреймворка всё зависит, а также от прямоты рук использующего.
Нет. И не планируется. Есть достаточно много отдельных физических движков на js.
Может кто-нибудь сделает наконец порт “soldat 2d” в веб?
А я всё жду порт NFK (Quake3 in 2D) под веб :) хотя Soldat тоже был не плох в своё время.
эта игра была божественна! Но у меня вызывает сомнения реально ли сделать что-то такое быстрое на WebSocket?
Возможно ли при помощи этого фреймворка реализовать аналог preserveAspectRatio из SVG? Т.е. могу ли я сделать фуллскрин-приложение с сохранением пропорций?
Как раз хотел какие преимущества в сравнении с KineticJS, и в конце увидел, что это его форк и дальнейшее развитие.
Да, к сожалению поддержка и развитие KineticJS его автором прекращено, так что стоит наверное в начале статьи сразу сообщить что это просто его форк, и дальше уже знакомым с кинетик, можно не читать.
Интересно — как у него с производительностью под мобильные устройствами? Сейчас есть задача — написать простенький по графике матч3 на html5, адекватно работающий под мобилками — никак не пожем найти специалиста, способного показать нормальную работу теста на чем то ниже айфона 5s.
НЛО прилетело и опубликовало эту надпись здесь
Да, особенно плавность движения фишек, особенно выпадании при совмещении 3+.
Есть ли вообще возможность сделать это плавнее на canvas на мобилках?
НЛО прилетело и опубликовало эту надпись здесь
Есть очень много советов, как делать надо, и как — не надо.
Например, вы, возможно, рисуете по дробным координатам, или используете setInterval вместо requestAnimationFrame.
А ещё можно очищать не весь холст, а только часть, которая изменяется, а ещё — сохранять уже нарисованное в одну картинку, чтобы не рисовать заново.
Это если вкратце.

Лично я тестил Graphics2d.js на слабом Alcatel 993D (Android 4 с хвостиком на борту), вот эта демка: keyten.github.io/Graphics2D/examples/solarsystem/ шла вполне плавно и спокойно, правда, на нажатия реагировал не очень охотно (возможно, из-за отсутствия touch-событий в демке).
И, судя по всему, примерно там же и находится в настоящее время?
Кстати, о LibCanvas!
Нет ли где-нибудь склада со ссылками на разные примеры, документацию, tips and tricks? А то читая исходники сложно сходу понять как сделать удобнее/проще/производительнее, а пара статей на хабре покрывают далеко не все аспекты.
Посмотрел API, не нашел низкоуровневой математики(Point, Vector) Невнимательно смотрел? На чем к примеру реализовать collision detection?
Таких объектов в Konva.js нет. Коллизии можно считать самостоятельно или использовать другой фреймворк.
Полностью не работает в хроме, просто вижу серый канвас, и ничего не отображается, даже на официальном сайте.
У кого-нибудь есть та же проблема?
Хром Версия 42.0.2292.0 m (64-bit) полёт нормальный
Заменил KineticJS на Konva, и тут же выплыл баг, которого не было в KineticJS — невозможно перетаскивать объекты правой кнопкой мыши, при отпускании выскакивает браузерное меню.
Это не баг. Это было сделано специально. Сделал ограничение что только левой кнопкой мыши можно перетаскивать объекты. Думаю о том, чтобы сделать это поведение настраиваемым.
Дело в том, что у меня свой CAD-редактор. Как почти во всех таких редакторах, левой кнопкой перетаскивается объект, а правой — перемещение по рабочему полю. Теперь это поломалось, пришлось делать костыль — перемещение левой кнопкой с зажатым SHIFT.
Не думайте. Это нужно =)
Зарегистрируйтесь на Хабре , чтобы оставить комментарий

Публикации

Истории