Форум Flasher.ru - Label c scale9 растровым фоном

Форум Flasher.ru (http://www.flasher.ru/forum/index.php)

- Flex (http://www.flasher.ru/forum/forumdisplay.php?f=84)

- - Label c scale9 растровым фоном (http://www.flasher.ru/forum/showthread.php?t=185529)

Label c scale9 растровым фоном

Нужно сделать группу c растровым фоном который ресайзится как 9 grid, но при этом окружает Label в зависимости от занимаемого текстом пространства. Пробовал несколько способов, все неудачные. Последний: для SkinnableContainer создается скин.

Код AS3:

<?xml version="1.0" encoding="utf-8"?>

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 

                xmlns:s="library://ns.adobe.com/flex/spark">

        <fx:Metadata>

                [HostComponent("spark.components.SkinnableContainer")]

        </fx:Metadata>

        <fx:Script>

                <![CDATA[

                        [Embed(source="assets/images/doc_bubble.png", scaleGridTop="25", scaleGridBottom="141",  scaleGridLeft="87", scaleGridRight="563" )]

                        [Bindable] public var bgImage:Class;

                ]]>

        </fx:Script>

        <s:states>

                <s:State name="disabled" />

                <s:State name="normal" />

        </s:states>

 

        <s:BitmapImage id="img" fillMode="clip" source="{bgImage}" scaleMode="stretch"/>

 

        <s:Group id="contentGroup">

                <s:layout>

                        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle"/>

                </s:layout>

                <s:Label id="lbl" text="zxcz zxc xcz zxc" width="100%"/>

        </s:Group>

</s:Skin>

В BitmapImage, есть баг (ну или фича такая), если в source передать Bitmap (или класс наследник Bitmap), то его scale9Grid игнорируется. Как вариант, использовать Image или патчить BitmapImage. Ну или свой BitmapImage сделать с бекджеком и scaleGrid :)

Добавлено через 4 минуты
Ну и что бы scaleGrid вообще работал fillMode должен быть BitmapFillMode.SCALE.

Пробовал и Image - тоже в скине не ресайзится. Все тоже самое делаю в составе компонента на основе Group - все работает как нужно.
Вот сделал резиновый колаут растягивающийся по вертикали в зависимости от полученного текста.

Код AS3:

<?xml version="1.0" encoding="utf-8"?>

<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 

                 xmlns:s="library://ns.adobe.com/flex/spark">

        <fx:Script>

                <![CDATA[

                import mx.events.FlexEvent;

                [Embed(source="assets/images/doc_bubble.png", scaleGridTop="25", scaleGridBottom="141",  scaleGridLeft="87", scaleGridRight="563" )]

                [Bindable] public var bgImage:Class;

                [Bindable] private var _calloutText:String;

 

                public function get calloutText():String

                {

                        return _calloutText;

                }

 

                public function set calloutText(value:String):void

                {

                        _calloutText = value;

                }

 

                protected function lbl_creationCompleteHandler(event:FlexEvent):void

                {

                        img.width = lbl.measuredWidth;

                        img.height = lbl.measuredHeight;

                }

                ]]>

        </fx:Script>

        <!--<s:Group scaleGridLeft="5" scaleGridRight="5" scaleGridTop="5" scaleGridBottom="5">

                <s:Path data="M 2 19 C 2 19 2 57 2 57 C 2 67 6 75 13 75 C 13 75 18 75 18 75 L 2 104 L 35 75 C 35 75 275 75 275 75 C 282 75 287 67 287 57 C 287 57 287 19 287 19 C 287 9 282 1 275 1 C 275 1 13 1 13 1 C 6 1 2 9 2 19 Z ">

                        <s:fill>

                                <s:SolidColor color="0xffffbf"/>

                        </s:fill>

                </s:Path>

        </s:Group>-->

        <s:BitmapImage id="img" source="{bgImage}" fillMode="scale" scaleMode="stretch" bottom="0" top="0" left="0" right="0"/>

        <s:Label top="10" left="10" right="10" bottom="30" id="lbl" text="{_calloutText}" verticalAlign="middle" creationComplete="lbl_creationCompleteHandler(event)"/>

</s:Group>

В примере используется созданная картинка колаута со снятыми размерами, но можно использовать и FXG (закомментирован).
Использование:

Код AS3:

<components:CalloutBubble width="100%" calloutText="This is my callout text"/>

Цитата:

Сообщение от Astraport (Сообщение 1099883)

Пробовал и Image - тоже в скине не ресайзится.

Ну так в скине (помимо fillMode) для BitmapImage не заданы размеры. (top, bottom, left, right).