2

次のkineticjs JavaScriptコードに基づいて形状を作成しようとしています:

var triangle = new Kinetic.Shape({
    drawFunc: function(canvas) {
      var context = canvas.getContext();
      context.beginPath();
      context.moveTo(200, 50);
      context.lineTo(420, 80);
      context.quadraticCurveTo(300, 100, 260, 170);
      context.closePath();
      canvas.fillStroke(this);
    },
    fill: '#00D2FF',
    stroke: 'black',
    strokeWidth: 4
  });

これは、http ://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/ にあるサンプルです。

私のタイプスクリプトは次のようになります。

var square = new Kinetic.Shape({
        drawFunc: (canvas: any) => {
            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.moveTo(25, 25);
            ctx.lineTo(475, 25);
            ctx.lineTo(475, 475);
            ctx.lineTo(25, 475);
            ctx.closePath();
            canvas.fillStroke(this);
        },
        fill: '#FF0000',
    });

生成された JavaScript は次のようになります。

var square = new Kinetic.Shape({
        drawFunc: function (canvas) {
            var ctx = canvas.getContext();
            ctx.beginPath();
            ctx.moveTo(25, 25);
            ctx.lineTo(475, 25);
            ctx.lineTo(475, 475);
            ctx.lineTo(25, 475);
            ctx.closePath();
            canvas.fillStroke(_this);
        },
        fill: '#FF0000'
    });

回線で問題が発生canvas.fillStroke(_this)。は_this、JavaScript サンプルのように生成された形状ではなく、typescript クラスを参照しています。canvas.fillStroke(this)タイプスクリプトの も に置き換えようとしました() => canvas.fillStroke(this)が、結果は同じです。

何か案は？

4

1 に答える 1

2

thisasの現在のコンテキストを意図的に保持する太い矢印表記を避ける必要があると思います_this。

などのようにすdrawFunc: (canvas: any) => {べきです。drawFunc: function(canvas:any){

ここで違いを参照してください: http://bit.ly/10cpdWw

ここのコメントは、_thisおよびに関して役立ちますthis: http://typescript.codeplex.com/workitem/248

于 2013-03-28T14:13:44.470 に答える