Rahmen mit abgerundeten Ecken

[visioncom]

Hallo Zusammen

Ich versuch nun seite einiger Zeit. Einen Rahmen per AS zuzeichnen bei dem dem die Ecken mit einem Radius von 20 Abgerundet sind. Kriege es aber einfach nicht hin. Kann mir da jemand helfen?

Mein AS

PHP-Code:

            // Line
            pMC.mc_rahmen.moveTo( 0, 20 )
            pMC.mc_rahmen.lineTo( 0, hoehe-r );
            pMC.mc_rahmen.curveTo( 0, hoehe, r, hoehe );
            pMC.mc_rahmen.lineTo(  breite-r, hoehe );
            pMC.mc_rahmen.curveTo( breite, hoehe, breite, hoehe-r );
            pMC.mc_rahmen.lineTo( breite, r ); 


Danke jetzt schon für die Unterstützung.

Gruss
Chris

[andretti]

aloha!

ob das nun 20 radius sind, weiß ich net;
ich kann's nur so:

PHP-Code:

this.createEmptyMovieClip("MC_rahmen", 4000);
_root.MC_rahmen._x = _root.MC_rahmen._y=50;
with (_root.MC_rahmen) {
    moveTo(20, 0);
    lineStyle(4, 0xCCCC33, 100);
    beginFill(0xCC3300);
    lineTo(180, 0);
    curveTo(200, 0, 200, 20);
    lineTo(200, 180);
    curveTo(200, 200, 180, 200);
    lineTo(20, 200);
    curveTo(0, 200, 0, 180);
    lineTo(0, 20);
    curveTo(0, 0, 20, 0);
    endFill();
} 


[hgseib]

dito als prototype:
http://www.seibsprogrammladen.de/fra...gm/Algorithmen

[visioncom]

Danke für eure Hilfe. Habe versucht die Lösung von andretti anzupassen.
Und zwar mit den Variblen Radius, Breite und Höhe. Leider habe ich es nicht hinbekommen. Kann mir da jemand noch helfen?

Gruss
chris

[andretti]

der prototype von hgseib ist doch eh genial:

PHP-Code:

MovieClip.prototype.rundesRechteck = function(x, y, h, b, r, lin, linColor, flaColor) {
    var h2 = h/2, b2 = b/2, yr = h2-r, xr = b2-r;
    lineStyle(lin, linColor), beginFill(flaColor, 100);
    moveTo(x-xr, y-h2);
    lineTo(x+xr, y-h2), curveTo(x+b2, y-h2, x+b2, y-yr);
    lineTo(x+b2, y+yr), curveTo(x+b2, y+h2, x+xr, y+h2);
    lineTo(x-xr, y+h2), curveTo(x-b2, y+h2, x-b2, y+yr);
    lineTo(x-b2, y-yr), curveTo(x-b2, y-h2, x-xr, y-h2);
    endFill();
};
//
_root.rundesRechteck(330, 250, 200, 400, 5,2, 0x00CC00, 0x3333FF); 


[visioncom]

Eigentlich ist die Funktion gut. Jedoch wird das Viereck um die Koordination herum gebaut. Das ist nicht das was ich möchte...

[hgseib]

manchmal weiss ich nicht, ob ich lachen oder weinen soll ...

was willst du denn? das das rechteck von der linken oberen ecke gezeichnet wird?

b=400;
h=200;
r=20;
x=300+b/2; // bzw. ergänze diese hochkomplexe berechnung im prototype
y=300+h/2;
linColor=0;
flaColor=0xffffff;
_root.rundesRechteck(x, y, h, b, r, lin, linColor, flaColor);

[visioncom]

Mir geht es gleich...

Das habe ich mir doch auch gedacht. Hier mein code:

PHP-Code:

MovieClip.prototype.rundesRechteck = function(mc, x, y, h, b, r, lin, linColor, flaColor) {
    var h2 = h/2, b2 = b/2, yr = h2-r, xr = b2-r;
    
    mc.createEmptyMovieClip( "mc_rahmen", 1 );
    
    
    with( mc.mc_rahmen ){
        _y = y+h2+(lin/2);
        _x = x+b2+(lin/2);
        
        lineStyle(lin, linColor), beginFill(flaColor, 100);
        moveTo(x-xr, y-h2);
        lineTo(x+xr, y-h2), curveTo(x+b2, y-h2, x+b2, y-yr);
        lineTo(x+b2, y+yr), curveTo(x+b2, y+h2, x+xr, y+h2);
        lineTo(x-xr, y+h2), curveTo(x-b2, y+h2, x-b2, y+yr);
        lineTo(x-b2, y-yr), curveTo(x-b2, y-h2, x-xr, y-h2);
        endFill();
    }
};
//
_root.rundesRechteck(this, 50, 20, 50, 50, 5,2, 0x00CC00, 0x3333FF);  
//this.test( this, 10, 10, 180, 50, 20, 2, 0x00FF00, null ); 


Die Postionierung stimmt jedoch hinten und vorne nicht. Daher meine Frage. Die X-/Y- Koordinaten sollen auf dem MC_Rahmen eingehen und nicht auf die Linien. Das ist mein Problem. Aber ich kriege es einfach nicht gepacken...

[hgseib]

"..Die X-/Y- Koordinaten sollen auf dem MC_Rahmen eingehen und nicht auf die Linien.."
mein schweizerisch ist doch nicht so gut, wie ich dachte ;-) ich verstehe nur fondue.
meinst du sowas:

MovieClip.prototype.rundesRechteck = function(x, y, h, b, r, lin, linColor, flaColor) {
	with (this) {
		var h2 = h/2, b2 = b/2, yr = h2-r, xr = b2-r;
		x += b2, y += h2;
		lineStyle(lin, linColor);
		if (flaColor!=null) beginFill(flaColor, 100);
		moveTo(x-xr, y-h2);
		lineTo(x+xr, y-h2), curveTo(x+b2, y-h2, x+b2, y-yr);
		lineTo(x+b2, y+yr), curveTo(x+b2, y+h2, x+xr, y+h2);
		lineTo(x-xr, y+h2), curveTo(x-b2, y+h2, x-b2, y+yr);
		lineTo(x-b2, y-yr), curveTo(x-b2, y-h2, x-xr, y-h2);
		if (flaColor!=null) endFill();
	}
};
// 
_root.createEmptyMovieClip("rahmen1_mc", 1);
_root.rahmen1_mc.rundesRechteck(0, 0, 200, 200, 30, 2, 0x00CC00, 0x3333FF);
_root.rahmen1_mc.onPress = startDrag;
_root.rahmen1_mc.onRelease = stopDrag;
//
_root.createEmptyMovieClip("rahmen2_mc", 2);
_root.rahmen2_mc.rundesRechteck(250, 120, 300, 50, 5, 2, 0x00CC00, 0xff3300);
_root.rahmen2_mc.onPress = startDrag;
_root.rahmen2_mc.onRelease = stopDrag;

das "with (this) {..}" fehlt allerdings auf meiner html-seite. werd ich gleich mal ergänzen.

[visioncom]

Mit Fondue legst du die Gabel schon in die korrekte Richtung.
Mein Prototyp soll auf einem Mitgegebenen MC einen Rahmen erstellen. daher mache ich im Prototyp einen neuen MC auf dem der Rahmen erstellt werden soll. Die Ausrichtung ist noch nicht ganz Korrekt in deinem Prototyp. Schau dir mal den Rahmen an. Warum baust due eigentlich den Rahmen um die Mitgegebenen Koordinaten herum?

gruss
Christian

[hgseib]

???
du meinst die linienbreite? die setzt flash mittig. ist auf der bühne genauso, wenn du ein rechteck aufziehst.
(wusste nicht, das du mit einem schweizer offiziersmesser nachmisst ;-)
ist allgemein üblich, weil man so objekte aneinander legen kann. nach deiner methode ergibt es doppelte linien. du siehst also: 'richtig' ist relativ.

wenn du das nicht willst, dann mach halt das rechteck entsprechend kleiner:

MovieClip.prototype.rundesRechteck = function(x, y, h, b, r, lin, linColor, flaColor) {
	with (this) {
		lineStyle(lin, linColor);
		lin /= 2, r -= lin;
		h=h/2-lin, b=b/2-lin, yr=h-r, xr=b-r;
		x += b+lin, y += h+lin;
		if (flaColor != null) {
			beginFill(flaColor, 100);
		}
		moveTo(x-xr, y-h);
		lineTo(x+xr, y-h), curveTo(x+b, y-h, x+b, y-yr);
		lineTo(x+b, y+yr), curveTo(x+b, y+h, x+xr, y+h);
		lineTo(x-xr, y+h), curveTo(x-b, y+h, x-b, y+yr);
		lineTo(x-b, y-yr), curveTo(x-b, y-h, x-xr, y-h);
		if (flaColor != null) {
			endFill();
		}
	}
};
// 
_root.createEmptyMovieClip("rahmen1_mc", 1);
_root.rahmen1_mc.rundesRechteck(0, 0, 200, 200, 60, 18, 0x00CC00, 0x3333FF);
_root.rahmen1_mc.onPress = startDrag;
_root.rahmen1_mc.onRelease = stopDrag;

p.s.
der radius ist auch nicht exakt rund - will's nur gesagt haben ;-)

[visioncom]

Okey. Ich versuche es einmal von einer anderen Seite. Der ganze Prototyp soll am schluss folgendes erstellen (siehe bild). Daher ist die Ausrichtung an den Null-Punkt wichtig. Und daher muss auch die Rahmenbereite einbezogen werden.
Oder will ich da etwas erstellen, was man vielleichter erstellen kann?

rahmen.jpg

Gruss
Christian

[hgseib]

jetzt nur nicht in panik geraten.
du hasst einmal das script in meinem letzten beitrag getestet ?
das unter dem text: wenn du das nicht willst, dann mach halt das rechteck entsprechend kleiner

[visioncom]

nei leider noch nicht. habe momentan kein flash im zugriff...