自制Flex air 拖动和缩放控件
发布时间:2020-12-15 05:04:34 所属栏目:百科 来源:网络整理
导读:在制作工具时,有一个可以拖动和缩放对象的功能,想要使用控件实现。但是搜索了一圈发现没有合适的,所以自制了一个。应该还不错,发上来和大家分享一下。 ? 不说什么了,看图 ? 周围8个小方框可以实现修改对象大小,中间的那个实现拖动。点击另外的对象可以
在制作工具时,有一个可以拖动和缩放对象的功能,想要使用控件实现。但是搜索了一圈发现没有合适的,所以自制了一个。应该还不错,发上来和大家分享一下。
? 不说什么了,看图 ? 周围8个小方框可以实现修改对象大小,中间的那个实现拖动。点击另外的对象可以实现焦点的切换。 ? 使用控件时,代码如下。(copy了一个Canvas中的代码) ? <?xml version="1.0" encoding="utf-8"?> <mx:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:mx="library://ns.adobe.com/flex/mx" layout="absolute" creationComplete="inited()" width="600" height="400"> <fx:Script> <![CDATA[ import org.xstudio.air.ObjectHandler; public function inited():void{ ObjectHandler.addHandler(this,com_img); ObjectHandler.addHandler(this,com_img2); ObjectHandler.addHandler(this,com_btn); } ]]> </fx:Script> <mx:Button x="105" y="82" label="按钮" id="com_img" width="77" height="60"/> <mx:Button x="32" y="267" label="按钮2" id="com_img2" width="95" height="54"/> <mx:Button x="188" y="229" label="按钮3" id="com_btn" width="78" height="62"/> </mx:WindowedApplication> ? 使用的ObjectHandler控件的源代码如下 package org.xstudio.air { import flash.display.DisplayObject; import flash.display.Sprite; import flash.events.MouseEvent; import flash.geom.Point; import mx.core.Container; /** * Air使用的对象拖动和缩放的控件 * * @author cuilichen * * @date May 2nd,2012 * */ public class ObjectHandler { //操作的小矩形框的大小 private static const HandlerSize:int = 10; //本类的公共对象 private static var focusObjectHandler:ObjectHandler; //对象的容器 private var container:Container; //实际控制对象 private var widget:DisplayObject; //9个可拖动框 private var rects:Array = []; //当前正在操作的句柄 private var currRect:Sprite; //是否可改变大小 private var sizeable:Boolean; /** * 构造方法 * * @param container * @param single * */ public function ObjectHandler(container:Container,single:Single){ if(single == null){ throw new Error("ObjectHandler new error."); } this.container = container; rects = []; for(var i:int = 0; i < 9; i++){ var rect:Sprite = createRectHandler(); rect.addEventListener(MouseEvent.MOUSE_DOWN,evt_rect_mouse_down); rect.addEventListener(MouseEvent.MOUSE_UP,evt_rect_mouse_up); rects[i] = rect; } container.addEventListener(MouseEvent.MOUSE_UP,evt_container_mouse_up); } /** * 静态方法,添加对象处理的句柄 * * @param container * @param widget * @param sizeable * */ public static function addHandler(container:Container,widget:DisplayObject,sizeable:Boolean = true):void{ var handler:ObjectHandler = new ObjectHandler(container,new Single()); handler.addWidget(widget,sizeable); } /** * 添加显示对象 * * @param _widget * @param sizeable * */ private function addWidget(_widget:DisplayObject,sizeable:Boolean):void{ if (widget && widget.parent){ widget.parent.removeChild(widget); } this.sizeable = sizeable; widget = _widget; var p1:Point = new Point(widget.x,widget.y); var p2:Point = new Point(widget.x + widget.width,widget.y + widget.height); widget.addEventListener(MouseEvent.CLICK,evt_change_focus); setRectsPos(p1,p2); if (focusObjectHandler == null){ setFocus(this); } } /** * 在控件上点击鼠标左键 * * @param e * */ private function evt_change_focus(e:MouseEvent):void{ setFocus(this); } /** * 在容器上按下鼠标左键 * * @param e * */ private function evt_container_mouse_up(e:MouseEvent):void{ if (currRect){ currRect.stopDrag(); } container.removeEventListener(MouseEvent.MOUSE_MOVE,evt_mouse_move); } /** * 在句柄上按下鼠标左键 * * @param e * */ private function evt_rect_mouse_down(e:MouseEvent):void{ var rect:Sprite = e.currentTarget as Sprite; rect.startDrag(); currRect = rect; container.addEventListener(MouseEvent.MOUSE_MOVE,evt_mouse_move); } /** * 在句柄上松开鼠标左键 * * @param e * */ private function evt_rect_mouse_up(e:MouseEvent):void{ var rect:Sprite = e.currentTarget as Sprite; rect.stopDrag(); currRect = null; container.removeEventListener(MouseEvent.MOUSE_MOVE,evt_mouse_move); } /** * 拖动矩形句柄,鼠标移动 * */ private function evt_mouse_move(e:MouseEvent):void{ if (currRect) { updatePosition(currRect); } } /** * 当某个句柄移动时,调整相应句柄的位置 * * @param rect * */ private function updatePosition(rect:Sprite):void{ var ind:int = rects.indexOf(rect); var p1:Point = new Point(rects[0].x,rects[0].y); var p2:Point = new Point(rects[7].x,rects[7].y); if (ind == 0){//左上角 p1.x = rect.x; p1.y = rect.y; } else if (ind == 1){//上部 p1.y = rect.y; } else if (ind == 2){//右上角 p2.x = rect.x; p1.y = rect.y; } else if (ind == 3){//左边 p1.x = rect.x; } else if (ind == 4){//右边 p2.x = rect.x; } else if (ind == 5){//左下角 p1.x = rect.x; p2.y = rect.y; } else if (ind == 6){//下边 p2.y = rect.y; } else if (ind == 7){//右下角 p2.x = rect.x; p2.y = rect.y; } else if (ind == 8){//中间的 var w:Number = p2.x - p1.x; var h:Number = p2.y - p1.y; p1.x = rect.x - w / 2; p1.y = rect.y - h / 2; p2.x = p1.x + w; p2.y = p1.y + h; }else { throw new Error("No such a handler"); } setRectsPos(p1,p2); } /** * 当前对象是否是焦点的操作对象 * * */ private function setOperating(value:Boolean):void { var i:int; var handler:Sprite; var start:int = sizeable? 0 : 8; if (value){//可操作 for(i = start; i < rects.length; i++){ handler = rects[i] container.rawChildren.addChild(handler); } } else {//不可操作 for(i = start; i < rects.length; i++){ handler = rects[i] if (handler.parent){ handler.parent.removeChild(handler); } } } } /** * 创建句柄,用来拖动和拉伸对象 * */ private function createRectHandler():Sprite{ var img:Sprite = new Sprite(); var size:int = 10; img.graphics.beginFill(0x00ffff,0.5); img.graphics.drawRect(-size / 2,-size / 2,size,size); img.graphics.endFill(); img.graphics.lineStyle(1,0); img.graphics.drawRect(-size / 2,size); return img; } /** * 设定各个句柄的位置 * * @param p1 * @param p2 * */ private function setRectsPos(p1:Point,p2:Point):void{ if (p1.x > p2.x){//判定,并且保证 p1 在 p2 的左上方 var value:Number = p1.x; p1.x = p2.x; p2.x = value; } if (p1.y > p2.y){//判定,并且保证 p1 在 p2 的左上方 value = p1.y; p1.y = p2.y; p2.y = value; } rects[0].x = p1.x; rects[0].y = p1.y; rects[1].x = (p1.x + p2.x) / 2; rects[1].y = p1.y; rects[2].x = p2.x; rects[2].y = p1.y; rects[3].x = p1.x; rects[3].y = (p1.y + p2.y) / 2; rects[4].x = p2.x; rects[4].y = (p1.y + p2.y) / 2; rects[5].x = p1.x; rects[5].y = p2.y; rects[6].x = (p1.x + p2.x) / 2; rects[6].y = p2.y; rects[7].x = p2.x; rects[7].y = p2.y; rects[8].x = (p1.x + p2.x) / 2; rects[8].y = (p1.y + p2.y) / 2; //改变对象大小 widget.x = p1.x; widget.y = p1.y; widget.width = p2.x - p1.x; widget.height = p2.y - p1.y; } /** * 设定当前焦点对象 * */ private static function setFocus(value:ObjectHandler):void { if (focusObjectHandler){ focusObjectHandler.setOperating(false); } focusObjectHandler = value; if(focusObjectHandler){ focusObjectHandler.setOperating(true); } } } }class Single{} 应该说使用起来还是比较简单的。不知道大家有没有什么更好的办法或者思路,欢迎交流。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |