Flex中如何通过dropShadowColor, shadowDirection和shadowDistance样式创建一个有阴影效果的TextArea控件的例子
By Minidxer | September 24, 2008
接下来的例子演示了Flex中如何通过dropShadowColor, shadowDirection和shadowDistance样式,创建一个有阴影效果的TextArea控件。
让我们先来看一下Demo(可以右键View Source或点击这里察看源代码):
下面是完整代码(或点击这里察看):
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <!-- http://blog.flexexamples.com/2007/09/23/creating-drop-shadows-on-the-flex-textarea-control/ -->
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
- layout="vertical"
- verticalAlign="middle"
- backgroundColor="white">
- <mx:ApplicationControlBar dock="true">
- <mx:Form>
- <mx:FormItem label="dropShadowEnabled:">
- <mx:CheckBox id="checkBox" selected="true" />
- </mx:FormItem>
- <mx:FormItem label="dropShadowColor:">
- <mx:ColorPicker id="colorPicker" />
- </mx:FormItem>
- <mx:FormItem label="shadowDirection:">
- <mx:ComboBox id="comboBox" selectedIndex="1">
- <mx:dataProvider>
- <mx:Array>
- <mx:Object label="left" />
- <mx:Object label="center" />
- <mx:Object label="right" />
- </mx:Array>
- </mx:dataProvider>
- </mx:ComboBox>
- </mx:FormItem>
- <mx:FormItem label="shadowDistance:">
- <mx:HSlider id="slider"
- minimum="-10"
- maximum="10"
- value="0"
- labels="[-10,-5,0,5,10]"
- liveDragging="true"
- snapInterval="1"
- tickInterval="2" />
- </mx:FormItem>
- </mx:Form>
- </mx:ApplicationControlBar>
- <mx:TextArea id="textArea"
- dropShadowEnabled="{checkBox.selected}"
- dropShadowColor="{colorPicker.selectedColor}"
- shadowDistance="{slider.value}"
- shadowDirection="{comboBox.selectedItem.label}"
- width="320"
- height="120" />
- </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子
Topics:
Flex |
Tags: dropShadowColor, dropShadowEnabled, shadowDirection, shadowDistance, TextArea