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>

优质内容筛选与推荐>>
1、JSP
2、团队作业5——测试与发布(Alpha版本)
3、HttpClient调用webApi时注意的小问题
4、一些有用的连接
5、Windows系统下的TCP参数优化


长按二维码向我转账

受苹果公司新规定影响,微信 iOS 版的赞赏功能被关闭,可通过二维码转账支持公众号。

    阅读
    好看
    已推荐到看一看
    你的朋友可以在“发现”-“看一看”看到你认为好看的文章。
    已取消,“好看”想法已同步删除
    已推荐到看一看 和朋友分享想法
    最多200字,当前共 发送

    已发送

    朋友将在看一看看到

    确定
    分享你的想法...
    取消

    分享想法到看一看

    确定
    最多200字,当前共

    发送中

    网络异常,请稍后重试

    微信扫一扫
    关注该公众号





    联系我们

    欢迎来到TinyMind。

    关于TinyMind的内容或商务合作、网站建议,举报不良信息等均可联系我们。

    TinyMind客服邮箱:support@tinymind.net.cn