Comments 30
Функция draw() определяет позицию курсора и высчитывает лежит-ли он в пределах нашего квадрата.Зачем? Это можно делать и в mousePressed()
Недавно по наводке с хабра реализовали одну замудреную карту-схему на Raphaël и потому узнали весьма сильное преимущество, про которое почему-то тут ни слова — рафаэль-код идентичен svg, во многих случаях его можно отдельно нарисовать, а затем запустить на сайте, не заморачиваясь с тем, чтобы рисовать прямо в коде.
Для конвертации можно либо вручную переставить массивы, либо воспользоваться одним из конвертеров (мы использовали вот этот)
Для конвертации можно либо вручную переставить массивы, либо воспользоваться одним из конвертеров (мы использовали вот этот)
Что значит «идентичен SVG»? «Рафаель» как раз и рисует при помощи SVG, в статье написано, это же очевидно, что там будет получаться SVG, нет?
«Рисует из svg» и «рисует с помощью svg» — немного разные вещи. Для нас эта разница означала, что вместо того, чтобы 1-2 дня потратить на перенос элементов карты в js-код (а уж в каком качестве это получилось бы — страшно представить) мы попросили нашего дизайнера это красиво раскидать и за 2 часа все сделали, еще порадоваться успели, что можно малой кровью навесить все требуемые действия.
Paper.js очень медленный, использовал его для github.com/indutny/homepage — CPU load была около 100%
На что-то другое перешли, позвольте полюбопытствовать?
на Canvas API.
Логично, что прямые вызовы API будут быстрее всего
Только в идеальных условиях. На практике чем больше приложение тем хуже оно работает, если не построено на хорошем фреймворке.
С coffeescript canvas api выглядит и вовсе безобидным. Paper создаёт «память» состояний, и за счет этого у него идёт основной груз. Пробовал писать головоломку на processing.js — в принципе тормозов особых не было, плохо только то, что он как и кофе должен свой код компилировать, ну и у него пока проблемы с поддержкой синтаксиса в современных IDE, лично я обозначил *.pde в phpStorm как C/C++ синтаксис, но это не выход же — подсказок к коду по крайней мере нету, а так с ходу без подсказок сразу и не осилишь, приходится читать мануал processingjs.org/reference/
Немного не согласен с тем, что Adobe отходит от флеша. Недавно Плющев в Этих ваших интернетах взял интервью у товарища из Adobe, и тот рассказал, что флеш цветет и пахнет.
Но это так, оффтопик для общего развития :)
Кстати, Raphaël создан Димой Барановским
Но это так, оффтопик для общего развития :)
Кстати, Raphaël создан Димой Барановским
Отличная статья, спасибо, выяснил, что мне лучше всего paper.js :) Только одно замечание — не хватает ссылок на официальные сайты библиотек
как жаль что в сравнение вы не добавили D3
А я KineticJS использую в одном месте, сначала в сторону рафаёля смотрел, но он оказался не совсем тем, что нужно.
Впрочем, в этих вопросах я новичок, просто было интересно попробовать.
А вот paper.js мне что-то на глаза не попадался.
Впрочем, в этих вопросах я новичок, просто было интересно попробовать.
А вот paper.js мне что-то на глаза не попадался.
И кстати, в кинетик есть драг-н-дроп www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/
«Вам нужна поддержка 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. 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 — поддерживает.
Проверил на проапдейтившемся Nexus S — поддерживает.
От себя добавлю, что есть ещё наши библиотеки JCScript и LibCanvas. LibCanvas — создание TheShock, прокомментировавшего чуть выше. JCScript — создание ещё одного хабраюзера, asavin.
JCScript работает с canvas и добавляет очень простое взаимодействие с объектами. Как Raphaёl, только с canvas:
LibCanvas уже не раз описывался на хабре, если примерно и коротко — то он предоставляет немного расширенный Canvas API, с некоторыми своими абстрактными классами, цепочками вызовов и возможностью назначения поведений фигуре (напр. Animatable).
Ещё неточность: PaperJS не работает с растровой и векторной графикой. Он работает с canvas, который поддерживает только растр. Внутри он рисует на canvas, перерисовывает рисунок с изменившимеся параметрами.
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, перерисовывает рисунок с изменившимеся параметрами.
Есть еще крутая Fabric.js. Тоже умеет рисовать SVG, очень простая и понятная. Если я правильно понял, она состоит из модулей, поэтому на продакшен можно утащить только самое необходимое. А еще я прусь от возможности удобно рисовать кривые в SVG-стиле, то есть вот так: fabric.Path('M 10, 10 L 60, 0 l 0, 50 l -50,0 z') (это вроде бы должен получиться квадрат).
Sign up to leave a comment.
Web-Drawing библиотеки: Paper.js Vs. Processing.js Vs. Raphael.js