代码之家 › 专栏 › 技术社区 › Herms

如何创建只有上角弯曲圆角的HBOX?

actionscript-3 flex

1

Herms · 技术社区 · 15 年前

我正在尝试创建一个 HBox 只有上角是圆形的。 Hbox (以及所有其他柔性容器)具有 cornerRadius 样式,但它适用于所有角。我看不出一种方法来指定各个角的样式。

是否有任何内置的方法来完成此操作,或者我需要编写自己的自定义绘图代码来绘制圆角背景?

2 回复 | 直到 15 年前

1

3

quoo 15 年前

这取决于你使用的是什么边界皮肤。如果您使用的是内置外观(haloborder),那么您可以指定一种样式“roundedboottomCorners”(布尔型),它允许您控制底角是否为圆角。如果您使用自己的边框外观,则可以添加任何想要控制拐角的样式。

2

3

Christian Nunciato 15 年前

唉,我唯一知道的解决方案是自己绘制背景,使用编程的皮肤——具体来说,orderriding 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中,这些东西变得容易得多),但是如果您遵循我的示例和文档中的代码,您应该能够将一些东西组合在一起。祝你好运!