在 VBox 上设置特定的圆角半径答案

【问题标题】：set specific corner radius on VBox在 VBox 上设置特定的圆角半径
【发布时间】：2012-06-13 14:58:27
【问题描述】：

默认情况下，如果在VBox上设置cornerRadius，四个角都会生效。如何仅将cornerRadius应用于左下角和右下角？

【问题讨论】：

我怀疑您将不得不扩展组件来执行此操作；我不太确定它是如何在幕后实现的。如果您使用的是 Flex 4；您可以使用带有自定义外观的 BorderContainer 来完成此操作。

【解决方案1】：

扩展 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);


}

【讨论】：

感谢回答问题，好像不行。而且drawRoundRect()有6个参数，这里有7个参数。

【解决方案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();

        }


    }
}

【讨论】：

请查找我已修改的代码已从 MXML 标记中删除了 backgroundColor 属性。同样可以通过添加 setter 和 getter 属性并添加您定义的颜色来发送。

【解决方案3】：

在 flex3 中，我会使用边框皮肤而不是扩展 VBox。但我建议你选择 flex4（我的意见）。

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

在 flex4 中，

您必须使用皮肤类，并且 s:Rect 具有一个属性，您可以使用该属性将不同的角半径应用于所有四个角。

查看此链接：

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

您可以将 BorderContainer 与垂直布局一起使用。

从 VBox 开始，VGroup 也存在，但不支持蒙皮。（我的意思是没有定义 skinClass 属性）

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

SO BorderContainer 是带有垂直布局的 gud 1。

谢谢

安库尔

【讨论】：