羔羊引擎之快捷拖拽

qq229449388

先看效果

拖拽大家见得多例如原生的startDrag方法，还有比startDrag快和方便的吗？毫无置疑，光是启动可拖动，startDrag是最快的。但是如果拖动到时候要有响应，要有计算呢？显然要写额外的代码，下面教大家一个有意思的封装，可以快速进行拖拽，并且计算同步其他对象，所以称为快捷拖拽我们先用上一节课学到titleWindow，创建一个窗口

1. var win:GYTitleWindow;
   
2. win = new GYTitleWindow;
   
3. win.width = 400;
   
4. win.height = 400;
   
5. win.closeBtn.right = 0;
   
6. win.closeBtn.y = 0;
   
7. win.x = s.stageWidth - win.width >> 1;
   
8. win.y = s.stageHeight - win.height >> 1;
   
9. win.setTitle("羔羊快捷拖拽，仅此一家别无分店");
   
10. s.addChild(win);

复制代码

好了没有什么疑问，这里居中了一下窗口

既然用到封装好的快捷拖拽，就肯定要创建拖拽类的实例，拖拽类名为DraggerHandle，先看代码

1. var g:Graphics;
   
2.                         var shape:GYSprite;
   
3.                         shape = new GYSprite;
   
4.                         g = shape.graphics;
   
5.                         g.beginFill(0xffffff,0.5);
   
6.                         g.drawRect(0,0,20,20);
   
7.                         g.endFill();
   
8.                         win.addElement(shape);
   
9.                         shape.right = 0;
   
10.                         shape.bottom = 0;
    
11.                         var dragHandle:DraggerHandle =DraggerHandle.getInstance(shape);
    
12.                         dragHandle.addBind(function(d:DraggerHandle):void{
    
13.                                 var w:int;
    
14.                                 var h:int;
    
15.                                 var win:GYTitleWindow = d.handle.parent as GYTitleWindow;
    
16.                                 //dragMouseX为鼠标按下手柄时，相对手柄的x坐标，根据鼠标位置计算宽
    
17.                                 w=win.mouseX+d.handle.width - d.dragMouseX;
    
18.                                 //dragMouseX为鼠标按下手柄时，相对手柄的y坐标，根据鼠标位置计算高
    
19.                                 h=win.mouseY+d.handle.height - d.dragMouseY;
    
20.                                 if(w == win.width && h == win.height)return;
    
21.                                 if(w < d.handle.width)//防止拖小于手柄尺寸
    
22.                                         w = d.handle.width;
    
23.                                 win.width = w;
    
24.                                 if(h < d.handle.height)//防止拖小于手柄尺寸
    
25.                                         h = d.handle.height;
    
26.                                 win.height = h;
    
27.                         });

复制代码

如上，我们先创建了一个GYSprite，绘制一个方块，用来当作拖拽到手柄，最好设置一下宽高，这里没有设置，但是很多时候我们甚至不清楚宽高是多少，设置宽高能让自己心里有数
下面有一个段可能你们看不懂代码，我一点一点说明
1、DraggerHandle.getInstance(shape);
这一句代码明显是获取DraggerHandle的实例，得到这个拖拽实例就可以调其方法，获取实例需要传入一个可点击的显示对象，
因为DraggerHandle需要监听一个显示对象的mouseDown，这里shape就是这个需要监听的对象。
2、dragHandle.addBind方法，这里dragHand就是刚刚获取出来的拖拽实例，addBind方法有一个参数，类型是function，传入的这个function会在mouseDown触发之后每帧调用，这个时候就可以进行一些运算同步拖拽，addBind可以添加多个绑定，这里我偷懒，方法直接写了一个闭包函数，别问我什么是闭包，我只知道皮包。

下面我们看传入的function内容，d:DraggerHandle参数就是拖拽类实例，这个实例有2个属性dragMouseX dragMouseY，这两个属性就是mouseDown触发的时候，相对于手柄的x，y坐标，也就是手柄的mouseX, mouseY，然后根据已有的数据进行计算，算出窗口大小，然后设置窗口的宽高，因为手柄的布局设置为right 和bottom了，所以会自动同步位置，相对定位的东西如果有人不清楚，后面会讲，急的话，给点加急费，我给你一对一教学


如果我们要取消这个拖拽到监听怎么办呢，如下，clear并设置为null就可以了

1. if(dragHandle)
   
2.                         {
   
3.                                 dragHandle.clear();
   
4.                                 dragHandle = null;
   
5.                         }

复制代码

最后说个跟拖拽没关的，可能有的人注意到，拖到很小的是，窗口不见了，不要担心，不是bug，因为窗口是九宫格设置的，当尺寸小于九宫格的尺寸时候，就会不显示，这是内部设定


lesson3.rar (978 Bytes, 下载次数: 4)

2017-11-16 01:47 上传

点击文件名下载附件