paper.jsイベントの "this"キーワードをコンストラクタに入れます

Question

paper.jsとtypescriptのやりとりを試みました。

私はいくつかのイベントハンドラをコンストラクタPenToolに書きたいと思います。 （私はDIを使用すると、ツールが作成されている間、すべての紙のイベントを定義したいので）

私は、コードの次のラップしている：paperService等新しいpaperScopeを作成し、私の紙の変数を

export class PenTool implements BaseTool { 

name: string; 
toolType: Tools; 
tool: any; 
drawingContext: any; 
path: any; 

constructor(private paperService: PaperService) { 

    this.name = "Pen"; 
    this.toolType = Tools.Pen; 
    this.drawingContext = this.paperService.getDrawingContext(); 

    this.tool = new this.drawingContext.Tool(); 

    this.tool.onMouseDown = function (event) { 

     //!!!!!!!!!!!!!!!!!!! 
     //I want to use my class property here (this.name) or 
     //(this.drawingContext) etc, but I can't! 

     this.path = new (paperService.getDrawingContext()).Path(); 
     //this.path = new this.drawingContext.Path(); 
     this.path.add(event.point, event.point); 
     this.path.strokeColor = 'black'; 
    } 

    this.tool.onMouseDrag = function (event) { 

     console.log('pen -> mouse drag!'); 

     if (event.modifiers.shift) { 
      this.path.lastSegment.point = event.point; 
     } else { 
      this.path.add(event.point); 
     } 
    } 
} 

} 

を与える 問題は、クラスのプロパティにイベントの関数にアクセスすることができないことです。

私は間違っていますか？ ありがとうございます。

Answer 1

矢印キーを使用して、同じコンテキストを維持します。

export class PenTool implements BaseTool { 

    name: string; 
    toolType: Tools; 
    tool: any; 
    drawingContext: any; 
    path: any; 

    constructor(private paperService: PaperService) { 

    this.name = "Pen"; 
    this.toolType = Tools.Pen; 
    this.drawingContext = this.paperService.getDrawingContext(); 

    this.tool = new this.drawingContext.Tool(); 

    this.tool.onMouseDown = (event) => { 

     //!!!!!!!!!!!!!!!!!!! 
     //I want to use my class property here (this.name) or 
     //(this.drawingContext) etc, but I can't! 

     this.path = new(paperService.getDrawingContext()).Path(); 
     //this.path = new this.drawingContext.Path(); 
     this.path.add(event.point, event.point); 
     this.path.strokeColor = 'black'; 
    } 

    this.tool.onMouseDrag = (event) => { 

     console.log('pen -> mouse drag!'); 

     if (event.modifiers.shift) { 
     this.path.lastSegment.point = event.point; 
     } else { 
     this.path.add(event.point); 
     } 
    } 
    } 

} 

ThisポストはJavaScriptでどのようにこの作品について多くの情報を持っています。