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 示例中那样生成的形状。我也尝试将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 回答