Перед нанесением ничего в браузере, задайте себе три вопроса:
- Вам нужно поддерживать старые браузеры ?
Если ответ да, то ваш единственный выбор Raphaël.Он обрабатывает все браузеры обратном пути в IE 7 и Firefox 3.Рафаэль даже имеет некоторую поддержку IE 6, хотя некоторые из его базовой технологии не могут быть реализованы there. - Вам нужно поддерживать Android ?
Android не поддерживает SVG, так что вам придется использовать Paper.js или Processing.js.Некоторые слухи говорят, что Android 4 будет обрабатывать SVG, но большинство устройств Android не будет поддерживать его на years. - Ваш чертеж интерактивные ?
Рафаэль и Paper.js акцент на взаимодействии с обнаженными элементов через нажатие, перетаскивание и на ощупь.Processing.js не поддерживает ни на уровне объекта события, поэтому в ответ на жесты пользователя очень сложно.Processing.js можно сделать прохладно анимации на главной странице, но другие инструменты лучше для интерактивного applications.
Paper.js, Processing.js и Рафаэль являются ведущие библиотеки для рисования на веб прямо сейчас.Пару другие и ближайшие, и вы всегда можете использовать Flash, но эти три хорошо работать с HTML5 и имеют широкую поддержку среди браузере vendors.
Выбор правильной рамки будет зависеть успех вашего проекта.В данной статье рассматриваются преимущества и недостатки каждого из них, и необходимую информацию, чтобы сделать лучший choice.
Весь код в этой статье, является открытым исходным кодом и может быть запущен на демо page, которая сопровождает эту article.
Overview
| Paper.js | Processing.js | Raphaël | |
|---|---|---|---|
| Technology | canvas tag |
canvas tag |
SVG |
| Language | PaperScript | Обработка script | JavaScript |
| Browsers | IE 9 | IE 9 | IE 7 |
| Mobile | Yes | Yes | IOS only |
| Model | Векторный и raster | Raster | Vector |
| Size | 56 KB | 64 KB | 20 KB |
Это все JavaScript, как только страница работает, но рамки принимать различные пути, чтобы добраться там.Рафаэль записывается непосредственно в JavaScript, но Paper.js использует PaperScript, и Processing.js использует свой собственный сценарий.Все они поддерживают Firefox, Chrome и Safari, Internet Explorer, но есть вопрос — Paper.js и Processing.js использовать canvas теги и поэтому требуют IE 9.
PaperScript является расширением JavaScript, что позволяет писать скрипты, которые не засоряют глобальное пространство имен.Это сокращает конфликты JavaScript.PaperScript также поддерживает прямые математику на объекты, такие как Point __ и 2 | Size : Вы можете добавить два пункта вместе, как если бы они были numbers.
Processing.js на основе рамки с именем Processing, который работает в виртуальной машине Java.Вы определяете int и float вместо var, и вы можете использовать классы Java в стиле наследства.В то время как сценарий Processing.js выглядит немного как Java, это больше похоже на JavaScript и не требует много более сложных особенностей Java.
Использование всех трех библиотек легко, если вы немного знакомы с JavaScript.
Как Started
Начните с импортом каждой библиотеке.Процесс установки каждого на это немного different.
Настройка Paper.js
<head> <script src="paper.js" type="text/javascript" charset="utf-8"></script> <script type="text/paperscript" canvas="paperCircle" src="paper_circle.pjs" id="script"></script> </head> <body> <canvas id="paperCircle" class="canvas" width="200" height="200" style="background-color: white;"></canvas>
Paper.js определяет тип сценария text/paperscript и идентификатор canvas тег, который вы будете рисовать.Он использует этот идентификатор, чтобы знать, где draw.
Настройка Processing.js
<head> <script src="processing.js" type="text/javascript" charset="utf-8"></script> </head> <body> <canvas width="200" height="200" class="canvas" data-processing-sources="processing_circle.java"></canvas>
Processing.js использует data-processing-sources атрибут canvas теги для импорта рисунка.Я использую .java Расширение для обработки исходного файла так, что мой редактор цвет-коды это правильно.Некоторые авторы используют .pde или .pjs расширения.Это до you.
Настройка Raphaël
<head> <script src="raphael-min.js" type="text/javascript" charset="utf-8"></script> <script src="raphael_circle.js" type="text/javascript" charset="utf-8"></script> </head>
Рафаэль импортируется как и любой другой файл JavaScript.Он хорошо работает с __ 26 JQuery автора | ready функция или любой другой JavaScript framework.
Теперь мы можем начать drawing.
Объектно-ориентированного Drawing
Как Paper.js и Рафаэль использования объектно-ориентированной графики: вы рисовать круг и вернуться круга объектов.Processing.js рисует круг и не дает ничего взамен.В следующем простом примере становится ясно.Давайте начнем с кругом в центре экрана в точке 100,100.
Paper.js:
var circle = new Path.Circle(new Point(100, 100), 10); circle.fillColor = '#ee2a33';
Рафаэль:
var paper = Raphael('raphaelCircle', 200, 200);
var c = paper.ellipse(100, 100, 10, 10);
c.attr({'fill': '#00aeef', 'stroke': '#00aeef'});
Processing.js:
void setup() {
size(200, 200);
}
void draw() {
background(#ffffff);
translate(100, 100);
fill(#52b755);
noStroke();
ellipse(0, 0, 20, 20);
}
Каждый фрагмент кода рисует тот же круг.Разница заключается в том, что вы можете сделать с it.
Paper.js создает круг, как path объект.Мы можем удержать объект и изменить его позже.В Paper.js, circle.fillColor = 'red'; заполняет наш круг с красной, и circle.scale(2) делает это в два раза big.
Рафаэль следующим объектно-ориентированной модели Paper.js.В Рафаэль, мы можем изменить цвет нашего круга с circle.attr('fill', 'red');, и масштабы его с circle.scale(2, 2);.Дело в том, что круг является объектом, который мы можем работать с later.
Processing.js не использует объекты; ellipse функция ничего не возвращает.После того как мы нарисовали наш круг в Processing.js, это часть выводимого изображения, как и чернила на странице, это не отдельный объект, которыйможет быть изменена путем изменения свойства.Чтобы изменить цвет, мы должны сделать новый круг прямо поверх старой one.
Когда мы называем fill , она меняет цвет заливки для каждого объекта мы обращаем в дальнейшем.После того как мы называем translate и fill, каждая форма будет заполнена green.
Потому что функции все изменить, мы легко можем закончить с нежелательными побочными эффектами.Позвоните безвредные функции, и вдруг все зеленое!Processing.js предоставляет pushMatrix и popMatrix функциями, чтобы изолировать изменения, но вы должны помнить, чтобы позвонить them.
Нет-объекты философии Processing.js “означает, что сложные рисунки работать быстрее.Paper.js и Рафаэль содержать ссылки на все, что вы рисуете, и поэтому затраты памяти создан сложной анимации будет замедлять работу приложения.Processing.js не содержит ссылки на элементы обращается, так что каждая форма занимает небольшое количество памяти.Память накладные расходы окупаются, если вам нужно получить доступ к объекту позже, но это излишним, если вы не делаете.Paper.js дает вам выход из этого с Symbol объекта и растеризации объекты, но вы должны планировать заранее, чтобы сохранить приложение работает fast.
Объектно-ориентированной и без применения объектов философия оказывает влияние на все, что вам делать с этими библиотеками.Она формирует образом, каждая библиотека отвечает animations.
Давайте сделаем это Move
Вращающиеся круги не очень интересно, поэтому мы сделаем квадратный вращаться вокруг circle.
Анимация в Processing.js
Processing.js поддерживает анимацию с заранее заданными setup и draw функций, например:
float angle = 0.0;
void setup() {
size(200, 200);
frameRate(30);
}
void draw() {
background(#ffffff);
translate(100, 100);
fill(#52b755);
noStroke();
ellipse(0, 0, 20, 20);
rotate(angle);
angle += 0.1;
noFill();
stroke(#52b755);
strokeWeight(2);
rect(-40, -40, 80, 80);
}
setup функция вызывается один раз при запуске приложения.Мы говорим Processing.js для анимации с частотой кадров 30 кадров в секунду, так что наши draw функция будет вызываться 30 раз каждую секунду.Этот показатель может показаться высоким, но это нормально для создания анимации взгляд smooth.
draw функция начинается с заполнения фона canvas, он рисует более ничего не осталось от предыдущих вызовов draw функции.Это большая разница с Processing.js: мы не манипулировать объектами, поэтому мы всегда должны очистить ранее нарисованных shapes.
Следующее, мы переводим систему координат 100,100 точка.Этот позиции рисунок на 100 пикселей слева и 100 пикселей от верхней части холста для каждого рисунка, пока мы сбрасываем координаты.Затем мывращаться на заданный угол.Угол увеличивается с каждым draw, что делает квадрат вращаться вокруг.Последним шагом является привлечение квадрат с помощью fill __ и 2 | rect functions.
rotate функции в Processing.js обычно занимает radians вместо degrees.Вот почему мы увеличиваем угол каждого кадра на 0,2, чем выше число, например, 3.Это одна из многих времен, когда тригонометрии показывает в этом методе drawing.
Анимация в Paper.js
Paper.js делает эту простую анимацию проще, чем в Processing.js, с постоянным объектом прямоугольника:
var r;
function init() {
var c = new Path.Circle(new Point(100, 100), 10);
c.fillColor = '#ee2a33';
var point = new Point(60, 60);
var size = new Size(80, 80);
var rectangle = new Rectangle(point, size);
r = new Path.Rectangle(rectangle);
r.strokeColor = '#ee2a33';
r.strokeWidth = 2;
}
function onFrame(event) {
r.rotate(3);
}
init();
Мы сохраняем состояние нашей площади, как объект, а Paper.js ручки нарисовав ее на экране.Мы поверните его немного для каждого кадра.Paper.js управляет пути, так что нам не придется перерисовывать все для каждого кадра или следить за углом поворота или беспокоиться о том, затрагивающих другие objects.