Question

我正在尝试在flex中创建一个HBox，只有顶角为圆角。 HBox（以及所有其他Flex容器）具有cornerRadius样式，但它适用于所有角落。我没有看到指定个别角落风格的方法。

有没有内置方法可以做到这一点，还是我需要编写自己的自定义绘图代码来绘制带圆角的背景？

Answer 1

这取决于你正在使用的边缘皮肤。如果你正在使用内置皮肤（HaloBorder），你可以指定一个样式“roundedBottomCorners”（这是一个布尔值），它允许你控制底角是否圆角。如果你使用自己的边框皮肤，可以添加任何你想要控制角落的样式。

Answer 2

唉，我所知道的唯一解决方案就是使用Programmatic Skinning自己绘制背景 - 特别是，顺序设置RectangularBorder ::

package
{
    import mx.skins.RectangularBorder;

    public class HBoxSkin extends RectangularBorder
    {
        public function HBoxSkin()
        {
            super();
        }

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

            var cr:Number = getStyle("cornerRadius");
            var bc:Number = getStyle("backgroundColor");

            graphics.clear();
            graphics.beginFill(bc, 1);

            // Draw the rectangle manually, rounding only the top two corners
            graphics.drawRoundRectComplex(0, 0, unscaledWidth, unscaledHeight, cr, cr, 0, 0);
            graphics.endFill();
        }
    }
}

...然后使用HBox的borderSkin属性应用更改：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <!-- Apply the skin using the borderSkin property of your HBox -->
    <mx:HBox borderSkin="HBoxSkin" backgroundColor="#FFFFFF" cornerRadius="10" height="100" width="100" top="10" left="10" />

</mx:Application>

如何实现编程皮肤的Flex Documentation gives an example。不幸的是，它超出了初学者的水平（这些东西在Flex 4中变得更容易），但是如果你按照我的例子和文档中的代码，你应该能够得到一些东西。祝你好运！

如何创建HBox只有Flex中的圆角？

2 个答案: