Блог

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

     var scaleFactor = 1;
    class Ships {
      constructor(img, x1, y1, width) {
        let image = new Image();
        image.src = img;
        this.img = image;
        this.x1 = x1 * scaleFactor;
        this.y1 = y1 * scaleFactor;
        this.width = width * scaleFactor;

//I want to set the image height keeping its original ratio

        image.onload = function() {
        this.height  = this.width * image.height / image.width;
        this.x2 = this.x1   this.width;
        this.y2 = this.y1   this.height;

//But here 'this' refers to the image element and so it adds the properties to the image element and not the class
        }
        this.draw = function () {
          ctx.drawImage(this.img, this.x1, this.y1, this.width, this.height);
        }
        
      }
    }
 

Есть ли способ, с помощью которого я могу установить высоту изображения и добавить его в качестве свойства в класс?

Если вы не хотите this , чтобы ключевое слово указывало на изображение в функции onload, просто замените его функцией со стрелкой. Таким образом, this все равно будет ссылаться на область вне функции, например так:

 image.onload = () => {
    this.height  = this.width * image.height / image.width;
    this.x2 = this.x1   this.width;
    this.y2 = this.y1   this.height;
}