Comments 30
Функция draw() определяет позицию курсора и высчитывает лежит-ли он в пределах нашего квадрата.
Зачем? Это можно делать и в mousePressed()
Недавно по наводке с хабра реализовали одну замудреную карту-схему на Raphaël и потому узнали весьма сильное преимущество, про которое почему-то тут ни слова — рафаэль-код идентичен svg, во многих случаях его можно отдельно нарисовать, а затем запустить на сайте, не заморачиваясь с тем, чтобы рисовать прямо в коде.
Для конвертации можно либо вручную переставить массивы, либо воспользоваться одним из конвертеров (мы использовали вот этот)
Что значит «идентичен SVG»? «Рафаель» как раз и рисует при помощи SVG, в статье написано, это же очевидно, что там будет получаться SVG, нет?
«Рисует из svg» и «рисует с помощью svg» — немного разные вещи. Для нас эта разница означала, что вместо того, чтобы 1-2 дня потратить на перенос элементов карты в js-код (а уж в каком качестве это получилось бы — страшно представить) мы попросили нашего дизайнера это красиво раскидать и за 2 часа все сделали, еще порадоваться успели, что можно малой кровью навесить все требуемые действия.
Так вы имеет ввиду, что он готовый SVG умеет использовать? Тогда понятно.
ну да )
собственно, пример с зубчатым колесом и его специфичным поведением — следствие этой самой попытки рисовать в коде то, что можно нарисовать в каком-нибудь inkscape'е.
Только в идеальных условиях. На практике чем больше приложение тем хуже оно работает, если не построено на хорошем фреймворке.
С coffeescript canvas api выглядит и вовсе безобидным. Paper создаёт «память» состояний, и за счет этого у него идёт основной груз. Пробовал писать головоломку на processing.js — в принципе тормозов особых не было, плохо только то, что он как и кофе должен свой код компилировать, ну и у него пока проблемы с поддержкой синтаксиса в современных IDE, лично я обозначил *.pde в phpStorm как C/C++ синтаксис, но это не выход же — подсказок к коду по крайней мере нету, а так с ходу без подсказок сразу и не осилишь, приходится читать мануал processingjs.org/reference/
Отличная статья, спасибо, выяснил, что мне лучше всего paper.js :) Только одно замечание — не хватает ссылок на официальные сайты библиотек
А я KineticJS использую в одном месте, сначала в сторону рафаёля смотрел, но он оказался не совсем тем, что нужно.

Впрочем, в этих вопросах я новичок, просто было интересно попробовать.

А вот paper.js мне что-то на глаза не попадался.
«Вам нужна поддержка Android? Android не поддерживает SVG» — вот после этого утверждения как-то не верится, что статья содержит достоверные данные. Если нужны доказательства — beta.planner5d.com/view/?key=demo (рендер на SVG)
Такой же вопрос задали автору в обсуждении оригинальной статьи. Вот ответ, который как мне кажется является основанием для утверждения, что Android не дружит с SVG:

Android 3.x is for Tablets only. The 4.0 browser natively supports SVG (I have personally verified this while writing this post.), both in the bundled browser and in Android Chrome.

There is no plan for 2.x phones to get SVG support in the default browser. However, Firefox Mobile does support SVG (again, verified), so it is possible to serve SVG up to older android phones… if you can convince people to install firefox. (it is a great browser, on-par with Chrome, which isn’t available for 2.x)

Т.е. раз ветка 2.х из коробки его не поддерживает, то это можно трактовать как минус в данном случае.
В таком случае, наверное, будет правильным сделать поправку в статье (это я передаю привет автору, а не вам) и указать где именно не поддерживается, к тому же «Android 3.x is for Tablets only» тоже не верно, т.к. на Samsung Galaxy Tab (Android 3.x) все ок с SVG.
На этом всё, более не докучаю своими придирками, просто за живое задело :)
>>Существуют слухи, что Android 4 будет поддерживать SVG
Проверил на проапдейтившемся Nexus S — поддерживает.
От себя добавлю, что есть ещё наши библиотеки JCScript и LibCanvas. LibCanvas — создание TheShock, прокомментировавшего чуть выше. JCScript — создание ещё одного хабраюзера, asavin.

JCScript работает с canvas и добавляет очень простое взаимодействие с объектами. Как Raphaёl, только с canvas:
var circ = jc.circle(x, y, radius, fillcolor, true_if_fill);
circ.click(function(){
 circ.animate({ x:20 }, 1000);
});

LibCanvas уже не раз описывался на хабре, если примерно и коротко — то он предоставляет немного расширенный Canvas API, с некоторыми своими абстрактными классами, цепочками вызовов и возможностью назначения поведений фигуре (напр. Animatable).

Ещё неточность: PaperJS не работает с растровой и векторной графикой. Он работает с canvas, который поддерживает только растр. Внутри он рисует на canvas, перерисовывает рисунок с изменившимеся параметрами.
Насчет svg для андроида: есть js-библиотечка canvg, конвертит svg в canvas. Используется просто, работает довольно шустро. Демки тут.
Есть еще крутая Fabric.js. Тоже умеет рисовать SVG, очень простая и понятная. Если я правильно понял, она состоит из модулей, поэтому на продакшен можно утащить только самое необходимое. А еще я прусь от возможности удобно рисовать кривые в SVG-стиле, то есть вот так: fabric.Path('M 10, 10 L 60, 0 l 0, 50 l -50,0 z') (это вроде бы должен получиться квадрат).
Only those users with full accounts are able to leave comments. Log in, please.