在 TypeScript (0.9.1.1) 中未使用 window.onresize 更新舞台答案

【问题标题】：Stage not updating with window.onresize in TypeScript (0.9.1.1)在 TypeScript (0.9.1.1) 中未使用 window.onresize 更新舞台
【发布时间】：2013-10-13 23:47:32
【问题描述】：

我有绘制到 html5 画布的 Renderer 类，我希望它在调整窗口大小时重绘内容。问题是 update() 代码只执行一次 - 在 initialize() 内 - 并且调整窗口大小不会做任何事情。另一方面，每次调整窗口大小时都会执行 onWindowResized() 。那么，错在哪里呢？

/// <reference path="../lib/easeljs.d.ts" />
/// <reference path="../lib/tweenjs.d.ts" />
/// <reference path="../lib/soundjs.d.ts" />
/// <reference path="../lib/preloadjs.d.ts" />

class Renderer
{
    private mStage:createjs.Stage;
    private mShape:createjs.Shape;

    public initialize (stage:createjs.Stage):void
    {
        this.mStage = stage;
        this.mStage.autoClear = true;
        this.update ();

        window.onresize = this.onWindowResized;
    }

    public update ():void
    {
        if (this.mStage)
        {
            this.mStage.canvas.width = window.innerWidth;
            this.mStage.canvas.height = window.innerHeight;

            this.mShape = new createjs.Shape();
            this.mShape.graphics.beginFill("#dddddd");
            this.mShape.graphics.drawRect(0, 0, this.mStage.canvas.width, this.mStage.canvas.height);
            this.mShape.graphics.beginFill("#ff4400");
            this.mShape.graphics.drawCircle(this.mStage.canvas.width / 2, this.mStage.canvas.height / 2, 25);

            this.mStage.addChild(this.mShape);
            this.mStage.update();
        }
    }

    private onWindowResized (event:UIEvent):void
    {
        this.update();
    }
}

【问题讨论】：

好的，我通过输入 window.onresize = this.onWindowResized.bind(this) 解决了这个问题。重要的是要记住，在 TypeScript 中，“this”范围与 ActionScript 相比是不同的。

标签： javascript html typescript window-resize

【解决方案1】：

您将遇到的问题是，当事件执行时，它将在事件的上下文中（调整大小的窗口、用于单击的 DOM 元素、鼠标悬停等），而不是您的类 - 所以this 将不要成为你班级的把柄。

你可以用...解决它

window.onresize = this.onWindowResized.bind(this);

这是bind 比粗箭头语法更优雅的一个实例。

【讨论】：