03. oktober 2006 - 14:12
Der er
2 kommentarer og
1 løsning
curveTo matematisk udregnet
Hey
Jeg har en række cordinator i en array og et for loop som så looper igennem arrayet og tegner en streg efter de punkter der er.
var aCords:Array = new Array({x:50,y:200},{x:80,y:140},{x:150,y:100},{x:225,y:80},{x:300,y:100},{x:350,y:180});
this.lineStyle(1);
this.moveTo(aCords[0].x,aCords[0].y);
var len:Number = aCords.length;
for(var i:Number=0;i<len;i++)
{
this.lineTo(aCords[i].x,aCords[i].y);
}
Rimelig nemt, men nu ville jeg gerne have den til at bruge curveTo istedet for lineTo. Det svære er selvfølgelig at udregne hvor control point'et så skal placeres.
Er der nogle der kan knække den?!?
: ) Jakob
03. oktober 2006 - 21:19
#1
Hmm - du kan vel ikke være sikker på at dine punkter giver en kurve - hvis de er vilkårlige, så kunne de lige så godt danne et zikzakmønster eller andet.
Du kan muligvis bruge denne her funktion:
MovieClip.prototype.drawCurve3Pts = function (x1, y1, x2, y2, x3, y3) {
var cx = 2*x2 - .5*(x1 + x3);
var cy = 2*y2 - .5*(y1 + y3);
this.moveTo (x1, y1);
this.curveTo (cx, cy, x3, y3);
}
Den danner en kurve udfra tre punkter, så hvis du udfra dine koordinater kan finde startpunkt, toppunkt og slutpunkt, så kan du tegne kurven med denne funktion.
En samlet kode med en tilpasset kurve kunne hedde (jeg har ladet lineTo blive, så du kan sammenligne kurverne):
MovieClip.prototype.drawCurve3Pts = function (x1, y1, x2, y2, x3, y3) {
var cx = 2*x2 - .5*(x1 + x3);
var cy = 2*y2 - .5*(y1 + y3);
this.moveTo (x1, y1);
this.curveTo (cx, cy, x3, y3);
}
var aCords:Array = new Array({x:50,y:200},{x:80,y:140},{x:150,y:100},{x:225,y:80},{x:300,y:100},{x:350,y:180});
this.lineStyle(1,0x0000FF,100);
this.moveTo(aCords[0].x,aCords[0].y);
var len:Number = aCords.length, xtop:Number = aCords[0].x, ytop:Number = aCords[0].y;
for(var i:Number=0;i<len;i++){
this.lineTo(aCords[i].x,aCords[i].y);
if( (aCords[i].y>aCords[0].y and ytop<aCords[i].y) or (aCords[i].y<aCords[0].y and ytop>aCords[i].y) ){
xtop = aCords[i].x;
ytop = aCords[i].y;
}
}
this.lineStyle(1,0xFF0000,100);
this.drawCurve3Pts(aCords[0].x, aCords[0].y, xtop, ytop, aCords[aCords.length-1].x, aCords[aCords.length-1].y);