Kreis und Ellipsen Funktion

[netTrek]

Wir haben das zwar schon 1000 mal hier gehabt aber ich hab hier einen "anderen" Ansatz für Ellipsen- und Kreis-Zeichnenfunktionen.

Wer's braucht ...

// Kreis und Ellipsen Funktion
// netTrek - Saban Ünlü
MovieClip.prototype.elipse = function(x, y, rx, ry, sgm) {
    // anzahl der Segmete
    sgm = sgm == undefined ? 8 : sgm;
    // Segmetwinkel in Grad
    sgmAngle = 360/sgm;
    // Faktor für RAD
    Math.rad = Math.PI/180;
    // Der Winkel an dem man den Kotrollradius berechnet ist immer zwichen Start und Endpunkt
    // der Bezierkurve folglich der halbe segmentwinkel
    var cRangle = (sgmAngle*Math.rad)/2;
    // radius (Kotrollkreis) |BETRAG| der Kontrollinie (länge) in X Richtung
    var cRx = rx/Math.cos(cRangle);
    var cRy = ry/Math.cos(cRangle);
    // startPunkt rechts außen
    this.moveTo(x+rx, y);
    for (var angle = sgmAngle; angle<=360; angle += sgmAngle) {
        trace(angle);
        // aktueller Winkel mit dem gearbeitet wird:
        var myAngle = angle*Math.rad;
        // controllPkt Koordinaten
        var cX = x+Math.cos(myAngle-cRangle)*cRx;
        var cY = y+Math.sin(myAngle-cRangle)*cRy;
        // Endpunkt
        var pX = x+Math.cos(myAngle)*rx;
        var pY = y+Math.sin(myAngle)*ry;
        this.curveTo(cX, cY, pX, pY);
    }
};
MovieClip.prototype.kreis = function(x, y, r, sgm) {
    sgm = sgm == undefined ? 8 : sgm;
    this.elipse(x, y, r, r, sgm);
};
// ANWENDUNG -BSP--------------------------------------------------------------------------------
this.onMouseDown = function() {
    this.down = true;
    this.startX = this._xmouse;
    this.startY = this._ymouse;
    this.counter = this.counter == undefined ? 1 : this.counter += 1;
    this.createEmptyMovieClip("my"+this.counter+"_mc", this.counter);
};
this.onMouseUp = function() {
    this.down = false;
    this["my"+this.counter+"_mc"].size.removeMovieClip();
};
this.onMouseMove = function() {
    if (down) {
        this["my"+this.counter+"_mc"].clear();
        this["my"+this.counter+"_mc"].lineStyle(1, 0xFF0000, 100);
        var centerX = (this.startX+this._xmouse)/2;
        var centerY = (this.startY+this._ymouse)/2;
        var delatX = this._xmouse-centerX;
        var delatY = this._ymouse-centerY;
        this["my"+this.counter+"_mc"].elipse(centerX, centerY, delatX, delatY);
        this["my"+this.counter+"_mc"].createEmptyMovieClip("size", 1);
        this["my"+this.counter+"_mc"].size.lineStyle(1, 0, 10);
        this["my"+this.counter+"_mc"].size.moveTo(this.startX, this.startY);
        this["my"+this.counter+"_mc"].size.lineTo(this._xmouse, this.startY);
        this["my"+this.counter+"_mc"].size.lineTo(this._xmouse, this._ymouse);
        this["my"+this.counter+"_mc"].size.lineTo(this.startX, this._ymouse);
        this["my"+this.counter+"_mc"].size.lineTo(this.startX, this.startY);
    }
};
// ANWENDUNG -ENDE------------------------------------------------------------------------------- 
 

SABAN

PS: Bin für Verbesserungsvorschläge dankbar

[hOk]

Sieht fein aus, krasse Mathe,
aber warum schreibst du dir
das hier: this["my"+this.counter+"_mc"]
nicht in eine Variable?
mfg, Holger

[Sven G.]

Hi Saban......

Wow, da bin ich echt sprachlos! Ist Dir echt gelungen!

Gruss & Schönen Rutsch ins neue Jahr

[netTrek]

@-= hOk =-
Du das Anwendungsbeispiel war "nur" ein Test und ich hab da einfach nicht drauf geachtet...

Eigentlich habe ich das BSP auch nur gemacht um zu schauen ob die Ellipsen (Kreise) die gezeichnet werden auch in das "mathematisch" Richtige Viereck passen.

@Sven G.
THX

[bokel]

Hi netTrek

sehr schoene Kreise macht das.

Ich würde vielleicht direkt mit rad rechnen,
dann sparst du dir das Umrechnen in der Schleife.

Sinnvoll wäre es wohl auch, das x,y ganz aus der
Berechnung raus zu ziehen und stattdessen den mc
entsprechend positionieren.

Bei der Kreisfunktion ist das sgm == undefined ?
doppelt gemoppelt, denn es wird ja in der Ellipsen-
funktion sowieso gemacht.

Fröhlichen Rutsch,
mfg r.

[sebastian]

Auf jeden Fall auch von mir einen Daumen nach oben!

Sebastian

[netTrek]

@bokel
das mit dem Rad ist ne gute idee werde ich noch machen!
Mit sgm hast du natürlich recht...

Die x und y Position halte ich jedoch für wichtig falls man Kreise und andere Formen realisieren will.

@Sebastian W.
THX

SABAN

[bokel]

wg. x,y

Die Grafik ändert sich dadurch nicht,
aber so wie du es jetzt machst,
haben alle Kreise, d.h. deren Mcs
die Position 0,0.

mfg r.

[Madokan]

Kurz vor Jahreswechsel noch feine Skripte. Wer behauptet da noch das Mathe kein Spass macht.

Liebe Grüsse
Matze K.

[netTrek]

@bokel
Das Anwendungsbsp. ist nur ein dummy... mir geht es nur um die Methoden und ich muss damit rechnen, dass diese in einem anderen Zusammenhang benutzt werden und dann könnte x,y wichtig sein.

@Madokan
THX

SABAN

[netTrek]

Hier noch mal in Rad und einem "einfacheren" Anwendungsbsp.

// Kreis und Ellipsen Funktion
// netTrek - Saban Ünlü
MovieClip.prototype.ellipse = function(x, y, rx, ry, sgm) {
        sgm = sgm == undefined ? 8 : sgm;
        var periode = 2*Math.PI
        var sgmAngle = periode/sgm;
        var cRangle = sgmAngle/2;
        var cRx = rx/Math.cos(cRangle);
        var cRy = ry/Math.cos(cRangle);
        this.moveTo(x+rx, y);
        for (var angle = sgmAngle; angle<=periode; angle += sgmAngle) {
                var cX = x+Math.cos(angle-cRangle)*cRx;
                var cY = y+Math.sin(angle-cRangle)*cRy;
                var pX = x+Math.cos(angle)*rx;
                var pY = y+Math.sin(angle)*ry;
                this.curveTo(cX, cY, pX, pY);
        }
};
MovieClip.prototype.kreis = function(x, y, r, sgm) {
        this.ellipse(x, y, r, r, sgm);
};
// Anwenungsbeispiel
this.lineStyle(1);
// erst eine Ellipse
this.beginFill(0xFF0000,100);
    this.ellipse (50, 200, 100, 50);
this.endFill();
// dann eine Kreis
this.beginFill(0x0000FF,100);
    this.kreis (275, 200, 100);
this.endFill();
// dann wieder eine Ellipse
this.beginFill(0x00FF00,100);
    this.ellipse (450, 200, 50, 100);
this.endFill(); 

SABAN

[flory]

klasse, Saban!

sehr sinnvoll und schön klar und einfach aufgebaut.

Florian

[Madokan]

Yup und es zeigt mal wieder - wie viele tolle Ideen hier im Forum gepostet werden, die auch praktisch einzusetzen sind.

Liebe Grüsse
Matze K.