参考greensock的TransformManager,实现了一个简单的变形组件。
只实现了变形框的功能,变形框和元件的绑定需要自己来做,变形框只用于缩放,没有实现旋转,也没有拖动,因为拖动功能相对来说容易实现,变形框中实现拖动功能经常会影响自定义功能的开发。
demo如下:
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(); } }
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。