Flex Gumbo中如何通过给fill属性设置一个LinearGradient对象创建一个线型斜度填充Ellipse的例子

By Minidxer | May 29, 2009

接下来的例子演示了Flex Gumbo中如何通过给fill属性设置一个LinearGradient对象,创建一个线型斜度填充Ellipse。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <FxApplication name="Ellipse_fill_LinearGradient_test"
  3.         xmlns="http://ns.adobe.com/mxml/2009">
  4.     <layout>
  5.         <BasicLayout />
  6.     </layout>
  7.  
  8.     <Form>
  9.         <FormItem label="color 1:">
  10.             <ColorPicker id="colorPicker1"
  11.                     selectedColor="red" />
  12.         </FormItem>
  13.         <FormItem label="alpha 1:">
  14.             <HSlider id="slider1"
  15.                     minimum="0.0"
  16.                     maximum="1.0"
  17.                     value="1.0"
  18.                     snapInterval="0.1"
  19.                     tickInterval="0.1"
  20.                     liveDragging="true" />
  21.         </FormItem>
  22.         <FormItem label="color 2:">
  23.             <ColorPicker id="colorPicker2"
  24.                     selectedColor="green" />
  25.         </FormItem>
  26.         <FormItem label="alpha 2:">
  27.             <HSlider id="slider2"
  28.                     minimum="0.0"
  29.                     maximum="1.0"
  30.                     value="1.0"
  31.                     snapInterval="0.1"
  32.                     tickInterval="0.1"
  33.                     liveDragging="true" />
  34.         </FormItem>
  35.         <FormItem label="color 3:">
  36.             <ColorPicker id="colorPicker3"
  37.                     selectedColor="blue" />
  38.         </FormItem>
  39.         <FormItem label="alpha 3:">
  40.             <HSlider id="slider3"
  41.                     minimum="0.0"
  42.                     maximum="1.0"
  43.                     value="1.0"
  44.                     snapInterval="0.1"
  45.                     tickInterval="0.1"
  46.                     liveDragging="true" />
  47.         </FormItem>
  48.     </Form>
  49.  
  50.     <Ellipse id="ellipse"
  51.             width="200"
  52.             height="300"
  53.             horizontalCenter="100"
  54.             verticalCenter="0">
  55.         <fill>
  56.             <LinearGradient>
  57.                 <GradientEntry id="gradientEntry1"
  58.                         color="{colorPicker1.selectedColor}"
  59.                         alpha="{slider1.value}" />
  60.                 <GradientEntry id="gradientEntry2"
  61.                         color="{colorPicker2.selectedColor}"
  62.                         alpha="{slider2.value}" />
  63.                 <GradientEntry id="gradientEntry3"
  64.                         color="{colorPicker3.selectedColor}"
  65.                         alpha="{slider3.value}" />
  66.             </LinearGradient>
  67.         </fill>
  68.     </Ellipse>
  69.  
  70. </FxApplication>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

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

Search Posts