kineticjs在打字稿

塑造我试图创建一个基于以下kineticjs JavaScript代码的形状：kineticjs在打字稿

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)，但结果相同。

任何想法？

来源

2013-03-28 pieter_dv

我认为你只是需要避免脂肪箭头符号，故意保留当前上下文this为_this。

所以drawFunc: (canvas: any) => {应该drawFunc: function(canvas:any){等

看到这里的区别：http://bit.ly/10cpdWw

的意见在这里就都是和_this有用this：http://typescript.codeplex.com/workitem/248

来源

2013-03-28 14:13:44 JcFx

我修改了代码，像你这样的建议和它的作品，但我认为我在TypeScript文件中将TypeScript和JavaScript结合在一起，所以这在纯TypeScript方式下是不可能的？ –

TypeScript *是* JavaScript - 只是扩展。胖箭头符号执行特定的任务。完整的'函数（canvas：any）{'和TS一样有效。 – JcFx

谢谢我有一个工作解决方案！ –

kineticjs在打字稿

回答

相关问题