Flex Gumbo中如何通过给fill属性设置一个LinearGradient对象创建一个线型斜度填充Ellipse的例子
By Minidxer | May 29, 2009
接下来的例子演示了Flex Gumbo中如何通过给fill属性设置一个LinearGradient对象,创建一个线型斜度填充Ellipse。
让我们先来看一下Demo(可以右键View Source或点击这里察看源代码):
下面是完整代码(或点击这里察看):
Download: main.mxml
- <?xml version="1.0" encoding="utf-8"?>
- <FxApplication name="Ellipse_fill_LinearGradient_test"
- xmlns="http://ns.adobe.com/mxml/2009">
- <layout>
- <BasicLayout />
- </layout>
- <Form>
- <FormItem label="color 1:">
- <ColorPicker id="colorPicker1"
- selectedColor="red" />
- </FormItem>
- <FormItem label="alpha 1:">
- <HSlider id="slider1"
- minimum="0.0"
- maximum="1.0"
- value="1.0"
- snapInterval="0.1"
- tickInterval="0.1"
- liveDragging="true" />
- </FormItem>
- <FormItem label="color 2:">
- <ColorPicker id="colorPicker2"
- selectedColor="green" />
- </FormItem>
- <FormItem label="alpha 2:">
- <HSlider id="slider2"
- minimum="0.0"
- maximum="1.0"
- value="1.0"
- snapInterval="0.1"
- tickInterval="0.1"
- liveDragging="true" />
- </FormItem>
- <FormItem label="color 3:">
- <ColorPicker id="colorPicker3"
- selectedColor="blue" />
- </FormItem>
- <FormItem label="alpha 3:">
- <HSlider id="slider3"
- minimum="0.0"
- maximum="1.0"
- value="1.0"
- snapInterval="0.1"
- tickInterval="0.1"
- liveDragging="true" />
- </FormItem>
- </Form>
- <Ellipse id="ellipse"
- width="200"
- height="300"
- horizontalCenter="100"
- verticalCenter="0">
- <fill>
- <LinearGradient>
- <GradientEntry id="gradientEntry1"
- color="{colorPicker1.selectedColor}"
- alpha="{slider1.value}" />
- <GradientEntry id="gradientEntry2"
- color="{colorPicker2.selectedColor}"
- alpha="{slider2.value}" />
- <GradientEntry id="gradientEntry3"
- color="{colorPicker3.selectedColor}"
- alpha="{slider3.value}" />
- </LinearGradient>
- </fill>
- </Ellipse>
- </FxApplication>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子
Topics:
Ellipse, Gumbo |
No Comments » |
Tags: Ellipse, fill, GradientEntry, Gumbo