gradientcanvasexample.mxml

Flex渐变色Canvas

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ve="*" viewSourceURL="srcview/index.html">
	<mx:Script>
		<![CDATA[
		[Bindable]
		public var types:Array = [{label:"Linear", data:GradientType.LINEAR}, {label:"Radial", data:GradientType.RADIAL} ];

		]]>
	</mx:Script>
	<mx:HBox height="100%" width="100%">
		<mx:Panel width="300" height="100%" layout="absolute">
			<mx:Label text="startColor" y="2"/>
			<mx:ColorPicker id="clrStartColor" selectedColor="#CCCCFF" x="67"/>
			<mx:Label text="endColor" x="124" y="2"/>
			<mx:ColorPicker  id="clrEndColor" selectedColor="#000066" x="187" y="0"/>
			<mx:Label text="angle" x="143" y="32"/>
			<mx:TextInput id="tbxAngle" text="45" x="187" y="30" width="45"/>
			<mx:ComboBox id="cbxType" x="45" y="30" dataProvider="{types}" selectedIndex="0"/>
			<mx:Label x="0" y="32" text="Type"/>
			<mx:Label text="X Offset" x="0" y="60"/>
			<mx:TextInput id="tbxOffsetX" text="0" x="58" y="58" width="45"/>
			<mx:Label text="Y Offset" x="129" y="60"/>
			<mx:TextInput id="tbxOffsetY" text="0" x="187" y="58" width="45"/>
			<mx:TextArea left="10" top="134" right="10" bottom="10" editable="false">
	            <mx:htmlText>
	                <![CDATA[
Use this anywhere in place of a Canvas container.

Additional Attributes
<ul>
<li>startColor,endColor:  The colors to use for the gradient.  This is the simple method.  If you need more than two colors, or want to adjust the opacity/distribution of the colors. Use the array attributes.</li>
<li>angle: if type="Linear" the angle (in degrees) at which the gradient is applied.  Ignored if type="Radial"</li>
<li>offsetX, offsetY:  the number of pixels to offset the gradient in the X and Y axes, respectively.</li>
<li>colorArray:  An array of colors to apply to the gradient.  This value overrides the values of startColor and endColor</li>
<li>opacityArray:  An array of opacity values to apply to the colors in colorArray.  0 = fully transparent.  1 = fully opaque.  Must have the same number of elements as colorArray</li>
<li>midpointArray:  An array of values describing where the midpoint of each color should appear, i.e. where the color is fully represented.  Possible values are 0-255 where 0 = "all the way at the beginning" and 255 = "all the way at the end".  Must have the same number of elements as colorArray.</li>
	                ]]>
	            </mx:htmlText>
			</mx:TextArea>
			<mx:Button x="23" y="86" label="View Example of Advanced Features" click="miniGC.visible=!miniGC.visible"/>
		</mx:Panel>
		<mx:Panel width="100%" height="100%">
			<ve:GradientCanvas id="gc" width="100%" height="100%" startColor="{clrStartColor.selectedColor}" endColor="{clrEndColor.selectedColor}" angle="{int(tbxAngle.text)}" type="{cbxType.selectedItem.data}" offsetX="{int(tbxOffsetX.text)}" offsetY="{int(tbxOffsetY.text)}">
				<mx:Label text="You can place any other controls or containers in here." height="18" y="0" width="309" x="0"/>
				<ve:GradientCanvas id="miniGC" left="50" top="50" bottom="50" right="50" colorArray="[#FF0000,#FF8000,#FFFF00,#00FF00,#0000FF,#0080FF,#800080]" opacityArray="[1.0,0.85,0.7,0.55,0.4,0.25,0.1]" midpointArray="[5,25,85,125,215,230,250]" visible="false"/>
			</ve:GradientCanvas>
		</mx:Panel>
	</mx:HBox>	
</mx:Application>