Инициализация Paper.js

Для начала работы с Paper.js необходимо подключить библиотеку в проект. Обычно это делается через тег <script> в HTML-файле:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.13.17/paper-full.min.js"></script>

После подключения можно привязать Paper.js к <canvas> элементу. Существует два основных подхода: через HTML-атрибут type="text/paperscript" и через программное API на JavaScript.

Привязка Paper.js к canvas

<canvas id="myCanvas" resize></canvas>
<script type="text/paperscript" canvas="myCanvas">
    var circle = new Path.Circle({
        center: [100, 100],
        radius: 50,
        fillColor: 'red'
    });
</script>
  • Атрибут resize позволяет автоматически изменять размер <canvas> при изменении размеров окна.
  • canvas="myCanvas" связывает PaperScript с конкретным элементом <canvas>.
  • Path.Circle создаёт окружность с указанным центром, радиусом и цветом заливки.

Инициализация через JavaScript

Для более гибкого управления используется программный API:

var canvas = document.getElementById('myCanvas');
paper.setup(canvas);

var circle = new paper.Path.Circle({
    center: new paper.Point(100, 100),
    radius: 50,
    fillColor: 'red'
});

paper.view.draw();
  • paper.setup(canvas) связывает Paper.js с элементом <canvas>.
  • Все объекты создаются через пространство имён paper.
  • paper.view.draw() перерисовывает содержимое канвы после добавления объектов.

Создание и управление слоями

Paper.js использует слои для организации объектов на холсте. Каждый слой можно рассматривать как отдельный контейнер графических элементов.

var layer1 = new paper.Layer();
var rect = new paper.Path.Rectangle({
    point: [50, 50],
    size: [100, 100],
    fillColor: 'blue'
});
layer1.addChild(rect);

var layer2 = new paper.Layer();
var circle = new paper.Path.Circle({
    center: [150, 150],
    radius: 50,
    fillColor: 'green'
});
layer2.addChild(circle);

layer1.activate(); // Делает layer1 активным для последующих объектов
  • new paper.Layer() создаёт новый слой.
  • addChild() добавляет объекты на слой.
  • Метод activate() переключает текущий активный слой.

Настройка координатной системы

Paper.js использует систему координат, где точка (0, 0) находится в левом верхнем углу канвы. Можно управлять координатной системой с помощью view.center и view.zoom:

paper.view.center = new paper.Point(200, 200); // смещает центр канвы
paper.view.zoom = 2; // увеличивает масштаб в 2 раза
  • view.center позволяет перемещать центр системы координат.
  • view.zoom масштабирует все объекты на холсте.

Асинхронная загрузка и подготовка

Paper.js можно инициализировать после полной загрузки DOM, чтобы убедиться, что <canvas> доступен:

window.onl oad = function() {
    var canvas = document.getElementById('myCanvas');
    paper.setup(canvas);

    var path = new paper.Path.Line({
        from: [0, 0],
        to: [200, 200],
        strokeColor: 'black'
    });

    paper.view.draw();
};
  • Этот подход предотвращает ошибки, связанные с отсутствием элемента на момент выполнения скрипта.
  • Можно комбинировать с динамическим созданием канвы через JavaScript.

Использование PaperScope для изоляции

Каждый экземпляр Paper.js создаёт объект PaperScope, который изолирует контекст. Это важно при работе с несколькими канвасами на одной странице:

var myScope = new paper.PaperScope();
myScope.setup(document.getElementById('canvas1'));

var circle = new myScope.Path.Circle({
    center: [100, 100],
    radius: 40,
    fillColor: 'orange'
});

myScope.view.draw();
  • new PaperScope() создаёт независимый контекст Paper.js.
  • Все объекты внутри этого контекста создаются через myScope.

Основные шаги инициализации

  1. Подключить библиотеку Paper.js.
  2. Создать <canvas> или получить существующий.
  3. Инициализировать Paper.js через paper.setup(canvas) или PaperScript.
  4. Создать объекты через Path, PointText, Raster и другие.
  5. Управлять слоями через Layer и активировать нужный слой.
  6. Настроить координатную систему и масштаб при необходимости.
  7. Вызвать paper.view.draw() для обновления холста.

Эти методы и подходы создают основу для всех последующих действий в Paper.js, включая анимацию, обработку событий и сложные графические сцены.

Оглавление