zoukankan      html  css  js  c++  java
  • Flex调整文本的距离

    距离分为两种:

    水平间距:letterSpacing           在线示例

    垂直间距:leading                    在线示例

    还有一种,调整段落的缩进,与网页类似,使用textIndent属性

    letterSpacing示例代码:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- http://blog.flexexamples.com/2008/04/22/setting-the-letter-spacing-in-the-richtexteditor-control-in-flex/ -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    verticalAlign="middle"
    backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Style>
    .myTextAreaStyleName {
    fontFamily: Courier;
    letterSpacing: 3; /* pixels */
    }
    </mx:Style>

    <mx:Script>
    <![CDATA[
    import mx.events.SliderEvent;

    private function slider_change(evt:SliderEvent):void {
    var cssStyle:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".myTextAreaStyleName");
    cssStyle.setStyle("letterSpacing", evt.value);
    }
    ]]>
    </mx:Script>

    <mx:String id="str" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
    <mx:Form styleName="plain">
    <mx:FormItem label="letterSpacing:">
    <mx:HSlider id="slider"
    minimum="0"
    maximum="20"
    value="3"
    liveDragging="true"
    snapInterval="1"
    tickInterval="1"
    change="slider_change(event);" />
    </mx:FormItem>
    </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor"
    text="{str}"
    textAreaStyleName="myTextAreaStyleName"
    width="100%"
    height="100%" />

    </mx:Application>

    leading的示例代码:

    <?xml version="1.0" encoding="utf-8"?>
    <!-- http://blog.flexexamples.com/2008/05/31/setting-the-leading-on-a-text-control-in-flex/ -->
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="vertical"
    verticalAlign="top"
    backgroundColor="white" viewSourceURL="srcview/index.html">

    <mx:Script>
    <![CDATA[
    private function init():void {
    slider.value = txt.getStyle("leading");
    }
    ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
    <mx:Form styleName="plain">
    <mx:FormItem label="leading:" direction="horizontal">
    <mx:HSlider id="slider"
    minimum="0"
    maximum="10"
    snapInterval="1"
    tickInterval="1"
    liveDragging="true" />
    <mx:Label text="{slider.value}" />
    </mx:FormItem>
    <mx:FormItem label="height:">
    <mx:Label text="{txt.height}" />
    </mx:FormItem>
    </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Text id="txt"
    text="{lorem}"
    leading="{slider.value}"
    textAlign="justify"
    width="400"
    preinitialize="init();" />

    </mx:Application>

  • 相关阅读:
    Python inspect
    常见漏洞解析
    Linux安装常见问题
    Linux下查看系统信息
    (转)微信网页扫码登录的实现
    设计模式--六大原则
    Git 操作常用命令
    Scrapy工作原理
    PHP多维数组转一维
    归并排序(Python实现)
  • 原文地址:https://www.cnblogs.com/meteoric_cry/p/1977266.html
Copyright © 2011-2022 走看看