Flex中如何通过strokeWidth, strokeColor和shadowColor样式创建一个自定义风格的HRule或VRule的例子

By Minidxer | October 20, 2008

接下来的例子演示了Flex中如何通过strokeWidth, strokeColor和shadowColor样式,创建一个自定义风格的HRule或VRule。

让我们先来看一下Demo可以右键View Source或点击这里察看源代码):


下面是完整代码(或点击这里察看):

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:ApplicationControlBar dock="true">
  8.         <mx:Form>
  9.             <mx:FormItem label="stokeWidth:">
  10.                 <mx:HSlider id="strokeWidthSlider"
  11.                         minimum="0"
  12.                         maximum="20"
  13.                         value="2"
  14.                         liveDragging="true"
  15.                         snapInterval="1"
  16.                         tickInterval="1"
  17.                         dataTipPrecision="0" />
  18.             </mx:FormItem>
  19.             <mx:FormItem label="strokeColor:">
  20.                 <mx:ColorPicker id="strokeColorColorPicker"
  21.                         selectedColor="red" />
  22.             </mx:FormItem>
  23.             <mx:FormItem label="shadowColor:">
  24.                 <mx:ColorPicker id="shadowColorColorPicker"
  25.                         selectedColor="blue" />
  26.             </mx:FormItem>
  27.         </mx:Form>
  28.     </mx:ApplicationControlBar>
  29.  
  30.     <mx:HRule id="hrule"
  31.             strokeWidth="{strokeWidthSlider.value}"
  32.             strokeColor="{strokeColorColorPicker.selectedColor}"
  33.             shadowColor="{shadowColorColorPicker.selectedColor}"
  34.             width="100%" />
  35.  
  36. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: Rule | No Comments » | Tags: , , , ,

Search Posts