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