Flex Gumbo中如何通过给LinearGradient对象设置x,y属性设置Ellipse的线性坐标原点的例子

By Minidxer | May 29, 2009

接下来的例子演示了Flex Gumbo中如何通过给LinearGradient对象设置x,y属性,设置Ellipse的线性坐标原点。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <Application name="LinearGradient_x_test"
  3.         xmlns="http://ns.adobe.com/mxml/2009"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <ApplicationControlBar dock="true">
  9.         <Form styleName="plain">
  10.             <FormItem label="x:">
  11.                 <HSlider id="xSlider"
  12.                         minimum="-100"
  13.                         maximum="100"
  14.                         value="0"
  15.                         snapInterval="1"
  16.                         tickInterval="25"
  17.                         liveDragging="true" />
  18.             </FormItem>
  19.             <FormItem label="y:">
  20.                 <HSlider id="ySlider"
  21.                         minimum="-100"
  22.                         maximum="100"
  23.                         value="0"
  24.                         snapInterval="1"
  25.                         tickInterval="25"
  26.                         liveDragging="true" />
  27.             </FormItem>
  28.             <FormItem label="rotation:">
  29.                 <HSlider id="rotationSlider"
  30.                         minimum="-360"
  31.                         maximum="360"
  32.                         value="0"
  33.                         snapInterval="1"
  34.                         tickInterval="45"
  35.                         liveDragging="true" />
  36.             </FormItem>
  37.         </Form>
  38.     </ApplicationControlBar>
  39.  
  40.     <Graphic>
  41.         <Ellipse id="ellipse" width="300" height="200">
  42.             <fill>
  43.                 <LinearGradient id="linearGrad"
  44.                         x="{xSlider.value}"
  45.                         y="{ySlider.value}"
  46.                         rotation="{rotationSlider.value}">
  47.                     <GradientEntry color="red" />
  48.                     <GradientEntry color="white" />
  49.                     <GradientEntry color="blue" />
  50.                 </LinearGradient>
  51.             </fill>
  52.         </Ellipse>
  53.     </Graphic>
  54.  
  55. </Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: Ellipse, Gumbo | No Comments » | Tags: , , , ,

Search Posts