Невозможно центрировать объекты Fabric JS из loadFromJSON на динамически генерируемом холсте - PullRequest
Новая
       26

Невозможно центрировать объекты Fabric JS из loadFromJSON на динамически генерируемом холсте

0 голосов
/ 14 октября 2019

У меня есть холст, на котором ширина генерируется динамически в виде группы: 

   this.canvas = new fabric.Canvas('meCanvas', {
        preserveObjectStacking: true,
        hoverCursor: 'pointer',
        height: 1024,
        width: $('#card-container').width(),
    });

И я динамически генерирую набор объектов на этом холсте, как показано ниже: 

this.readTextFile("/assets/data.json", (text) => {
    data = JSON.parse(text);

   this.canvas.loadFromJSON(data, () => {
       state = JSON.stringify(this.canvas.toJSON(['_id', 
                                                  '_boundingRect', 
                                                  '_svg', 
                                                  'evented', 
                                                  'selectable', 
                                                  'hoverCursor']));
                }); //State is for other purpose, plz don't really have a look at it

 }

Проблема в том, что группа объектов из data.json никогда не центрируется на моем холсте. Основываясь на $('#card-container').width(), он может получить положение с крайней левой стороны или немного.

Пожалуйста, как мне сделать группу объектов из моего файла JSON, чтобы она всегда находилась в центре моего холста независимо отширина моего холста.

Я пробовал это, но это не работает: 

        this.canvas.getObjects().forEach(function (o) {
            o.originX= 'center';
            o.originY = 'center';
        });

Или даже: 

 this.canvas.getObjects().forEach(function (o) {
            o.center();
        });

Но ничего не работает, пожалуйста, помогите!

...