Genauigkeit von lineStyle

[hugeinc]

Hi zusammen,
ich bastel grad an nem Movie und da ist mir mit drawapi was aufgefallen. Ich will einen Innenrand auf der Stage von genau 10 Pixel haben.

breite=Stage.width
hoehe=Stage.height
 
rand=this.createEmptyMovieClip("border",0);
rand.lineStyle (10, 0xFFFFFF, 100);
rand.moveTo (0, 0);
rand.lineTo (breite, 0);
rand.lineTo (breite, hoehe);
rand.lineTo (0, hoehe);
rand.lineTo (0, 0); 

Ist nicht so toll, da ja der Mittelpunkt vom Movieclip genommen wird. Also versuch ich es damit:
rand.lineStyle (20, 0xFFFFFF, 100);
Mach ich jetzt einen Screenshot und mess in Poposhop den rand aus, habe ich einen Unterschied von einem Pixel im Verhältnis zur Höhe.
Setzte ich die Breite und die Höhe jeweils bei:
rand.lineStyle (10, 0xFFFFFF, 100);
minus fünf, passt es zwar, nur ist die 10 pix dicke Linie an den Ecken abgerundet.
Komisch, komisch.
Hat einer von euch vielleicht ne Erklärung dafür?
Ich weiss, ein "gemaltes" Rect wär einfacher, aber gescriptet find ich es halt sauberer.

Greets, Micha

[romän]

hi micha,

die Linienendpunkte sind in Flash immer abgerundet. Egal ob du sie mit der Drawing-API oder direkt auf der Bühne zeichnest.

Der Trick ist, ein Rechteck zeichnen zu lassen, dass die gesamte Breite der Bühne ausfüllt, und dann ein zweites kleineres in umgekehrter Richtung (also das erste z.B. im Uhrzeigersinn und das zweite gegen den Uhrzeigersinn). Dadurch schneidest du ein Loch in das große Rechteck.

Beispiel:

breite=Stage.width
hoehe=Stage.height
 
rd = 10 // --> rahmendicke;
 
rand=this.createEmptyMovieClip("border",0);
rand.beginFill(0);
// großes Rechteck zeichnen (im Uhrzeigersinn)
rand.moveTo (0, 0);
rand.lineTo (breite, 0);
rand.lineTo (breite, hoehe);
rand.lineTo (0, hoehe);
rand.lineTo (0, 0);
// kleines Rechteck zeichnen (gegen den Uhrzeigersinn)
rand.moveTo (rd, rd);
rand.lineTo (rd, hoehe - rd);
rand.lineTo (breite - rd, hoehe - rd);
rand.lineTo (breite - rd, rd);
rand.lineTo (rd, rd);
rand.endFill(); 

Das ganze kannst du natürlich auch als Prototypen definieren und dann auf alle beliebigen Movieclips anwenden:

/**
*   x = x-Position des Rahmens
*   y = y-Position des Rahmens
*   w = Breite des Rahmens
*   h = Höhe des Rahmens
*   t = Dicke des Rahmens
*   c = Farbe des Rahmens
*   a = Alphawert des Rahmens
*/
MovieClip.prototype.drawBorder = function(x, y, w, h, t, c, a){
    var wt  = w - t;  // hoehe - rahmendicke
    var ht  = h - t;  // breite - rahmendicke
    this.clear();
    this.beginFill(c, a);
    this.moveTo (x, y);
    this.lineTo (w, y);
    this.lineTo (w, h);
    this.lineTo (x, h);
    this.lineTo (x, y);
    this.moveTo (t, t);
    this.lineTo (t, ht);
    this.lineTo (wt, ht);
    this.lineTo (wt, t);
    this.lineTo (t, t);
    this.endFill();
};
 
breite=Stage.width
hoehe=Stage.height
 
rand=this.createEmptyMovieClip("border",0);
rand.drawBorder(0, 0, breite, hoehe, 10, 0, 100); 

gruß,
roman

<edit>
wenn schon als Prototype, dann auch mit Farb- und Alphaangaben. Ich hab's oben noch mal geändert
</edit>

[hugeinc]

Hi Roman,
wow, coole Idee, das mit dem "links herüm un rächts herüm".

helau

Nee, ernsthaft. 1000 Dank.

Greets, Micha

[hugeinc]

Opps,
noch was aufgefallen
In deinem Script definierst du "c" (=Farbe) mit dem Wert 0, d.h. der Rand wird schwarz.
Ich kenn es nur so, dass man die Color mit 0xFFFFFF etc. definieren kann.
Weisst du was, was ich nicht weiss?
Rand soll nämlich weiss werden.

[romän]

hi,

klar kannst anstelle von 0 auch 0x000000 schreiben. Da beides aber definitiv 0 ist und ich ne faule Sau bin, spar ich mir dadurch immer etwas Tipparbeit .

Du kannst wie gewohnt 0xFFFFFF für weiß oder 0xFF0000 für rot angeben.

gruß,
roman

[hugeinc]

> faul
Geht mir genauso :-)

> color
Hätt ja sein können, dass da noch was undokumentiertes ist.
Na ja, nochmal 1000 Dank.

Micha