kineticjs форма в машинописи

Question

Я пытаюсь создать форму, основанную на следующих 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. Я также попытался заменить canvas.fillStroke(this) в своем машинописном тексте () => canvas.fillStroke(this), но результат тот же.

Любые идеи?

Answer 1

Я думаю, вам просто нужно избегать обозначения жирной стрелки, которое сознательно сохраняет текущий контекст this как _this.

Так drawFunc: (canvas: any) => { должно быть drawFunc: function(canvas:any){ и т.д.

Чувствуете разницу здесь: http://bit.ly/10cpdWw

комментарии здесь полезны в отношении _this и this: http://typescript.codeplex.com/workitem/248