hanyeah

实现一个现实文本的组件，双击激活编辑状态。

先看效果，双击一下舞台中的元件试试。

代码如下（大多数代码是为了实现拖动和调整尺寸，可忽略）：

package  {
	
	import flash.display.MovieClip;
	import flash.events.FocusEvent;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	import flash.text.TextField;
	import flash.text.TextFieldType;
	
	
	public class Test01 extends MovieClip {
		
		
		public var mc:MovieClip;
		public var tf:TextField;
		public var ku:MovieClip;
		private var hcursor:HCursor;
		public function Test01() {
			// constructor code
			tf = mc.tf;
			ku = mc.ku;
			tf.mouseEnabled = false;
			mc.addEventListener(MouseEvent.CLICK, clickHandler);
			mc.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler);
			mc.doubleClickEnabled = true;
			
			
			ku.alpha = 0;
			ku.buttonMode = true;
			ku.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownhandler);
			mc.addEventListener(MouseEvent.MOUSE_DOWN, dragHandler);
			
			hcursor = new HCursor()
			addChild(hcursor);
			
		}
		
		
		
		//------------------------光标样式------------------------------
		
		//------------------------拖动------------------------------------
		private function dragHandler(e:MouseEvent):void 
		{
			hcursor.setCursor(HCursor.DRAG);
			mc.startDrag(false);
			stage.addEventListener(MouseEvent.MOUSE_UP, dragUpHandler);
		}
		
		private function dragUpHandler(e:MouseEvent):void 
		{
			
			hcursor.setCursor(HCursor.NORMAL);
			mc.stopDrag();
			stage.removeEventListener(MouseEvent.MOUSE_UP, dragUpHandler);
		}
		//------------------------尺寸调整---------------------------
		private var isScale = false;
		private var scaleTypes:Array = [null, 
										HCursor.SCALE2, HCursor.SCALE1, HCursor.SCALE3, 
										HCursor.SCALE, HCursor.SCALE2, HCursor.SCALE1, 
										HCursor.SCALE3, HCursor.SCALE];
		private function mouseDownhandler(e:MouseEvent):void 
		{
			getDir();
			hcursor.setCursor(scaleTypes[dir]);
			stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
			e.stopImmediatePropagation();//阻止冒泡
		}
		
		private function getDir():void {
			rect = mc.getBounds(this);
			var p:Point = new Point(mouseX, mouseY);
			if (p.y-rect.y<10) {
				if (p.x-rect.x<10) {
					//左上角
					dir = 1;
				}
				else if (rect.right-p.x<10) {
					//右上角
					dir = 3;
				}
				else {
					//上边
					dir = 2;
				}
			}
			else if(rect.bottom-p.y<10){
				if (p.x-rect.x<10) {
					//左下角
					dir = 7;
				}
				else if (rect.right-p.x<10) {
					//右下角
					dir = 5;
				}
				else {
					//下边
					dir = 6;
				}
			}
			else {
				if (p.x<rect.width/2) {
					//左边
					dir = 8;
				}
				else {
					//右边
					dir = 4;
				}
			}
		}
		
		
		private var rect:Rectangle;
		private var dir:int;
		
		private function mouseUpHandler(e:MouseEvent):void 
		{
			hcursor.setCursor(HCursor.NORMAL);
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
			stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
		}
		
		private function mouseMoveHandler(e:MouseEvent):void 
		{
			var rect0:Rectangle = new Rectangle();
			switch(dir) {
				case 1:
					rect0.x = mouseX;
					rect0.y = mouseY;
					rect0.right = rect.right;
					rect0.bottom = rect.bottom;
					break;
				case 2:
					rect0.x = rect.x;
					rect0.y = mouseY;
					rect0.right = rect.right;
					rect0.bottom = rect.bottom;
					break;
				case 3:
					rect0.x = rect.x;
					rect0.y = mouseY;
					rect0.right = mouseX;
					rect0.bottom = rect.bottom;
					break;
				case 4:
					rect0.x = rect.x;
					rect0.y = rect.y;
					rect0.right = mouseX;
					rect0.bottom = rect.bottom;
					break;
				case 5:
					rect0.x = rect.x;
					rect0.y = rect.y;
					rect0.right = mouseX;
					rect0.bottom = mouseY;
					break;
				case 6:
					rect0.x = rect.x;
					rect0.y = rect.y;
					rect0.right = rect.right;
					rect0.bottom = mouseY;
					break;
				case 7:
					rect0.x = mouseX;
					rect0.y = rect.y;
					rect0.right = rect.right;
					rect0.bottom = mouseY;
					break;
				case 8:
					rect0.x = mouseX;
					rect0.y = rect.y;
					rect0.right = rect.right;
					rect0.bottom = rect.bottom;
					break;
			}
			
			if (rect0.width >= miniWidth&&rect0.width <= maxWidth) {
				mc.x = rect0.x;
				mc.width = rect0.width;
			}
			if (rect0.height>=miniHeight&&rect0.height<=maxHeight) {
				mc.y = rect0.y;
				mc.height = rect0.height;
			}
		}
		private var miniWidth:int = 100;
		private var miniHeight:int = 100;
		private var maxWidth:int = 1000;
		private var maxHeight:int = 1000;
		
		//-----------------------文本框-------------------------
		private function doubleClickHandler(e:MouseEvent):void 
		{
			toInput();
		}
		
		private function clickHandler(e:MouseEvent):void 
		{
			
		}
		private function toInput():void {
			tf.type = TextFieldType.INPUT;
			tf.selectable = true;
			tf.mouseEnabled = true;
			tf.background = true;
			stage.focus = tf;
			
			stage.addEventListener(FocusEvent.MOUSE_FOCUS_CHANGE, onFocusChange);
		}
		
		private function onFocusChange(e:FocusEvent):void 
		{
			stage.removeEventListener(FocusEvent.MOUSE_FOCUS_CHANGE, onFocusChange);
			toDynamic();
		}
		private function toDynamic():void {
			tf.type = TextFieldType.DYNAMIC;
			tf.selectable = false;
			tf.mouseEnabled = false;
			tf.background = false;
		}
	}
	
}

设置组件的doubleClickEnabled为true，mc.doubleClickEnabled = true;这里要注意，需要将mc的子元素tf的mouseEnabled设置为false,否则触发不了mc的DOUBLE_CLICK事件。

侦听到双击事件时候，用代码将文本框设置为输入文本框，并把焦点设置为文本框。toInput函数实现。

当文本框失去焦点的时候，用代码将文本框设置为动态文本框。toDynamic函数实现。

源码打包下载