lineX und lineY sind meine Startpunkte. Aus den vier Kurven soll dann ein Kreis entstehen. Das funktioniert auch prinzipiell, nur sieht das Ding eher aus wie ein abgerundetes Viereck denn ein Kreis. Gibt es eine einfache Lösung für die Konstruktion eines wirklichen Kreises?
Ich würde das obige Skript gerne verstehen. Erstens bin ich mir nicht sicher, ob ich die Funktion "curveTo" richtig verstehe. Diese verbindet doch einen Ausgangspunkt über eine Kurve mit einem neuen Ankerpunkt, der danach automatisch als neuer Ausgangspunkt gesetzt wird. Welche Rolle (geometrisch betrachtet) spielt dabei der Steuerungspunkt?
Auf das obige Skript angewendet: Was bedeutet folgender Code bzw. was geschieht da genau?
"ctrlR" ist meines Erachtens einfach ein um den Faktor cos (PI/8) verkürzer Radius. Wozu braucht es diese Verkürzung zur Definition des Steuerungspunktes?
Das ist der Sekans, also die Umkehrfunktion von Cosinus sec(alpha)=1/cos(alpha), das Ganze liegt dann ausserhalb des Kreises, den brauchst du für curveTo, weil es sich bei dem Kreisbogen um eine quadratische Bezierkurve handelt und die braucht einen ControlPunkt(x, y) und 2 weitere Punkte am Anfang und am Ende, deshalb ctrlR=radius*1/cos(winkel/2)=radius/cos(winkel/2).
Punkt1=moveTo(ax, ay), Controlpunkt=(cx, cy), Punkt2=curveTo(bx, by), die Bezierkurve fängt bei Punkt1 an berücksichtigt den Controlpunkt und endet bei Punkt2 und das ergibt ein Kreisbogen dann. ;)
Traumhaft, danke! Jetzt ist es mir schon einiges klarer, auch wenn ich noch nicht alles hundert Prozent durchschaut habe, aber fast! Danke!
Gibt es eine einfach Möglichkeit, die Segmente sichtbar zu machen, indem der Mittelpunkt mit den Anfangs- bzw. Endpunkten der Segmente verbunden wird, und zwar dynamisch (d.h. in Abhängigkeit der Anzahl Segmente)?
Danke nochmals für die schnelle Antwort. Macht richtig Spass hier! ;)
var x = 0;
var y = 0;
var radius = 100;
var segmente = 12; //hier Anzahl Kreissektoren eingeben
// alpha in Bogenmaß
var alpha = 360 / segmente / 180 * Math.PI;
var ctrlR = radius / Math.cos(alpha / 2);
var winkel = 0;
_root.lineStyle(1, 0, 100);
_root.beginFill(0x00FF00, 60);
_root.moveTo(x, y);
_root.lineTo(x + radius, y);
for (i = 0; i < segmente/segmente; i++) //für die Darstellung von mehreren Kreissektoren Bedingung ändern
{
winkel += alpha;
winkelHalb = winkel - alpha / 2;
cx = x + Math.cos(winkelHalb) * ctrlR;
cy = y + Math.sin(winkelHalb) * ctrlR;
px = x + Math.cos(winkel) * radius;
py = y + Math.sin(winkel) * radius;
_root.curveTo(cx, cy, px, py);
}
_root.lineTo(x, y);
_root.endFill;
Jetzt möchte ich gerne ein solches Kreissegment als sensitive Fläche für einen Button verwenden. Ich habe gedacht, dass ich dazu die Segmente als MovieClips in einen anderen Movie lade. Ginge das? Oder kann man eine Buttonfläche auch mathematisch definieren?
Ja, das kommt schon in die Nähe. Nur würde ich das Script gerne besser verstehen, damit ich auch damit arbeiten kann. Könntest Du es mir erklären? Ich habe Fragen zum Teil ins Script geschrieben, das ich momentan so zusammengebastelt habe:
var x = 0;//x-Ursprung
var y = 0;//y-Ursprung
var radius = 100;//Kreisradius
var segmente = 8; //Anzahl Kreissektoren
var segmente_voll = 5//Anzahl voller Kreisssektoren
var alpha = 360 / segmente / 180 * Math.PI;//alpha im Bogenmass
var ctrlR = radius / Math.cos(alpha / 2);//Radius für Kontrollpunkt
var winkel = (1/180) * Math.PI * 0;//Anfangswinkel im Bogenmass (muss im Moment noch Null sein -> warum?)
_root.lineStyle(1, 0, 100);
_root.beginFill(0x00FF00, 60);
_root.moveTo(x, y);
_root.lineTo(x + radius, y);
for (i = 0; i < segmente_voll; i++)
{
winkel += alpha;
winkelHalb = winkel - alpha / 2;
cx = x + Math.cos(winkelHalb) * ctrlR;
cy = y + Math.sin(winkelHalb) * ctrlR;
px = x + Math.cos(winkel) * radius;
py = y + Math.sin(winkel) * radius;
_root.curveTo(cx, cy, px, py);
}
_root.lineTo(x, y);
_root.endFill;
var clip = this.createEmptyMovieClip("clip" + i, i + 1000);//verstehe die ganze Funktion nicht -> wozu die "i" und "1000"?
with (this["clip" + i])//was geschieht hier?
{
clipW = winkel - alpha;//den folgenden Teil verstehe ich einigermassen, nur:
clipWH = clipW - alpha / 2;//clipWH wird später gar nicht verwendet -> wozu clipWH?
cpx = x + Math.cos(clipW) * radius;
cpy = y + Math.sin(clipW) * radius;
lineStyle(1, 0, 50);
beginFill(0x000000, 50);
moveTo(x, y);
lineTo(cpx, cpy);
curveTo(cx, cy, px, py);
this["clip" + i].onRelease = function()//ich verstehe, was hier bewirkt wird, jedoch nicht, wie? was ist die Idee?
{
trace("--> " + this);
};
endFill();
}
// Das ist der Mittelpunkt des Kreises auf der Bühne
var x = 0;//x-Ursprung
var y = 0;//y-Ursprung
var radius = 100;//Kreisradius
// Genau, das sind Kreissektoren und keine Kreissegmente
var segmente = 8; //Anzahl Kreissektoren
// was meinst du damit volle Kreissektoren?
// Du hast 8 davon mit einem Winkel von 45°, damit du einen vollen Kreis hast
// 360° / 8 = 45°;
var segmente_voll = 5;//Anzahl voller Kreisssektoren
// Bogenmaß von alpha = 0.78539..... bzw. Math.PI / 4
// wenn du 10 sektoren hast, dann ist der Winkel von einem davon 360° / 10 = 36°
// Bogenmaß wäre das alpha = 0.62831....
var alpha = 360 / segmente / 180 * Math.PI;//alpha im Bogenmass
// das ist Sekans von halbe alpha * radius
var ctrlR = radius / Math.cos(alpha / 2);//Radius für Kontrollpunkt
// das muss nicht 0 sein, kann auch (-1 * alpha) sein z.B. bzw. (2 * Math.PI - alpha)
// wenn winkel 0 ist, dann fängt der erste im Uhrzeigersinn bei 0° so gesehen an
// also bei der Ziffer 3 auf der Uhr
var winkel = (1/180) * Math.PI * 0;//Anfangswinkel im Bogenmass (muss im Moment noch Null sein -> warum?)
/*
das brauchst du jetzt nicht mehr
_root.lineStyle(1, 0, 100);
_root.beginFill(0x00FF00, 60);
_root.moveTo(x, y);
_root.lineTo(x + radius, y);
*/
for (i = 0; i < segmente; i++)
{
winkel += alpha;
winkelHalb = winkel - alpha / 2;
cx = x + Math.cos(winkelHalb) * ctrlR;
cy = y + Math.sin(winkelHalb) * ctrlR;
px = x + Math.cos(winkel) * radius;
py = y + Math.sin(winkel) * radius;
// das ist die Tiefe (i +1000), du kannst auch i oder i + 100 machen...
// einfach ein MovieClip
// Hilfe--> createEmptyMovieClip nachlesen. ;)
var clip = this.createEmptyMovieClip("clip" + i, i + 1000);//verstehe die ganze Funktion nicht -> wozu die "i" und "1000"?
// Hier spart man sich den Namen clip immer wieder einzugeben
// clip.lineTo(a, b)
// clip.curveTo(v, u, p, q);
// etc....
// Hilfe--> (with) nachschauen
with (clip)//was geschieht hier?
{
// Ich ziehe einfach von dem Winkel nochmal alpha ab
// damit ich die erste Linie zeichnen kann
clipW = winkel - alpha;//den folgenden Teil verstehe ich einigermassen, nur:
// Ja, das braucht man nicht, weg damit
clipWH = clipW - alpha / 2;//clipWH wird später gar nicht verwendet -> wozu clipWH?
cpx = x + Math.cos(clipW) * radius;
cpy = y + Math.sin(clipW) * radius;
lineStyle(1, 0, 50);
beginFill(0x000000, 50);
moveTo(x, y);
lineTo(cpx, cpy);
curveTo(cx, cy, px, py);
// Du wolltest doch Buttons haben...
// das wäre jetzt einer.
// da bekommt jeder Button seine Buttonfunktion, sonst müsste man alle einzel
// ausserhalb der for-schleife machen und das muss nicht sein, das ist die Idee
// Hilfe--> Button, onRelease, onPress etc.. nachschauen
clip.onRelease = function()//ich verstehe, was hier bewirkt wird, jedoch nicht, wie? was ist die Idee?
{
trace("--> " + this);
// Kreissektor 2 z.B. mach irgendwas beim Loslassen der maustaste
};
/*
Hoffe, man hat es einigermaßen verstanden. ;)
*/
endFill();
}
// _root.curveTo(cx, cy, px, py);
}
// _root.lineTo(x, y);
// _root.endFill;
Forum-Auswahl
