13
2016
09

变形框(transform)实现

参考greensock的TransformManager,实现了一个简单的变形组件。

只实现了变形框的功能,变形框和元件的绑定需要自己来做,变形框只用于缩放,没有实现旋转,也没有拖动,因为拖动功能相对来说容易实现,变形框中实现拖动功能经常会影响自定义功能的开发。

demo如下:

获得 Adobe Flash Player

Main.as

package
{
	
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.geom.Rectangle;
	import flash.text.TextField;
	
	public class Main extends MovieClip
	{
		public var tf:TextField;
		public function Main()
		{
			// constructor code
			var handleBox:HandleBox = new HandleBox();
			addChild(handleBox);
			handleBox.setBoundBox(mc.x, mc.y, mc.width, mc.height);
			handleBox.minW = mc.width*0.5;
			handleBox.minH = mc.height*0.5;
			handleBox.maxW = mc.width * 4;
			handleBox.maxH = mc.height * 4;
			handleBox.addEventListener(Event.CHANGE, function(e:Event)
				{
					var rect:Rectangle = handleBox.getBoundBox();
					mc.x = rect.x;
					mc.y = rect.y;
					mc.width = rect.width;
					mc.height = rect.height;
					tf.text = rect.toString();
				});
			
		}
		
	}

}

HandleBox.as

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	import flash.geom.Rectangle;
	
	/**
	 * 实现一个变形框。
	 * 可以直接
	 * var handleBox:HandleBox = new HandleBox();
	 * addChild(handleBox);
	 * handleBox.setBoundBox(0, 0, 100, 100);
	 * 来测试效果。
	 * @author hanyeah
	 * @date 2016/9/12 11:15
	 */
	public class HandleBox extends Sprite
	{
		/**线的颜色**/
		public var lineColer:uint = 0x3399FF;
		/**小矩形的填充色**/
		public var handleColor:uint = 0xFFFFFF;
		/**小矩形的宽高**/
		public var handleSize:int = 8;
		
		public var minW:Number;
		public var minH:Number;
		public var maxW:Number;
		public var maxH:Number;
		
		private var p0:Handle = new Handle(lineColer, handleColor, handleSize, "t", "stretchV", 90, 0, "b");
		private var p1:Handle = new Handle(lineColer, handleColor, handleSize, "r", "stretchH", 0, 0, "l");
		private var p2:Handle = new Handle(lineColer, handleColor, handleSize, "b", "stretchV", -90, 0, "t");
		private var p3:Handle = new Handle(lineColer, handleColor, handleSize, "l", "stretchH", 180, 0, "r");
		private var p4:Handle = new Handle(lineColer, handleColor, handleSize, "tl", "corner", -135, -90, "br");
		private var p5:Handle = new Handle(lineColer, handleColor, handleSize, "tr", "corner", -45, 90, "bl");
		private var p6:Handle = new Handle(lineColer, handleColor, handleSize, "br", "corner", 45, -90, "tl");
		private var p7:Handle = new Handle(lineColer, handleColor, handleSize, "bl", "corner", 135, 90, "tr");
		private var _handles:Array = [];
		private var _rect:Rectangle = new Rectangle();
		private var _curHandle:Handle;
		private var _originP:Point=new Point();
		
		public function HandleBox()
		{
			
			_handles = [p0, p1, p2, p3, p4, p5, p6, p7];
			for (var i:int = 0; i < 8; i++ ) {
				var handle:Handle = _handles[i] as Handle;
				addChild(handle);
				handle.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
				handle.oppositeHandle = getChildByName(handle.oppositeName) as Handle;
			}
		}
		
		private function mouseDownHandler(e:MouseEvent):void 
		{
			_curHandle = e.currentTarget as Handle;
			_rect = getBoundBox();
			_originP.x = mouseX;
			_originP.y = mouseY;
			stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
			stage.addEventListener(Event.MOUSE_LEAVE, mouseUpHandler);
		}
		
		private function mouseUpHandler(e:Event):void 
		{
			stage.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
			stage.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
			stage.removeEventListener(Event.MOUSE_LEAVE, mouseUpHandler);
		}
		
		private function mouseMoveHandler(e:MouseEvent):void 
		{
			var rect:Rectangle = _rect.clone();
			var dx:Number = mouseX - _originP.x;
			var dy:Number = mouseY - _originP.y;
			_originP.x = mouseX;
			_originP.y = mouseY;
			switch (_curHandle.name) {
				case "t":
					rect.y += dy;
					rect.height -= dy;
					break;
				case "b":
					rect.height += dy;
					break;
				case "l":
					rect.x += dx;
					rect.width -= dx;
					break;
				case "r":
					rect.width += dx;
					break;
				case "tl":
					rect.y += dy;
					rect.height -= dy;
					rect.x += dx;
					rect.width -= dx;
					break;
				case "br":
					rect.height += dy;
					rect.width += dx;
					break;
				case "tr":
					rect.y += dy;
					rect.height -= dy;
					rect.width += dx;
					break;
				case "bl":
					rect.height += dy;
					rect.x += dx;
					rect.width -= dx;
					break;
			}
			if (rect.width<minW||rect.width>maxW) {
				rect.width = _rect.width;
				rect.x = _rect.x;
			}
			if (rect.height<minH||rect.height>maxH) {
				rect.height = _rect.height;
				rect.y = _rect.y;
			}
			setBoundBox(rect.x, rect.y, rect.width, rect.height);
			dispatchEvent(new Event(Event.CHANGE));
		}
		
		public function getBoundBox():Rectangle {
			return _rect.clone();
		}
		
		public function setBoundBox(xx:Number,yy:Number,w:Number,h:Number):void {
			p0.x = xx + w / 2;
			p0.y = yy;
			p1.x = xx + w;
			p1.y = yy + h / 2;
			p2.x = xx + w / 2;
			p2.y = yy + h;
			p3.x = xx;
			p3.y = yy + h / 2;
			p4.x = xx;
			p4.y = yy;
			p5.x = xx + w;
			p5.y = yy;
			p6.x = xx + w;
			p6.y = yy + h;
			p7.x = xx;
			p7.y = yy + h;
			
			graphics.clear();
			graphics.lineStyle(1, lineColer);
			graphics.drawRect(xx, yy, w, h);
			graphics.endFill();
			
			_rect.x = xx;
			_rect.y = yy;
			_rect.width = w;
			_rect.height = h;
		}
		
		
	
	}

}
import flash.display.Sprite;

class Handle extends Sprite
{
	public var type:String;
	public var cursorRotation:Number;
	public var flipRotation:Number;
	public var oppositeName:String;
	public var oppositeHandle:Handle;
	
	public function Handle(lineColor:uint,handleColor:uint,handleSize:Number,name:String, type:String, cursorRotation:Number, flipRotation:Number = 0, oppositeName:String = null)
	{
		this.name = name;
		this.type = type;
		this.cursorRotation = cursorRotation;
		this.flipRotation = flipRotation;
		this.oppositeName = oppositeName;
		
		graphics.lineStyle(1, lineColor);
		graphics.beginFill(handleColor, 1.0);
		graphics.drawRect( -handleSize / 2, -handleSize / 2, handleSize, handleSize);
		graphics.endFill();
	}
}

源码打包下载

« 上一篇下一篇 »

相关文章:

闪电效果  (2017-11-28 15:4:19)

线段与椭圆的交点  (2017-1-6 14:43:41)

as3录制swf并保存flv视频  (2016-12-28 8:43:41)

解九连环  (2016-12-1 20:58:11)

as3实现setTimeout和trace  (2016-11-10 16:47:37)

registerCursor注册系统光标  (2016-9-14 9:49:40)

鼠标光标管理  (2016-9-13 17:44:3)

flash文本消除锯齿不显示  (2016-8-25 11:43:31)

greenSock的easing曲线  (2016-8-24 18:30:11)

如何在Flash IDE里正确地对位图进行九切片(九宫格)缩放(转)  (2016-8-19 16:41:44)

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。