1

四隅すべてが丸みを帯びた白いボックスが必要です (私は非常に近いのでパネルを使用していますが、それは何でもかまいません)。ボックスの上部には、1 つの色から始まるグラデーションが必要です (グレーと言う) となり、最終的に背景色 (白) になります。グラデーションはボックス全体には行きません。

上の 2 つの角は丸みを帯びたままにする必要があるため、グラデーションはこれらの丸みを帯びた領域も埋める必要があります。

これまでのところ、次のスタイルの mx:Panel があります。

パネル {
   ボーダーカラー: #ffffff;
   ボーダーアルファ: 1;
   ボーダーの太さ: 13;
   borderThicknessLeft: 0;
   borderThicknessTop: 0;
   borderThicknessBottom: 11;
   borderThicknessRight: 0;
   roundedBottomCorners: 真;
   コーナー半径: 16;
   ヘッダーの高さ: 50;
   背景アルファ: 1;
   ハイライトアルファ: 0.29, 0;
   headerColors: #999999、#ffffff;
   backgroundColor: #ffffff;
   dropShadowEnabled: false;
}

ご覧のとおり、ヘッダーを横切る小さな単一ピクセルの線が 1 本あります。その単一ピクセルの線を取り除くことができれば、完璧です! borderStyle プロパティを「solid」に変更しようとしましたが、その線を取り除くための適切なスタイルの組み合わせを取得できません。

グラデーション用の背景画像を含む別のコンテナも使用してみましたが、角が丸くなっていることが問題になります。

どんな助けでも大歓迎です！

4

3 に答える 3

2

タイトル バーの下の行の原因は、実際には、Panel コンポーネント (mx.skins.halo.TitleBackground) に関連付けられているデフォルトの titleBackgroundSkin です。updateDisplayList メソッドのソースを見ると、次の行を含む背景を描画するセクションが表示されます。

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

これらの行を除いてすべて同じことを行う独自の実装を作成すると、必要なものが得られるはずです。少なくとも、グラデーションヘッダーを使用した限られたテストケースで行いました。

于 2010-01-26T20:03:39.723 に答える
2

次の css は行を削除しますが、グラデーション ヘッダーを使用できなくなります。

.richTextEditor
{
    titleBackgroundSkin: ClassReference("mx.skins.ProgrammaticSkin"); /** Gets rid of the line that was there **/
}
于 2009-08-17T20:47:04.220 に答える
0

上記の特定のパネルの問題に対する解決策は見つかりませんでしたが、どのコンテナーでも機能する全体的な解決策を見つけました: bitmapFill を使用して背景画像を設定し、角を丸めます。

これは私にとってうまくいったものです（プログラムスキンを使用）：

[スタイル.css]

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

[GradientHeaderSkin.as]

パッケージ assets.programmatic
{
    flash.display.Bitmap をインポートします。
    flash.display.BitmapData をインポートします。
    mx.skins.ProgrammaticSkin をインポートします。

    public class GradientHeaderSkin は ProgrammaticSkin を拡張します
    {
        [Embed(source=".​​./imgs/panelHeaderGradient.png")]
        プライベート var _backgroundImageClass:クラス;
        プライベート var _backgroundBitmapData:BitmapData;
        プライベート var _backgroundImage:Bitmap;
        プライベート var _backgroundColor:uint;

        パブリック関数 GradientHeaderSkin()
        {
            素晴らしい（）;

            _backgroundImage = 新しい _backgroundImageClass();
            _backgroundBitmapData = new BitmapData(_backgroundImage.width, _backgroundImage.height);
        }

        保護された関数のオーバーライド updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            _backgroundBitmapData.draw(_backgroundImage);
            グラフィックス.クリア();
            graphics.beginBitmapFill(_backgroundBitmapData, null, false, false);

            // ここで角の半径を指定
            this.graphics.drawRoundRectComplex(0, 0, this.width, this.height, 20, 20, 20, 20);
        }

    }
}

外部画像をロードする例もここにあります: 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=1ページ&q=&f=false

于 2009-08-03T17:45:49.040 に答える