0

デフォルトでは、cornerRadiusVBox に設定すると、4 つのコーナーすべてが影響を受けます。左下と右下にのみ cornerRadius を適用する方法は?

4

3 に答える 3

5

以下に示すように、VBox コンポーネントを拡張し、updateDisplayList メソッドをオーバーライドします。

override protected function updateDisplayList(unscaledWidth:Number, 
       unscaledHeight:Number):void 
{

   super.updateDisplayList(unscaledWidth, unscaledHeight);

   var cornerRadius:Number = getStyle("cornerRadius");
   var backgroundColor:int = getStyle("backgroundColor");
   var backgroundAlpha:Number = getStyle("backgroundAlpha");
   graphics.clear();

   // Background
   drawRoundRect(0, 0, unscaledWidth, unscaledHeight, 
       {tl: 0, tr: 0, bl: cornerRadius, br: cornerRadius}, 
       backgroundColor, backgroundAlpha);


}
于 2012-06-13T17:20:22.753 に答える
2

これを試してください: - 上記のコードを次のように変更します (コード -- user1367714)

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>

    <local:stackOverflowCornerRadious x="50" y="50" width="200" height="200"/>
</s:Application>

クラス名: - stackOverflowCornerRadious

package
{
    import flash.display.Sprite;

    import mx.containers.Box;
    import mx.containers.VBox;
    import mx.utils.GraphicsUtil;

    import spark.primitives.Rect;

    public class stackOverflowCornerRadious extends VBox
    {
        public function stackOverflowCornerRadious()
        {
            super();
        }

        override protected function updateDisplayList(unscaledWidth:Number, 
                                                      unscaledHeight:Number):void 
        {

            super.updateDisplayList(unscaledWidth, unscaledHeight);

            graphics.clear();
            graphics.beginFill(0x00FF00);
            GraphicsUtil.drawRoundRectComplex(graphics,0,0,unscaledWidth,unscaledHeight,0,0,10,10)
            graphics.endFill();

        }


    }
}
于 2012-06-14T09:25:47.183 に答える
2

flex3 では、VBox を拡張する代わりにボーダースキンを使用していたでしょう。ただし、flex4 を使用することをお勧めします (私の意見)。

================================================== ============================

flex4 では、

スキン クラスを使用する必要があり、s:Rect には、4 つの角すべてに異なる角の半径を適用できるプロパティがあります。

このリンクをチェックしてください：

http://blog.flexexamples.com/2009/10/11/setting-a-corner-radius-on-individual-corners-on-a-rect-in-flex-4/

垂直レイアウトで BorderContainer を使用できます。

VGroup も VBox の時点で存在しますが、それはスキニングをサポートしていません (skinClass プロパティが定義されていないことを意味します)。

<s:VGroup skinClass=""/>----not defined 
<s:BorderContainer skinClass="bcSkin"/>----defined, apply custom skin

SO BorderContainer は垂直レイアウトの gud 1 です。

ありがとう

アンクル

于 2012-06-14T09:00:17.040 に答える