movableoverlay.mxml

flex书效果代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	xmlns:degrafa="http://www.degrafa.com/2007"
	horizontalScrollPolicy="off" verticalScrollPolicy="off"
	width="400" height="300"
	>
	
	<mx:Script>
		<![CDATA[
			import com.mh.movable.constants.OverlayHandles;
			import com.mh.movable.event.MovableEvent;
			import com.mh.movable.core.MovableComponent;
			import mx.binding.utils.ChangeWatcher;
			
			private var _target:MovableComponent;
			
			
			private var xWatcher:ChangeWatcher;
			private var yWatcher:ChangeWatcher;
			private var widthWatcher:ChangeWatcher;
			private var heightWatcher:ChangeWatcher;
			
			public function set target( value:MovableComponent ):void
			{
				_target = value;
				
				if( xWatcher )		xWatcher.unwatch();
				if( yWatcher )		yWatcher.unwatch();
				if( widthWatcher )	widthWatcher.unwatch();
				if( heightWatcher )	heightWatcher.unwatch();
				
				if( !_target )
					return;
					
				updateX();
				updateY();
				updateWidth();
				updateHeight();

				ChangeWatcher.watch( _target, "x", updateX );
				ChangeWatcher.watch( _target, "y", updateY );
				ChangeWatcher.watch( _target, "width", updateWidth );
				ChangeWatcher.watch( _target, "height", updateHeight );
			}
			
			public function get target():MovableComponent
			{
				return _target;
			}
						
			
			private function updateX( e:Event=null ):void
			{
				this.x = _target.x;
			} 
			private function updateY( e:Event=null ):void
			{
				this.y = _target.y;
			} 
			private function updateWidth( e:Event=null ):void
			{
				this.width = _target.width;
			} 
			private function updateHeight( e:Event=null ):void
			{
				this.height = _target.height;
			} 
			
			
			private function handleMouseDownHandler( event:MouseEvent, handle:String ):void
			{
				event.stopPropagation();
				
				this.dispatchEvent( new MovableEvent( MovableEvent.RESIZE_COMPONENT, handle ) );
			}
			
		]]>
	</mx:Script>
	
	<degrafa:Surface>
		<degrafa:strokes>
			<degrafa:SolidStroke id="greyStroke" color="#e5e5e5" weight="2" alpha="1" />
		</degrafa:strokes>
		
		<degrafa:GeometryGroup >		
			<degrafa:RegularRectangle x="0" y="0" width="{this.width}" height="{this.height}" stroke="{greyStroke}" />
			
			<degrafa:filters>
				<mx:BevelFilter strength="0.5" />
			</degrafa:filters>
		</degrafa:GeometryGroup>
	</degrafa:Surface>
	
	
	<mx:Button id="topLeft" width="15" height="15" top="0" left="0" mouseDown="handleMouseDownHandler(event,OverlayHandles.TOP_LEFT)" styleName="handle" />
	<mx:Button id="top" width="15" height="15" top="0" horizontalCenter="0" mouseDown="handleMouseDownHandler(event,OverlayHandles.TOP)" styleName="handle" />
	<mx:Button id="topRight" width="15" height="15" top="0" right="0" mouseDown="handleMouseDownHandler(event,OverlayHandles.TOP_RIGHT)" styleName="handle" />
	
	<mx:Button id="left" width="15" height="15" left="0" verticalCenter="0" mouseDown="handleMouseDownHandler(event,OverlayHandles.LEFT)" styleName="handle" />
	<mx:Button id="right" width="15" height="15" right="0" verticalCenter="0" mouseDown="handleMouseDownHandler(event,OverlayHandles.RIGHT)" styleName="handle" />
	
	<mx:Button id="bottomLeft" width="15" height="15" bottom="0" left="0" mouseDown="handleMouseDownHandler(event,OverlayHandles.BOTTOM_LEFT)" styleName="handle" />
	<mx:Button id="bottom" width="15" height="15" bottom="0" horizontalCenter="0" mouseDown="handleMouseDownHandler(event,OverlayHandles.BOTTOM)" styleName="handle" />
	<mx:Button id="bottomRight" width="15" height="15" bottom="0" right="0" mouseDown="handleMouseDownHandler(event,OverlayHandles.BOTTOM_RIGHT)" styleName="handle" />
	
</mx:Canvas>