javascript - σχήμα kineticjs σε typescript

Προσπαθώ να δημιουργήσω ένα σχήμα βασισμένο στον παρακάτω κώδικα 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/

Ο κώδικας TypeScript μου φαίνεται έτσι:

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 αναφέρεται στην κλάση μου στο TypeScript και όχι στο δημιουργημένο σχήμα όπως στο παράδειγμα JavaScript. Προσπάθησα επίσης να αντικαταστήσω το canvas.fillStroke(this) στο TypeScript μου με () => canvas.fillStroke(this), αλλά το αποτέλεσμα είναι το ίδιο.

Κάποιες ιδέες;

Απάντηση #1

Νομίζω ότι απλώς χρειάζεται να αποφύγετε τη σύνταξη βέλους λίπους, η οποία διατηρεί σκόπιμα το τρέχον πλαίσιο του this ως _this.

Έτσι drawFunc: (canvas: any) => { θα πρέπει να είναι drawFunc: function(canvas:any){ κ.λπ.

Δείτε τη διαφορά εδώ: http://bit.ly/10cpdWw

Τα σχόλια εδώ είναι χρήσιμα σχετικά με _this και this: http://typescript.codeplex.com/workitem/248