Добавление пользовательского объекта в группу в paperJS - PullRequest
Новая
       22

Добавление пользовательского объекта в группу в paperJS

0 голосов
/ 14 июня 2019

В PaperJS только обычные типы могут быть добавлены в группу. Всякий раз, когда я пытаюсь добавить группу с пользовательским объектом, я получаю сообщение об ошибке item._remove is not a function

Каждый раз, когда я создаю свой собственный объект, например: 

function textBox(point, width) {
    this.box = new Path.Rectangle({
        point: point,
        size: new Size(width,40),
        strokeColor: new Color(0,0,0,0.1),
        fillColor: 'white',
        strokeWidth: 1
    });

    this.box.onMouseUp = function(event) {
        cursor = this.point + new Point(5,2);
    }

}

и попробуйте добавить это в группу: 

var testGroup = new Group();
testGroup.appendTop(new textBox(new Point(0,0), 400));

Ошибка появляется. У меня такой вопрос: как добавить пользовательские объекты в группу? Конечно, нельзя ожидать, что я буду вручную создавать каждый отдельный объект или иным образом манипулировать ими на индивидуальном уровне без использования групповой динамики. Кажется, мне нужно, как и любому другому типу в PaperJS, заставить мой объект расширять Item, но мне пока не удалось заставить его принять мой конструктор для него. Мне интересно, что требуется для его принятия.

1 Ответ

2 голосов
/ 15 июня 2019

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

Вот эскиз , демонстрирующий решение. 

function createMyTextBox(point, content) {
    // Create a text item
    var text = new PointText({
        point: point,
        content: content,
        fontSize: 36,
        fillColor: 'red',
        justification: 'center'
    });

    // Create a rectangle around the text
    var rectangle = new Path.Rectangle({
        rectangle: text.bounds.scale(1.2),
        strokeColor: 'black'
    });

    // Create a Group that will wrap our items.
    var group = new Group([text, rectangle]);

    // Return the group
    return group;
}

// Create 2 text boxes
var textBox1 = createMyTextBox(view.center, 'text 1');
var textBox2 = createMyTextBox(view.center + [0, 100], 'text 2');

// You can use text boxes like regular items.
textBox2.translate(100, 0);
textBox2.scale(0.8);
...