Как получить свойства изображения пользовательского объекта, добавленного в fabri c canvas? - PullRequest
0 голосов
/ 31 марта 2020

У меня есть пользовательское изображение fabri c (класс)

this.fabricImageClass = fabri c .util.createClass (fabri c .Image, {type: this.fabricImageClassName,

  initialize(src, options, replace?: boolean) {
    this.callSuper('initialize', options);
    this.set('elementType', options.elementType);
    this.set('idObjet', options.idObjet);
    this.scaleX = options.scaleX;
    this.scaleY = options.scaleY;
    this.image = new Image();
    this.image.src = src;
    this.image.onload = (() => {
      this.width = this.image.width;
      this.height = this.image.height;
      this.setCoords();
      if (replace) {
       this.height =  this.canvasComponent.activeCanvas.getHeight();
       this.width =  this.canvasComponent.activeCanvas.getWidth();
      }
      this.loaded = true;
      this.fire('image:loaded');
    }).bind(this);
  },

Теперь я добавляю изображение на холст, используя следующее:

this.canvasComponent.activeCanvas.add(
          this.fabricUtilsService.addImage({
            elementType: ElementType.Background,
            scaleX: 1,
            scaleY: 1,
            idObjet: idObject,
        })
            .on('image:loaded',  canvas.renderAll.bind(canvas))
    );

Я пытаюсь установить это изображение в качестве фона, поэтому мне нужны высота / ширина изображения для масштабирования. получить последний добавленный объект из холста:

let element = canvas.getObjects()[canvas._objects.length - 1];

Однако возвращаемые высоты всегда равны 0, используя следующее:

object.height

Может случиться так, поскольку объект не отображается в Canvas, я не могу прочитать свойства. Если я делаю тайм-аут, а затем пытаюсь прочитать свойства элемента, то высота / ширина возвращаются правильно.

setTimeout(() => {  console.log(this.canvasComponent.activeCanvas.getObjects()[0].width); }, 2000); 

Как я могу получить пользовательские свойства изображения? Что-то вроде "послеобеденный"?

...