打字稿中的动力学形状答案

【问题标题】：kineticjs shape in typescript打字稿中的动力学形状
【发布时间】：2013-03-19 00:15:24
【问题描述】：

我正在尝试基于以下 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)，但结果是一样的。

有什么想法吗？

【问题讨论】：

标签： javascript typescript kineticjs

【解决方案1】：

我认为您只需要避免使用粗箭头表示法，它故意将this 的当前上下文保留为_this。

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

在这里查看区别：http://bit.ly/10cpdWw

这里的 cmets 对于_this 和this 很有用：http://typescript.codeplex.com/workitem/248

【讨论】：

我按照你的建议修改了我的代码并且它可以工作，但我认为我在我的 TypeScript 文件中将 TypeScript 与 JavaScript 结合起来，所以这不可能以纯 TypeScript 方式实现？
TypeScript 是 JavaScript - 只是扩展。粗箭头符号执行特定任务。完整的function(canvas:any){ 与有效的 TS 一样。