Кастомные Item классы

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

Наследование от Item

Для создания кастомного элемента используется стандартное прототипное наследование Jav * aScript:

var CustomItem = Item.extend({
    initialize: function(position, size) {
        Item.call(this); // вызов конструктора родителя
        this.position = position;
        this.size = size;
        this._createShape();
    },

    _createShape: function() {
        this.rect = new Path.Rectangle({
            point: [this.position.x, this.position.y],
            size: [this.size.width, this.size.height],
            fillColor: 'lightblue'
        });
    },

    setColor: function(color) {
        this.rect.fillColor = color;
    },

    move: function(delta) {
        this.position += delta;
        this.rect.position += delta;
    }
});

Ключевые моменты:

  • Item.call(this) — обязательный вызов конструктора базового класса.
  • Все дочерние элементы создаются внутри кастомного класса, но для управления ими можно использовать приватные свойства (_createShape).
  • Методы кастомного класса могут напрямую управлять дочерними объектами.

Встраивание нескольких элементов

Кастомные Item-классы могут содержать несколько графических элементов. Для этого используется метод addChild:

var GroupItem = Item.extend({
    initialize: function(position) {
        Item.call(this);
        this.position = position;
        
        this.circle = new Path.Circle({
            center: position,
            radius: 20,
            fillColor: 'red'
        });

        this.square = new Path.Rectangle({
            point: [position.x - 15, position.y - 15],
            size: [30, 30],
            fillColor: 'green'
        });

        this.addChild(this.circle);
        this.addChild(this.square);
    },

    setColors: function(circleColor, squareColor) {
        this.circle.fillColor = circleColor;
        this.square.fillColor = squareColor;
    }
});

Особенности:

  • addChild добавляет дочерний элемент в иерархию кастомного Item. Все трансформации (перемещение, масштабирование, вращение) применяются к группе автоматически.
  • Можно комбинировать Path, Raster, Group и другие Item-объекты внутри одного кастомного класса.

Переопределение методов Item

Можно переопределять стандартные методы, такие как onFrame, onMouseDown, onMouseDrag, для создания интерактивных и анимационных компонентов:

var DraggableItem = Item.extend({
    initialize: function(position) {
        Item.call(this);
        this.circle = new Path.Circle({
            center: position,
            radius: 25,
            fillColor: 'orange'
        });
        this.addChild(this.circle);
    },

    onMouseDrag: function(event) {
        this.position += event.delta;
    },

    onFrame: function(event) {
        this.rotate(1); // постоянное вращение
    }
});

Важные моменты:

  • Методы onMouseDown, onMouseUp, onMouseDrag, onFrame вызываются автоматически Paper.js при соответствующих событиях, если объект находится на холсте.
  • Переопределение методов позволяет добавлять уникальное поведение для каждого экземпляра класса.

Управление иерархией элементов

Кастомные Item-классы позволяют строить сложные композиции:

var Robot = Item.extend({
    initialize: function(position) {
        Item.call(this);

        this.body = new Path.Rectangle({
            point: [position.x - 20, position.y],
            size: [40, 60],
            fillColor: 'gray'
        });

        this.head = new Path.Circle({
            center: [position.x, position.y - 35],
            radius: 20,
            fillColor: 'silver'
        });

        this.addChild(this.body);
        this.addChild(this.head);
    },

    move: function(delta) {
        this.position += delta;
    },

    setColors: function(bodyColor, headColor) {
        this.body.fillColor = bodyColor;
        this.head.fillColor = headColor;
    }
});

Преимущества:

  • Возможность централизованно управлять всей структурой через кастомный класс.
  • Трансформации применяются автоматически ко всем дочерним элементам.
  • Легко расширять и добавлять новые методы, обеспечивая модульность и переиспользуемость.

Использование кастомных классов вместе с Paper.js

  1. Создание экземпляров класса:
var robot1 = new Robot(new Point(100, 100));
var robot2 = new Robot(new Point(300, 150));
robot2.setColors('blue', 'yellow');
  1. Обработка событий на уровне кастомного элемента:
robot1.onMouseD rag = function(event) {
    this.move(event.delta);
};
  1. Добавление анимации:
view.onFr ame = function(event) {
    robot1.rotate(0.5);
};

Практические рекомендации

  • Всегда вызывать Item.call(this) при наследовании.
  • Использовать приватные свойства (this._name) для хранения внутренних элементов, чтобы не засорять публичный API.
  • Объединять несколько элементов через addChild для упрощённого управления.
  • Переопределять стандартные методы Paper.js для интерактивности и анимации.
  • Минимизировать прямое взаимодействие с глобальными переменными, всё должно инкапсулироваться внутри класса.

Итоговая структура кастомного Item-класса

  1. Конструктор (initialize) — инициализация позиции и создание графических элементов.
  2. Приватные методы — внутренние функции для создания и настройки элементов.
  3. Публичные методы — API для управления объектом (цвет, перемещение, анимация).
  4. Переопределение событий — для интерактивности (onMouseDrag, onFrame и др.).
  5. Дочерние элементы — через addChild для построения иерархий и группировки.

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

Оглавление