Как создать HBox только с закругленными во Flex верхними углами?

Question

Я пытаюсь создать HBox в флексе, у которого закруглены только верхние углы. HBox (и все остальные flex-контейнеры) имеют стиль cornerRadius, но он применяется ко всем углам. Я не вижу способа указать стиль отдельных углов.

Есть ли какой-нибудь встроенный способ сделать это, или мне нужно написать свой собственный код для рисования фона с закругленными углами?

Answer 1

Увы, единственное решение, которое я знаю, это нарисовать фон самостоятельно, используя 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();
        }
    }
}

... и затем применить изменение, используя свойство borderSkin вашего HBox:

<?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 дает пример о том, как реализовать программный скиннинг. К сожалению, это за пределами начального уровня (в Flex 4 это становится намного проще), но если вы будете следовать коду в моем примере и в документации, вы сможете что-то собрать. Удачи!

Answer 2

Зависит от того, какую оболочку вы используете. Если вы используете встроенные скины (HaloBorder), есть стиль, который вы можете указать «roundedBottomCorners» (который является логическим), который позволяет вам контролировать, закруглены ли нижние углы или нет. Если вы используете свой собственный скин бордюра, вы можете добавить любые стили, которые вы хотите контролировать углы.