如何动态更改flex应用程序的字体大小?

时间:2012-04-24 10:09:03

标签: actionscript-3 flex flex4 flex3 flex4.5

我想在按钮点击时动态更改应用程序的字体大小。

有什么想法吗?请指导我们

全部谢谢

3 个答案:

答案 0 :(得分:0)

这是在按钮点击时增加字体大小的代码...检查

<mx:Label id="lb" text="INDIA"/>
<mx:Button label="change" click="button1_clickHandler(event)"/>


protected function button1_clickHandler(event:MouseEvent):void
{
    lb.setStyle('fontSize',Number(lb.getStyle('fontSize'))+5);
}


lb.setStyle('fontSize',Number(lb.getStyle('fontSize'))+5);

从标签获取之前的字体值,并将其增加5并再次设置...

你可以直接设置取前一个fontsize的值instate

lb.setStyle('fontSize',Math.random()*200);

答案 1 :(得分:0)

这可以帮助你...

[Bindable]private var _size:Number = 10;

protected function button1_clickHandler(event:MouseEvent):void
{
        _size = _size+10;
}

<mx:Label id="lb" text="INDIA" fontSize="{_size}"/>
<mx:Label id="lb1" text="I love India" fontSize="{_size}"/>

<mx:Button label="change" click="button1_clickHandler(event)" />

答案 2 :(得分:0)

以下是Maxim Kachurovskiy

使用CSS的一些代码

(这不是我的,部分弃用,但效果很好):

enter image description here

<强> FontSize.mxml:

<?xml version="1.0" encoding="utf-8"?>
<!-- (c) Maxim Kachurovskiy -->
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    addedToStage="addedToStageHandler();"
    initialize="fontSize = 11;">

    <mx:Style>
        .header {
            font-weight: bold;
            fontSizeDelta: 5;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private var _fontSize:Number;

            [Bindable("fontSizeChange")]
            public function get fontSize():Number {
                return _fontSize;
            }

            public function set fontSize(value:Number):void {
                if (_fontSize == value)
                    return;

                _fontSize = value;
                applyFontSize(_fontSize);
                dispatchEvent(new Event('fontSizeChange'));
            }

            private function applyFontSize(fontSize:Number):void {
                var selectors:Array = StyleManager.selectors;
                for each (var selector:String in selectors) {
                    var declaration:CSSStyleDeclaration = StyleManager.getStyleDeclaration(selector);
                    var delta:Number = declaration.getStyle('fontSizeDelta');
                    if (delta) {
                        declaration.setStyle('fontSize', fontSize + delta);
                        StyleManager.setStyleDeclaration(selector, declaration, true);
                    }
                }

                var global:CSSStyleDeclaration = StyleManager.getStyleDeclaration('global');
                if (!global)
                    global = new CSSStyleDeclaration('global');
                global.setStyle('fontSize', fontSize);
                StyleManager.setStyleDeclaration('global', global, true);
            }

            private function addedToStageHandler():void {
                stage.addEventListener(KeyboardEvent.KEY_UP, my_keyUpHandler);
            }

            private function my_keyUpHandler(event:KeyboardEvent):void {
                if (event.ctrlKey) {
                    var keyCode:uint = event.keyCode;
                    if (keyCode == 107 || keyCode == 187 || keyCode == 38)
                        fontSize++;
                    else if (keyCode == 109 || keyCode == 189 || keyCode == 40)
                        fontSize--;
                }
            }
        ]]>
    </mx:Script>

    <mx:Panel title="Font size change" layout="vertical"
              horizontalCenter="0" verticalCenter="0" paddingBottom="10"
              paddingLeft="10" paddingRight="10" paddingTop="10">
        <mx:HBox horizontalGap="10">
            <mx:Label text="Font size:" styleName="header"/>
            <mx:NumericStepper id="numericStepper" value="{fontSize}" 
               change="{fontSize = numericStepper.value;}" maximum="100" minimum="1"/>
        </mx:HBox>
        <mx:Label text="Ctrl+/- adjust font size too."/>
    </mx:Panel>
</mx:Application>