现在的位置: 首页 > 综合 > 正文

Flex中如何通过dropShadowColor, shadowDirection和shadowDistance样式,创建一个有阴影效果的TextArea控件

2013年03月22日 ⁄ 综合 ⁄ 共 1515字 ⁄ 字号 评论关闭

  main.mxml

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2007/09/23/creating-drop-shadows-on-the-flex-textarea-control/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:ApplicationControlBar dock="true">
  9.         <mx:Form>
  10.             <mx:FormItem label="dropShadowEnabled:">
  11.                 <mx:CheckBox id="checkBox" selected="true" />
  12.             </mx:FormItem>
  13.             <mx:FormItem label="dropShadowColor:">
  14.                 <mx:ColorPicker id="colorPicker" />
  15.             </mx:FormItem>
  16.             <mx:FormItem label="shadowDirection:">
  17.                 <mx:ComboBox id="comboBox" selectedIndex="1">
  18.                     <mx:dataProvider>
  19.                         <mx:Array>
  20.                             <mx:Object label="left" />
  21.                             <mx:Object label="center" />
  22.                             <mx:Object label="right" />
  23.                         </mx:Array>
  24.                     </mx:dataProvider>
  25.                 </mx:ComboBox>
  26.             </mx:FormItem>
  27.             <mx:FormItem label="shadowDistance:">
  28.                 <mx:HSlider id="slider"
  29.                         minimum="-10"
  30.                         maximum="10"
  31.                         value="0"
  32.                         labels="[-10,-5,0,5,10]"
  33.                         liveDragging="true"
  34.                         snapInterval="1"
  35.                         tickInterval="2" />
  36.             </mx:FormItem>
  37.         </mx:Form>
  38.     </mx:ApplicationControlBar>
  39.  
  40.     <mx:TextArea id="textArea"
  41.             dropShadowEnabled="{checkBox.selected}"
  42.             dropShadowColor="{colorPicker.selectedColor}"
  43.             shadowDistance="{slider.value}"
  44.             shadowDirection="{comboBox.selectedItem.label}"
  45.             width="320"
  46.             height="120" />
  47.  
  48. </mx:Application>

抱歉!评论已关闭.