strokeselector.mxml

flex书效果代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Tile 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:degrafa="http://www.degrafa.com/2007"
	implements="com.san.styling.controls.IStylingControl"
	verticalScrollPolicy="off" horizontalScrollPolicy="off"
	width="100" height="100"
	horizontalAlign="center"
	>
	
	<mx:Script>
		<![CDATA[
			import com.san.styling.utils.StrokeUtil;
			import com.san.styling.utils.FillUtil;
			import com.degrafa.core.IGraphicsStroke;
			import mx.core.UIComponent;
			
			public const _width:Number = 40;

			public const _height:Number = 40;
			
			public const _strength:Number = 3;
			
			private var _target:Object;
			private var _property:String;
		
			
			private var _selectedStroke:String;
			[Bindable(event="selectedStrokeChanged")]
			public function get selectedStroke():String
			{
				return _selectedStroke;
			}		
		
			public function set target(value:Object):void
			{
				_target = value;
				updateControl();
			}
			
			public function set property(value:String):void
			{
				_property = value;			
				updateControl();
			}
			
			private function updateControl():void
			{
				if( _target && _property )
					setSelected( _target[ _property ], false );
			}
			
			private function setSelected( stroke:String, update:Boolean = true ):void
			{
				ns.fill = ss.fill = lgs.fill = rgs.fill = FillUtil.getFill(FillUtil.SOLID_FILL, 0x3D3D3D);
				
				_selectedStroke = stroke;
				dispatchEvent( new Event("selectedStrokeChanged" ) );
				
				switch( stroke )
				{
					case StrokeUtil.NONE:
						ns.fill = FillUtil.getFill(FillUtil.SOLID_FILL);
						break;
					case StrokeUtil.SOLID_STROKE:
						ss.fill = FillUtil.getFill(FillUtil.SOLID_FILL);
						break;
					case StrokeUtil.LINEAR_GRADIENT_STROKE:
						lgs.fill = FillUtil.getFill(FillUtil.SOLID_FILL);
						break;
					case StrokeUtil.RADIAL_GRADIENT_STROKE:
						rgs.fill = FillUtil.getFill(FillUtil.SOLID_FILL);
						break;	
				}
				
				if( update )
				{
					if( _target && _property )
						_target[ _property ] = stroke;
				}
				
				nsg.draw( this.graphics, new Rectangle( 0, 0, width, height ) );
				ssg.draw( this.graphics, new Rectangle( 0, 0, width, height ) );
				lgsg.draw( this.graphics, new Rectangle( 0, 0, width, height ) );
				rgsg.draw( this.graphics, new Rectangle( 0, 0, width, height ) );
			}
		]]>
	</mx:Script>
	
	
	
	<degrafa:Surface width="{_width}" height="{_height}" click="{setSelected(StrokeUtil.NONE)}" toolTip="no border">
		<degrafa:GeometryGroup id="nsg">
			<degrafa:RegularRectangle id="ns" x="0" y="0" width="{_width}" height="{_height}" stroke="{StrokeUtil.getStroke(StrokeUtil.NONE)}" />
		</degrafa:GeometryGroup>
	</degrafa:Surface>
	
	<degrafa:Surface width="{_width}" height="{_height}" click="{setSelected(StrokeUtil.SOLID_STROKE)}" toolTip="solid boarder">
		<degrafa:GeometryGroup id="ssg">
			<degrafa:RegularRectangle id="ss" x="4" y="4" width="{_width-8}" height="{_height-8}" stroke="{StrokeUtil.getStroke(StrokeUtil.SOLID_STROKE,8)}" />
		</degrafa:GeometryGroup>
	</degrafa:Surface>

	<degrafa:Surface width="{_width}" height="{_height}" click="{setSelected(StrokeUtil.LINEAR_GRADIENT_STROKE)}" toolTip="linear gradient">
		<degrafa:GeometryGroup id="lgsg">			
			<degrafa:RegularRectangle id="lgs" x="4" y="4" width="{_width-8}" height="{_height-8}" stroke="{StrokeUtil.getStroke(StrokeUtil.LINEAR_GRADIENT_STROKE,8)}" />
		</degrafa:GeometryGroup>
	</degrafa:Surface>

	<degrafa:Surface width="{_width}" height="{_height}" click="{setSelected(StrokeUtil.RADIAL_GRADIENT_STROKE)}" toolTip="radial gradient">
		<degrafa:GeometryGroup id="rgsg">			
			<degrafa:RegularRectangle id="rgs" x="4" y="4" width="{_width-8}" height="{_height-8}" stroke="{StrokeUtil.getStroke(StrokeUtil.RADIAL_GRADIENT_STROKE,8)}" />
		</degrafa:GeometryGroup>
	</degrafa:Surface>

	
</mx:Tile>