2013-10-07 4 views
2

저는 html5 캔버스로 그린 Renderer 클래스가 있는데, 윈도우 크기를 조정할 때 다시 그리기를 원합니다. 문제는 update() 코드가 initialize() 내부에서 한 번만 실행되고 창 크기를 조정해도 아무 것도 수행하지 않는다는 것입니다. 반면에 onWindowResized()는 윈도우 크기를 변경할 때마다 실행됩니다. 그럼, 실수는 어디 있습니까? 여기에있을 것이다TypeScript (0.9.1.1)에서 window.onresize로 스테이지가 업데이트되지 않습니다.

/// <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(); 
    } 
} 
+0

좋아, 나는 그것을 입력하여 해결 window.onresize = this.onWindowResized.bind (this). TypeScript에서는 "this"범위가 ActionScript와 다른 점을 기억하십시오. –

답변

2

문제는 이벤트가 실행될 때,이 이벤트의 컨텍스트에있을 것입니다 (크기 조정을위한 창을 클릭에 대한 DOM 요소, 마우스 오버 등),하지 클래스 - 그래서 this은 수업에서 다루지 않습니다.

당신은이 bind 지방 화살표 구문보다 더 우아한 하나 개 인스턴스

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

... 사용하여 해결할 수 있습니다.

+1

덕분에 스티브, 도와 줬어! –