quick-cocos2d-x 学习系列之七 drag

quick-cocos2d-x 学习系列之七 drag

         该例主要是演示drag拖动的一些方法。主要是两个文件。

         一个DragScene.lua场景文件，一个UIDrag.lua。两个文件的量都不小，那我们来细细品下吧。

1.  DragScene

该场景定义个四个颜色C1，C2，C3，C4，定义了2个size 90X90和 80X80。

Ctor()函数定义了几个变量

    self.t_data = {}

    --拖拽对象

    self.drag = nil

    --索引

    self._index = 0

self._indexMax = 3

         调用几个函数：

    self:initUI()

    self:_addUI()

    --加载拖拽1

self:loadDrag1()

 

1.1             _addUI函数

增加一个关闭按钮，一个向前按钮，向后按钮，重播按钮。这个3个按钮调用的函数都是chaneLayer()函数，根据_index值的不同加载不同的函数。

    if self._index == 0 then

        self:loadDrag1()

    elseif self._index == 1 then

        self:loadDrag2()

    elseif self._index == 2 then

        self:loadDrag3()

    elseif self._index == 3 then

       self:loadDrag4()

 

 

1.2             initUI函数

通过函数createEquipmentBox来创建多个放装备的box。

创建一个Label显示“人物”

最后创建一个滚动的view如下：

self.view =  cc.ui.UIScrollView.new(

        {viewRect = cc.rect(0,0, bg:getContentSize().width,bg:getContentSize().height),direction = 1})

bg:addChild(self.view);

再创建100个用于存放装备的颜色层（LayerColor），在层上加上数字以表示第几个层。都存放在数组 t_data中。

    最后将数组的颜色层填到哪个滚动view中。增加如下函数是的可以滚动。

   SCROLL_HANDLER_SLIDE(self.view)    S_XY(self.view:getScrollNode(),0,self.view:getViewRect().height-H(self.view:getScrollNode()))

1.3             loadDrag1

 

这几个相似的函数都是加载UI的。

先创建一个对象UIDrag，赋值被变量self.drag,并添加到场景中。

创建武器盒子box的属性（共5个，这里只列一个，盒子拥有拖拽属性并设置其group）

self.drag:addDragItem(self.box1):setGroup(1)

让背包（共100个格子）具备拖拽属性

self.drag:addDragItem(self.t_data[i]):setGroup(1000)

装备放入背包里

local equList = self:createEquipements()

下面函数将装备放入到UIDrag实例中的，_dragItems数组变量中。

self.drag:find(self.t_data[1]):setDragObj(equList[1])

此外还定义了三个函数。

setOnDragUpBeforeEvent，setOnDragDownBeforeEvent，setOnDragDownAfterEvent

其他三个函数loadDrag2, loadDrag3, loadDrag4大同小异。

 

2.  UIDragItem

定义一个类UIDragItem.

源码中注释如下：

@param box 绑定的盒子，此参数必须有。盒子是已经存在在其它容器里对象。 type:node

@param obj 拖拽物 type:node    --可选

@param z  拖拽物对于盒子z的加成。 type:int --可选

@param tag 标记，用于拖拽事件的逻辑判定 type:int  --可选

 

3.  UIDrag

 

类UIDrag，考虑到拖拽本身是个大触摸层。

设置变量：

--放置框

    self._dragItems = {}

    --遮挡集合

    self._hinderList = {}

    --当前拖拽项

    self._currentDragItem = nil

    --当前拖拽物

    self._currentDragObj = nil

    --拖拽替换功能

    self.isExchangeModel = false

    --拖拽对象镜像模型

    self.isISOModel = false

    --    self._isBean = false

    --标记第一次移动

    self._isOnBean = false

self._beanPoint = cc.p(0,0)

如果初始化时候有带参数，则直接赋值给_dragItems.

定义事件：

--事件

    --拖拽之前

    self._onDragUpBeforeEvent = function(currentItem,point) return true end

    --拖拽之后

    self._onDragUpAfterEvent = function(currentItem,point) end

    --拖拽移动之前

    self._onDragMoveBeforeEvent = function(currentItem,point) end

    --拖拽移动

    self._onDragMoveEvent = function(currentItem,dragObj,worldPoint,dragPoint) end

    --拖拽放下之前

    self._onDragDownBeforeEvent = function(currentItem,targetItem,point) return true end

    --拖拽放下之后

self._onDragDownAfterEvent= function(currentItem,targetItem,point) end

 

--设置层的SIZE大小

S_SIZE(self,display.width,display.height)

    self:setTouchEnabled(true)

--增加触摸监听，根据事件调用不同的函数

    self:addNodeEventListener(cc.NODE_TOUCH_EVENT,function(event)

        if event.name == "began" then

 

            if self:onTouchBegan(cc.p(event.x,event.y)) then

                return true

            end

            return false

 

        elseif event.name == "moved" then

            self:onTouchMoved(cc.p(event.x,event.y))

        elseif event.name == "ended" then

            self:onTouchEnded(cc.p(event.x,event.y))

        end

 

    end)

3.1             onTouchBegan

UIDrag类中3个触摸相关的函数是理解拖拽的关键，需要细细查看之。

Begin函数显示判断是否点击到遮盖物，如果点击到遮盖物就直接退出。

然后循环检测点击到哪个物品，直到找到被拖拽的物品。

同时设置一些变量：

self._isOnBean = true

                --当前操作项

self._currentDragItem = item

                --当前拖拽物

self._currentDragObj = self._currentDragItem.dragObj

以备下面函数使用。

 

 

3.2             onTouchMoved

计算得到移动点坐标。

判断_ isOnBean变量值，进行相关函数调用，

包括保留该物品，从父节点移除，如果设置了镜像就进行复制处理，最重要的动态的改变物品的位置。

 

 

3.3             onTouchEnded

遍历所有的物品，判断是否离开了当前所在框，没有离开则不做任何操作和回调。如果离开了之前所在的框，则判断是否有对象，以及是否支持交换。

3.4             Find函数

实现放装备到包。

在初始化loadDrag函数的时候，需要将装备放入到背包中。调用FIND函数。

查看_dragItems数组中的是否与传入参数想的呢过，如果相等则返回当前的_dragItems[i].

该数组中每个变量都不一样。

 

3.5             setDragObj函数

该函数传入参数obj.

该参数是表示正在拖拽的对象，如果不存在，则把当前的变量self.dragObj从父节点移除，并设置为nil,最后返回self.

如果存在，则设置self.dragObj=obj

找到self.dragBox的中心点，设置盒子和拖拽物的坐标，最后设置拖拽物的坐标。

 

 

3.6             addDragItem

将一个盒子变成可拖拽的，创建一个UIDragItem类对象，第一个参数表示盒子，第二个参数表示放入盒子的对象，第三个参数表示Z坐标，第四个参数表示tag。并加入到UIDrag._dragItems变量中。

最后返回该UIDragItem类。

 

3.7             handler_ScrollView

判断是否按中。

如果没有按中则返回true,按中则返回false.

 

 

if scroll:getScrollNode():hitTest(point) then

        local rect = scroll:getViewRect()

        local lp = scroll:convertToWorldSpace(cc.p(0,0))

        local temp = cc.rect(lp.x,lp.y,rect.width,rect.height)

        if not cc.rectContainsPoint(temp,point)  then

            return true

        end

    end

    return false

 

 

 

 

3.8             setOnDragUpBeforeEvent

 

拖拽前事件

设置变量如：self._onDragUpBeforeEvent = fun

Fun是setOnDragUpBeforeEvent函数的输入参数。

该函数在DragScene：LoadDrag1函数中被设置。

具体实现是：

拖拽物之前，判断是否触摸到SCROLL内部窗体。

 

3.9             setOnDragDownBeforeEvent

同setOnDragUpBeforeEvent

放下拖拽物之前，判定是否真正的触摸到scroll的内部窗体

 

3.10       setOnDragDownAfterEvent

拖拽物之后输出打印信息。“放下成功”

 

 

 

 

 

4.  其他函数

4.1             S_SIZE函数

定义在文件Utility.lua中。

S_SIZE = function(node,w,h) if not node thenreturn nil end  returnnode:setContentSize(cc.size(w,h)); end

设置NODE的长和宽，如果NODE为空则直接返回NIL。

4.2             SIZE

SIZE = function(node)

if not node then return nil end

local size = node:getContentSize()

if size.width == 0 and size.height == 0 then

    local w,h = node:getLayoutSize()

    return cc.size(w,h)

else

    return size

end

end

获取NODE的大小，如果长、宽有一个为0，则返回Layout大小。

 

4.3             X

X = function(node) if not node then return nilend  return node:getPositionX(); end

返回输入参数node的x位置坐标。

4.4             Y

Y = function(node) if not node then return nilend  return node:getPositionY(); end

返回输入参数node的Y位置坐标。

 

 

4.5             XY

XY = function(node) if not node then return nilend  return node:getPosition(); end

返回坐标

4.6             S_X

S_X = function(node,x) if not node then returnnil end  node:setPosition(cc.p(x,Y(node)));end

设置X坐标

4.7             S_Y

S_Y = function(node,y) if not node then returnnil end node:setPosition(cc.p(X(node),y)); end

设置Y坐标

 

4.8             S_XY

S_XY = function(node,x,y) if not node thenreturn nil end  node:setPosition(x,y);end

设置X，Y坐标

 

4.9             W

W = function(node) if not node then return nilend  return SIZE(node).width; end

返回NODE的宽度

 

4.10       W2

W2 = function(node) if not node then return nilend  return W(node)/2;end

返回宽度的1/2

 

 

4.11       H2

返回高度的1/2

 

 

4.12       H

返回高度

 

4.13       AX

AX = function(node) if not node then return nilend  return node:getAnchorPoint().x; end

返回NODE的锚点坐标X

4.14       AY

返回NODE的锚点坐标y

 

 

 

4.15       SCROLL_HANDLER_SLIDE

SCROLL_HANDLER_SLIDE = function(scvollView)

   scvollView.scrollListener_ = SCROLL_EVENT_SLIDE

end

该函数设置scrollView的scrollListener为SCROLL_EVENT_SLIDE.

此处就是设置了Scrollview的触摸监听函数。

该常量指向函数如下。根据状态设置变量SCROLL_EVENT_STATUS值。

SCROLL_EVENT_SLIDE = function(event)

    if event.name== "began" then

        returntrue

    elseifevent.name == "moved" then SCROLL_EVENT_STATUS = -1

    elseifevent.name == "ended" then SCROLL_EVENT_STATUS = 0 end

end

SCROLL_EVENT_STATUS 变量用于标记scroll是否滑动之类的状态。