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>

  • 相关阅读:
    hibernate中对象的3种状态:瞬时态(Transient)、 持久态(Persistent)、脱管态(Detached)
    object references an unsaved transient instance
    前端JS利用canvas的drawImage()对图片进行压缩
    js获取上传图片的尺寸大小
    多线程经典问题1——主线程子线程交替问题
    hdu 1689 Alien’s Necklace (bfs层次图剪枝)
    新炬数据库大师—暑期公益体验课
    怎样高速地安装Ubuntu SDK
    Spring boot 整合spring Data JPA+Spring Security+Thymeleaf框架(上)
    iOS 合并.a文件,制作通用静态库
  • 原文地址:https://www.cnblogs.com/meteoric_cry/p/1977266.html
Copyright © 2011-2022 走看看