Erstellen eines Flex-Panel-header mit einem Farbverlauf

Brauche ich eine "white box" (ich bin mit einem Panel, weil ich bin so nah dran, aber es könnte alles sein) mit allen vier Ecken abgerundet, und der Obere Teil der box haben muss, um einen Verlauf, der beginnt, eine Farbe (sagen wir rot) und endet mit der Hintergrundfarbe (weiß). Der Farbverlauf nicht nach unten gehen, die gesamte box.

Den beiden oberen Ecken bleiben muss gerundet, so dass der Farbverlauf füllen müssen diese gerundet Regionen zu.

Was ich habe, so weit ist ein mx:Panel mit den folgenden Stilen:

Panel { 
borderColor: #ffffff; 
borderAlpha: 1; 
borderThickness: 13; 
borderThicknessLeft: 0; 
borderThicknessTop: 0; 
borderThicknessBottom: 11; 
borderThicknessRight: 0; 
roundedBottomCorners: true; 
cornerRadius: 16; 
headerHeight: 50; 
backgroundAlpha: 1; 
highlightAlphas: 0.29, 0; 
headerColors: #999999, #ffffff; 
backgroundColor: #ffffff; 
dropShadowEnabled: false; 
}

Wie Sie sehen können, gibt es eine kleine single-pixel-Linie, die quer über den Kopf. Wenn ich nur loswerden, dass single-pixel-Linie, wäre das perfekt! Ich habe versucht, die änderung der borderStyle-Eigenschaft auf "solid" und noch nicht bekommen die richtige Kombination von Stilen, um loszuwerden, die Linie.

Habe ich auch versucht, mit einem anderen container mit einem Hintergrundbild für den Verlauf, aber die abgerundeten Ecken zu einem Problem werden.

Jede Hilfe wäre sehr geschätzt werden!

InformationsquelleAutor | 2009-08-01

  1. 2

    Den Schuldigen für die Zeile unter der Titelleiste ist eigentlich die Standard-titleBackgroundSkin im Zusammenhang mit der Panel-Komponente (mx.skins.halo.TitleBackground). Wenn Sie einen Blick auf die Quelle der updateDisplayList-Methode werden Sie einen Abschnitt sehen, wo zieht es den hintergrund, dass die folgenden Zeilen enthält:

                g.lineStyle(0, colorDark, borderAlpha);
            g.moveTo(0, h);
            g.lineTo(w, h);
            g.lineStyle(0, 0, 0);

    Wenn Sie erstellen Sie Ihre eigene Implementierung, die macht alles gleich, mit Ausnahme dieser Zeilen, Sie sollten bekommen, was Sie brauchen. Zumindest habe ich in meiner begrenzten test mit einem Farbverlauf header.

    Ich sehe die Linien in der sdk-code in Ordnung, aber ich weiß nicht, wie man erstellen Sie eine neue Implementierung des Codes, und flex verwenden, die neue Datei.. muss ich eine ganz neue Haut mit alles kopiert von Halo mit meine neue Datei anstelle der alten, und irgendwie link, die in meinem Projekt? Nicht, dass erhöhen meine swf-Datei in der Größe viel?
    Oh, es herausgefunden, mit der anderen Antwort: erstellen Sie einfach die neue Klasse in Ihr Projekt und verwenden (in der mxml): titleBackgroundSkin="meine.Paket.TitleBackground"

    InformationsquelleAutor JonPeace

  2. 2

    Folgende css wird entfernen Sie die Zeile, aber verhindert, dass Sie mit einem Farbverlauf header. 

    .richTextEditor
{
    titleBackgroundSkin: ClassReference("mx.skins.ProgrammaticSkin"); /** Gets rid of the line that was there **/
}
    Das hat, loszuwerden der Linie, aber auch losgeworden der header Farbverlauf. :\ Ich konnte einfach legen Sie den Verlauf in das Haut, obwohl, das wäre wieder zu der ursprünglichen Lösung vor und ich war neugierig, ob es eine nicht-programmatische-Haut-Lösung.
    Ah, sorry. Ich hatte nur die Linie und wollte es loswerden. Noch nützlich zu wissen, denke ich 🙂
    Gekennzeichnet offensive? Was? Upvote von mir, einfach nur da.
    Ich bearbeitet aus, der offensive Teil
    Ha, es dauerte ein paar Minuten, um herauszufinden, was war die offensive über. Vielen Dank 🙂

    InformationsquelleAutor Sean Clark Hess

  3. 0

    Ich habe nicht eine Lösung für das spezifische Panel-Problem vor, sondern ich habe eine Allgemeine Lösung, die für alle container: legen Sie ein Hintergrundbild mit bitmapFill und um die Ecken.

    Dies ist was für mich gearbeitet (über (eine programmgesteuerte skin):

    [styles.css]

    HBox { 
borderSkin: ClassReference("assets.programmatisch.GradientHeaderSkin"); 
}

    [GradientHeaderSkin.als]

    Paket Vermögen.programmatische 
{ 
import von flash.display.Bitmap; 
import von flash.display.BitmapData; 
import mx.skins.ProgrammaticSkin; 

public class GradientHeaderSkin erstreckt ProgrammaticSkin 
{ 
[Embed(source="../imgs/panelHeaderGradient.png")] 
private var _backgroundImageClass:Class; 
private var _backgroundBitmapData:BitmapData; 
private var _backgroundImage:Bitmap; 
private var _backgroundColor:uint; 

public function GradientHeaderSkin() 
{ 
super(); 

_backgroundImage = new _backgroundImageClass(); 
_backgroundBitmapData = new BitmapData(_backgroundImage.Breite, _backgroundImage.Höhe); 
} 

override protected function updateDisplayList(dass Sie die Eigenschaften unscaledWidth:Number, unscaledHeight:Number):void 
{ 
super.updateDisplayList(dass Sie die Eigenschaften unscaledWidth, unscaledHeight); 

_backgroundBitmapData.zeichnen(_backgroundImage); 
Grafik.clear(); 
Grafik.beginBitmapFill(_backgroundBitmapData, null, false, false); 

//geben Sie den Eckenradius hier 
diese.Grafik.drawRoundRectComplex(0, 0, dieser.Breite, diese.Höhe, 20, 20, 20, 20); 
} 

} 
}

    Hier ist auch ein Beispiel dafür, welchen Belastungen ein externes Bild:
    http://books.google.com/books?id=7fbhB_GlQEAC&pg=PA106&lpg=PA106&dq=flex+filling+rounded+corners+with+graphic&source=bl&ots=HU_jainH4F&sig=F793bjL0a4nU5wx5wq608h_ZPr0&hl=en&ei=GQd3Spi-OYiYMcLDyLEM&sa=X&oi=book_result&ct=result&resnum=1#v=onepage&q=&f=false

    InformationsquelleAutor

Schreibe einen Kommentar