JavaScript 調整大小 Window 更改邊界

Question

我不確定如何正確命名這個問題。

基本上，當我的屏幕是 canvas 時應該是這樣的：

但是，當我稍微調整 window 的大小時，它變成了這樣：

一切似乎都被奇怪地拉長了。

由於我是 JS 新手，我不確定什么特別有用。 這是我的“Globals”class，其中我持有 canvas 信息：

class Globals{
    constructor(){
        this.canvas = document.getElementById('game__canvas');
        this.ctx = this.canvas.getContext('2d');
        this.bg = new Image();
        this.bg.src = "https://art.pixilart.com/61f484ce7cee5ad.png";
        this.win_h = $(window).height();
        this.win_w = $(window).width();
        this.canvas_rect = this.canvas.getBoundingClientRect();
        this.MAX_BERRIES = 100;

        // set dims of canvas
        $(window).resize(function(){
            this.win_w = window.innerWidth;
            this.win_h = window.innerHeight;
            
            this.canvas.width = this.win_w;
            this.canvas.height = this.win_h;
        });

        this.canvas.width = this.win_w;
        this.canvas.height = this.win_h;
    }
    clearListeners(){
        // removes all event listeners
        var cleared = this.canvas.cloneNode(true);
        this.canvas.parentNode.replaceChild(cleared,this.canvas);
    }
}

請讓我知道是否還有其他可以幫助的事情。

編輯：

這是我得到的一個錯誤：

main.js:35 Uncaught TypeError: Cannot set property 'width' of undefined
    at main.js:35
    at dispatch (jquery.min.js:2)
    at v.handle (jquery.min.js:2)

但是，我認為應該定義this.canvas.width，因為定義了this.canvas。

Answer 1

問題是this在你的調整大小處理程序 function 中的值。

$(window).resize(function () {
  this.win_w = window.innerWidth;
  this.win_h = window.innerHeight;

  this.canvas.width = this.win_w;
  this.canvas.height = this.win_h;
});

調整大小處理程序 function 內部的this與Globals class 的構造函數中 function 外部的this不同。 調整大小處理程序 function 中的this實際上不是指Globals object，而是Window

// console.log(this) inside `Globals` constructor
Globals {globals: Globals, canvas: canvas#game__canvas, ctx: CanvasRenderingContext2D, bg: img, win_h: 669, …}

// console.log(this) inside resize handler function
Window {window: Window, self: Window, document: document, name: "", location: Location, …}

在 function 內部，它的值取決於如何調用 function。 由於下面的代碼不是嚴格模式，並且因為 this 的值不是由調用設置的，所以這將默認為全局 object，在瀏覽器中為 window。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#function_context

The Window object in your code doesn't have a canvas property, so when you call this.canvas inside the resize function it will evaluate to undefined (hence the error).

一個簡單的解決方案是在調整大小處理程序 function 中使用箭頭 function。

箭頭函數旨在允許方法在不同的范圍內執行，因為箭頭函數基於 scope 建立“this”，其中定義了箭頭 function。

另一個 mdn 引用（稍微改寫）

$(window).resize(() => {
  this.win_w = window.innerWidth;
  this.win_h = window.innerHeight;

  this.canvas.width = this.win_w;
  this.canvas.height = this.win_h;
});

或者您可以創建對調整大小處理程序 function 可以訪問的Globals實例的引用：

class Globals {
  globals = this; // public field declaration
  constructor() {
    this.canvas = document.getElementById("game__canvas");
    this.ctx = this.canvas.getContext("2d");
    this.bg = new Image();
    this.bg.src = "https://art.pixilart.com/61f484ce7cee5ad.png";
    this.win_h = $(window).height();
    this.win_w = $(window).width();
    this.canvas_rect = this.canvas.getBoundingClientRect();
    this.MAX_BERRIES = 100;

    // set dims of canvas
    $(window).resize(function () {
      globals.canvas.width = window.innerWidth;
      globals.canvas.height = window.innerHeight;
    });

    this.canvas.width = this.win_w;
    this.canvas.height = this.win_h;
  }
  clearListeners() {
    // removes all event listeners
    var cleared = this.canvas.cloneNode(true);
    this.canvas.parentNode.replaceChild(cleared, this.canvas);
  }
}
const globals = new Globals();