Javascript typescript中的kineticjs形状

我正在尝试基于以下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
  });

这是一个可以在以下网站上找到的示例：

我的打字脚本如下所示：

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',
    });

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'
    });

生成的JavaScript如下所示：

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',
    });

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（\u this）行。

\u this

引用的是我的typescript类，而不是JavaScript示例中生成的形状。我还尝试用canvas.fillStroke（this）替换我的typescript中的

canvas.fillStroke（this）

，但结果是一样的

---

有什么想法吗？

我认为您只需要避免使用胖箭头符号，它故意将

this

的当前上下文保留为

\u this

所以

drawFunc：（canvas:any）=>{

应该是

drawFunc:function（canvas:any）{

等等

请看这里的区别：

---

这里的注释对于

\u this

和

this

很有用：

我按照你的建议修改了我的代码，它可以工作，但我认为我正在我的TypeScript文件中将TypeScript与JavaScript结合起来，所以这不可能以纯TypeScript的方式实现？TypeScript是JavaScript-只是扩展了。胖箭头符号执行一个特定的完整的

函数（canvas:any）{

同样有效。