apache-flex - Adobe Air 应用程序中的圆角半径

Question

我们如何在 Air 应用程序中的 vbox 控件上制作圆角？

我隐藏了标题并将透明设置为 true，但是它没有显示应用程序中 VBox 上的圆角。我正在向用户展示这个 VBox。

提前致谢。

Answer 1

您可以通过实现自定义边框来做到这一点：

package your.package
{

  import flash.display.*;
  import flash.geom.*;
  import flash.utils.*;

  import mx.skins.halo.HaloBorder;
  import mx.utils.GraphicsUtil;

  public class RoundedBorder extends HaloBorder 
  {

    private var topCornerRadius:Number;
    private var bottomCornerRadius:Number;
    private var setup:Boolean;

    /**
     * Get the CSS style attributes from the element to which to apply this
     * gradient. 
     */
    private function readElementCssStyles():void
    {
      topCornerRadius = getStyle("cornerRadius") as Number;
      if (!topCornerRadius)
      { 
        topCornerRadius = 0;
      }    

      bottomCornerRadius = getStyle("bottomCornerRadius") as Number;
      if (!bottomCornerRadius) 
      {
        bottomCornerRadius = topCornerRadius;
      }  
    }

    /**
     * Paint the gradient background.
     *  
     * @param unscaledWidth
     * @param unscaledHeight
     * 
     */
    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
      super.updateDisplayList(unscaledWidth, unscaledHeight);   
      var rectWidth:Number 
          = unscaledWidth - this.borderMetrics.left - this.borderMetrics.right;
      var rectHeight:Number 
          = unscaledHeight - this.borderMetrics.top - this.borderMetrics.bottom; 

      readElementCssStyles();

      var topRadius:Number = Math.max(topCornerRadius-2, 0);
      var bottomRadius:Number = Math.max(bottomCornerRadius-2, 0);

      GraphicsUtil.drawRoundRectComplex(this.graphics, 
                                        this.borderMetrics.left, 
                                        this.borderMetrics.top, 
                                        rectWidth, 
                                        rectHeight, 
                                        topRadius, 
                                        topRadius, 
                                        bottomRadius, 
                                        bottomRadius);
    }

  }
}

然后在您的 MXML 应用程序中，您必须为您的 VBox 定义一个 CSS 类，如下所示：

  <mx:Style>
    .roundedBorder
    {
      border-style:solid;
      border-thickness: 1;
      border-skin: ClassReference("your.package.RoundedBorder");
      corner-radius: 5;
    }   
  </mx:Style>

我已经从一个更复杂的类中删除了这段代码。希望我没有忘记任何东西，并且它会像发布的那样工作。