Web-Drawing библиотеки: Paper.js Vs. Processing.js Vs. Raphael.js

[tyderh]

Функция draw() определяет позицию курсора и высчитывает лежит-ли он в пределах нашего квадрата.

Зачем? Это можно делать и в mousePressed()

[safright]

Недавно по наводке с хабра реализовали одну замудреную карту-схему на Raphaël и потому узнали весьма сильное преимущество, про которое почему-то тут ни слова — рафаэль-код идентичен svg, во многих случаях его можно отдельно нарисовать, а затем запустить на сайте, не заморачиваясь с тем, чтобы рисовать прямо в коде.
Для конвертации можно либо вручную переставить массивы, либо воспользоваться одним из конвертеров (мы использовали вот этот)

[bolk]

Что значит «идентичен SVG»? «Рафаель» как раз и рисует при помощи SVG, в статье написано, это же очевидно, что там будет получаться SVG, нет?

[safright]

«Рисует из svg» и «рисует с помощью svg» — немного разные вещи. Для нас эта разница означала, что вместо того, чтобы 1-2 дня потратить на перенос элементов карты в js-код (а уж в каком качестве это получилось бы — страшно представить) мы попросили нашего дизайнера это красиво раскидать и за 2 часа все сделали, еще порадоваться успели, что можно малой кровью навесить все требуемые действия.

[bolk]

Так вы имеет ввиду, что он готовый SVG умеет использовать? Тогда понятно.

[safright]

ну да )
собственно, пример с зубчатым колесом и его специфичным поведением — следствие этой самой попытки рисовать в коде то, что можно нарисовать в каком-нибудь inkscape'е.

[donnerjack13589]

Paper.js очень медленный, использовал его для github.com/indutny/homepage — CPU load была около 100%

[Pavel_Osipov]

На что-то другое перешли, позвольте полюбопытствовать?

[donnerjack13589]

на Canvas API.

[Pavel_Osipov]

Логично, что прямые вызовы API будут быстрее всего

[TheShock]

Только в идеальных условиях. На практике чем больше приложение тем хуже оно работает, если не построено на хорошем фреймворке.

[student_ivan]

С coffeescript canvas api выглядит и вовсе безобидным. Paper создаёт «память» состояний, и за счет этого у него идёт основной груз. Пробовал писать головоломку на processing.js — в принципе тормозов особых не было, плохо только то, что он как и кофе должен свой код компилировать, ну и у него пока проблемы с поддержкой синтаксиса в современных IDE, лично я обозначил *.pde в phpStorm как C/C++ синтаксис, но это не выход же — подсказок к коду по крайней мере нету, а так с ходу без подсказок сразу и не осилишь, приходится читать мануал processingjs.org/reference/

[TheShock]

Что за память состояний в Paper?

[Keyten]

Возможно, в Scriptographer, я там видел свойство oldStyle.

[derSmoll]

Немного не согласен с тем, что Adobe отходит от флеша. Недавно Плющев в Этих ваших интернетах взял интервью у товарища из Adobe, и тот рассказал, что флеш цветет и пахнет.
Но это так, оффтопик для общего развития :)
Кстати, Raphaël создан Димой Барановским

[Pavel_Osipov]

Он есть на хабре? Отличный спец я смотрю

[derSmoll]

Ага, есть
Также, можете прочесть немного о нем в моей недавней статье

[aleks_raiden]

Отличная статья, спасибо, выяснил, что мне лучше всего paper.js :) Только одно замечание — не хватает ссылок на официальные сайты библиотек

[Pavel_Osipov]

Рад, что пригодилась статья. Ссылки на сайты, не проблема, уже есть

[vittore]

как жаль что в сравнение вы не добавили D3

[UseRifle]

А я KineticJS использую в одном месте, сначала в сторону рафаёля смотрел, но он оказался не совсем тем, что нужно.

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

А вот paper.js мне что-то на глаза не попадался.

[UseRifle]

И кстати, в кинетик есть драг-н-дроп www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/

[tsmar]

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

[Pavel_Osipov]

Такой же вопрос задали автору в обсуждении оригинальной статьи. Вот ответ, который как мне кажется является основанием для утверждения, что 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.х из коробки его не поддерживает, то это можно трактовать как минус в данном случае.

[tsmar]

В таком случае, наверное, будет правильным сделать поправку в статье (это я передаю привет автору, а не вам) и указать где именно не поддерживается, к тому же «Android 3.x is for Tablets only» тоже не верно, т.к. на Samsung Galaxy Tab (Android 3.x) все ок с SVG.
На этом всё, более не докучаю своими придирками, просто за живое задело :)

[Sannis]

Ну так он таблет, всё верно.

[gangrel]

>>Существуют слухи, что Android 4 будет поддерживать SVG
Проверил на проапдейтившемся Nexus S — поддерживает.

[Keyten]

От себя добавлю, что есть ещё наши библиотеки 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, перерисовывает рисунок с изменившимеся параметрами.

[Dmitry_f]

Насчет svg для андроида: есть js-библиотечка canvg, конвертит svg в canvas. Используется просто, работает довольно шустро. Демки тут.

[radist2s]

Есть еще крутая Fabric.js. Тоже умеет рисовать SVG, очень простая и понятная. Если я правильно понял, она состоит из модулей, поэтому на продакшен можно утащить только самое необходимое. А еще я прусь от возможности удобно рисовать кривые в SVG-стиле, то есть вот так: fabric.Path('M 10, 10 L 60, 0 l 0, 50 l -50,0 z') (это вроде бы должен получиться квадрат).