javascript - kineticjs-muoto typescriptissä
Yritän luoda muodon seuraavan kineticjs JavaScript -koodin perusteella:
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
});
Tämä on esimerkkiteksti, joka löytyy osoitteesta: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/
TypeScriptini näyttää tältä:
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',
});
Luotu JavaScript näyttää tältä:
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'
});
Ongelma ilmenee rivillä canvas.fillStroke(_this). _this viittaa TypeScript-luokkaani, ei generoituun lomakkeeseen kuten JavaScript-esimerkissä. Yritin myös korvata TypeScriptissäni canvas.fillStroke(this) kohdan () => canvas.fillStroke(this), mutta lopputulos on sama.
Onko ideoita?
Vastaus #1
Luulen, että sinun tarvitsee vain välttää lihavoitua nuolimerkintää, joka tarkoituksella säilyttää nykyisen this-kontekstin _this.
Joten drawFunc: (canvas: any) => { pitäisi olla drawFunc: function(canvas:any){ jne.
Katso ero täällä: http://bit.ly/10cpdWw
Tässä olevat kommentit ovat hyödyllisiä liittyen _this ja this: http://typescript.codeplex.com/workitem/248