PDA

Просмотр полной версии : Label c scale9 растровым фоном


Astraport
14.10.2012, 16:18
Нужно сделать группу c растровым фоном который ресайзится как 9 grid, но при этом окружает Label в зависимости от занимаемого текстом пространства. Пробовал несколько способов, все неудачные. Последний: для SkinnableContainer создается скин.
<?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>

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

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

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

<?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 (закомментирован).
Использование:
<components:CalloutBubble width="100%" calloutText="This is my callout text"/>

alatar
14.10.2012, 20:06
Пробовал и Image - тоже в скине не ресайзится.
Ну так в скине (помимо fillMode) для BitmapImage не заданы размеры. (top, bottom, left, right).