cocos2dx-3.0(23) ScrollView 缩放 及 touch新用法

前端之家收集整理的这篇文章主要介绍了cocos2dx-3.0(23) ScrollView 缩放 及 touch新用法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

转自http://blog.csdn.net/ac_huang/article/details/37740515

ScrollView在3.0里面依然存在于extensions下面,看他的继承关系,他最终也是继承node,我们在来看看他的头文件应该怎么包含

1. 在头文件添加 #include "cocos-ext.h" 在添加使用域 USING_NS_CC_EXT;

2. 添加多继承public ScrollViewDelegate,如下:

  1. classHelloWorld:publicLayerColor,publicScrollViewDelegate

我们转到ScrollViewDelegate里面,发现这是一个抽象基类,里面有两个纯虚函数,我们需要自己实现

copy
  1. /**
  2. *@jsNA
  3. *@luaNA
  4. */
  5. virtualvoidscrollViewDidScroll(ScrollView*view)=0;
  6. /**
  7. *@jsNA
  8. *@luaNA
  9. */
  10. voidscrollViewDidZoom(ScrollView*view)=0;

所以我们还需要在自己的类中添加这两行代码

copy
    //scrollview滚动的时候会调用
  1. voidscrollViewDidScroll(extension::ScrollView*view);
  2. //scrollview缩放的时候会调用
  3. voidscrollViewDidZoom(extension::ScrollView*view);

我们为了达到用鼠标点击图片移动时,出现缩小放大效果且能像相册一样切换图片,那么我们还需要添加触摸事件

copy
    boolonTouchBegan(Touch*touch,Event*pEvent);
  1. voidonTouchMoved(Touch*touch,Event*pEvent);
  2. voidonTouchEnded(Touch*touch,Event*pEvent);

下面直接看看在头文件代码

copy
    #ifndef__HELLOWORLD_SCENE_H__
  1. #define__HELLOWORLD_SCENE_H__
  2. #include"cocos2d.h"
  3. #if(CC_TARGET_PLATFORM==CC_PLATFORM_ANDROID)
  4. #include"extensions/cocos-ext.h"
  5. #else
  6. #include"cocos-ext.h"
  7. #endif
  8. #include"cocostudio/CocoStudio.h"
  9. #include"CocosGUI.h"
  10. USING_NS_CC;
  11. USING_NS_CC_EXT;
  12. usingnamespacecocostudio;
  13. namespaceui;
  14. #definePHOTO_COUNT11
  15. publicScrollViewDelegate
  16. {
  17. public:
  18. //there'sno'id'incpp,sowerecommendreturningtheclassinstancepointer
  19. staticcocos2d::Scene*createScene();
  20. //Here'sadifference.Method'init'incocos2d-xreturnsbool,insteadofreturning'id'incocos2d-iphone
  21. virtualboolinit();
  22. //aselectorcallback
  23. voidmenuCloseCallback(cocos2d::Ref*pSender);
  24. voidscrollViewDidZoom(extension::ScrollView*view);
  25. //添加触摸
  26. voidaddListener();
  27. //添加粒子系统test
  28. voidaddParticle();
  29. //implementthe"staticcreate()"methodmanually
  30. CREATE_FUNC(HelloWorld);
  31. //骨骼动画
  32. Armature*m_armature;
  33. //添加UI
  34. voidaddUI();
  35. //添加场景(区别是我自定义函数)
  36. voidaddMyScene();
  37. private:
  38. //根据手势滑动的距离和方向滚动图层
  39. voidadjustScrollView(floatoffset);
  40. //voidsetback();
  41. //存放所有图片
  42. Vector<Sprite*>m_spVec;
  43. //当前的ScrollView
  44. extension::ScrollView*m_scrollView;
  45. //touchBegen时的触摸位置
  46. Pointm_touchPoint;
  47. //当前是第几张图片
  48. intm_currentPage;
  49. };
  50. #endif//__HELLOWORLD_SCENE_H__

上面有很多不是我们这相例子里面的,不过不影响

在来看看源文件里面

copy
    boolHelloWorld::init()
  1. //////////////////////////////
  2. //1.superinitfirst
  3. if(!LayerColor::initWithColor(Color4B(120,120,255)))
  4. returnfalse;
  5. }
  6. autovisibleSize=Director::getInstance()->getVisibleSize();
  7. autoorigin=Director::getInstance()->getVisibleOrigin();
  8. /*autoscrollLayer=LayerColor::create(Color4B(0,255));
  9. scrollLayer->setContentSize(Size(640,480));
  10. scrollLayer->setAnchorPoint(Point(0.5,0.5));
  11. scrollLayer->setPosition(Point(visibleSize.width/2-320,visibleSize.height/2-240));
  12. this->addChild(scrollLayer);*/
  13. m_scrollView=extension::ScrollView::create(Size(visibleSize.width,visibleSize.height));
  14. charspriteName[15];
  15. Layer*photoLayer=Layer::create();
  16. for(inti=1;i<=PHOTO_COUNT;++i)
  17. memset(spriteName,sizeof(spriteName));
  18. sprintf(spriteName,"XJ%d.jpg",i);
  19. autosprite=Sprite::create(spriteName);
  20. sprite->setPosition(Point(visibleSize.width*(i*1.0-0.5),visibleSize.height*0.5));
  21. //缩小一倍
  22. //sprite->setScale(0.5);
  23. photoLayer->addChild(sprite);
  24. m_spVec.pushBack(sprite);
  25. }
  26. //设置layer到滚动层容器中
  27. m_scrollView->setContainer(photoLayer);
  28. //重新设置滚动层的大小,这点很重要。
  29. m_scrollView->setContentSize(Size(PHOTO_COUNT*visibleSize.width,0); background-color:inherit">//设置代理
  30. m_scrollView->setDelegate(this);
  31. m_scrollView->setPosition(Point::ZERO);
  32. //我们只在水平方向上滚动。
  33. m_scrollView->setDirection(extension::ScrollView::Direction::HORIZONTAL);
  34. m_scrollView->setContentOffset(Point(0,0));
  35. this->addChild(m_scrollView);
  36. m_currentPage=0;
  37. //注册触摸,和2.x的不同了,还有一种lambda表达式的写法
  38. /************************************************************************
  39. *lambda表达式的写法
  40. *autolistener1=EventListenerTouchOneByOne::create();
  41. *listener1->onTouchBegan=[](Touch*touch,Event*event)
  42. *{
  43. *//dosomething
  44. *};
  45. *listener1->onTouchMoved=[](Touch*touch,0); background-color:inherit">*listener1->onTouchEnded=[=](Touch*touch,0); background-color:inherit">*_eventDispatcher->addEventListenerWithSceneGraPHPriority(listener,this);
  46. ************************************************************************/
  47. autolistener=EventListenerTouchOneByOne::create();
  48. //设置是否想下传递触摸
  49. listener->setSwallowTouches(true);
  50. listener->onTouchBegan=CC_CALLBACK_2(HelloWorld::onTouchBegan,248)"> listener->onTouchMoved=CC_CALLBACK_2(HelloWorld::onTouchMoved,153); font-weight:bold; background-color:inherit">this);
  51. listener->onTouchEnded=CC_CALLBACK_2(HelloWorld::onTouchEnded,0); background-color:inherit">//将触摸监听添加到eventDispacher中去
  52. _eventDispatcher->addEventListenerWithSceneGraPHPriority(listener,0); background-color:inherit">//注册触摸结束
  53. true;
  54. }
我们在也不需要使用setTouchEnabled这个函数了,你会发现你用了以后,编译时会提示这个函数已经被否决了,可以用setEnable();代替看看如何。

对于上面的触摸我们要重点说说,说完了在继续分析 ScrollView!!!

一、触摸监听listener的创建方式有两种,

1、EventListenerTouchOneByOne
2、EventListenerTouchAllAtOnce,
顾名思义EventListenerTouchOneByOne的意思单点触摸,EventListenerTouchAllAtOnce是多点触摸
而不需要再用设置Delegate的方式来做了。
3.0触摸机制还有个不同的地方,只要是放在最上面的那个精灵,那它的触摸优先级就最高。
我们用的按钮Menu 就是用这种方式设置触摸优先级的。

二、listener的调试优先级
我们进入addEventListenerWithSceneGraPHPriority的定义中看一下,有下面这一行代码

copy
    listener->setFixedPriority(0);


它将精灵的触摸优先级设置成0,从这里我们可以引申出两个问题,一个就是当我们要给精灵设置触摸优先级时,

因为0已经被“官府”征用了,另一个问题就是:如果自己想设置精灵的触摸优先级,那应该怎么做呢?
下面是提供的另外一种添加listener的方法

copy

    _eventDispatcher->addEventListenerWithFixedPriority(listener1,fixedPriority);
在第二个参数里设置触摸优先级,这样就可以了。

三、多个目标如何添加触摸监听
如果多个精灵都想实现拖动的功能,那么这些精灵都可以使用listener1这一个触摸监听,
例如我们有三个精灵,sprite,sprite2,sprite3,他们调用listener1的方式:

copy
    _eventDispatcher->addEventListenerWithSceneGraPHPriority(listener1,sprite1);
  1. _eventDispatcher->addEventListenerWithSceneGraPHPriority(listener1->clone(),sprite2);
  2. _eventDispatcher->addEventListenerWithSceneGraPHPriority(listener1->clone(),sprite3);

当我们进入到clone函数里面,你会发现他实现了复制触摸函数,也就是clone是专门用来这么干这的

copy
    EventListenerTouchOneByOne*EventListenerTouchOneByOne::clone()
  1. autoret=newEventListenerTouchOneByOne();
  2. if(ret&&ret->init())
  3. {
  4. ret->autorelease();
  5. ret->onTouchBegan=onTouchBegan;
  6. ret->onTouchMoved=onTouchMoved;
  7. ret->onTouchEnded=onTouchEnded;
  8. ret->onTouchCancelled=onTouchCancelled;
  9. ret->_claimedTouches=_claimedTouches;
  10. ret->_needSwallow=_needSwallow;
  11. else
  12. CC_SAFE_DELETE(ret);
  13. returnret;
  14. }

四、 删除触摸监听

如果想移除sprite的触摸移动,可以这么做:

copy
    _eventDispatcher->removeEventListeners(EventListener::Type::TOUCH_ONE_BY_ONE);

看完了新版 touch 我们继续看scrollView中的委托方法,实现效果是对象在某个坐标范围内移动时会有缩放效果

copy

    voidHelloWorld::scrollViewDidScroll(extension::ScrollView*view)
  1. //往右移动x坐标为正,往左移为负
  2. autooffPos=view->getContentOffset();
  3. //log("offsetpos%f%f",offPos.x,offPos.y);
  4. for(autosp:m_spVec)
  5. //获得当前对象的X坐标(不管怎么滚动,这个坐标都是不变的)
  6. autopointX=sp->getPositionX();
  7. //将精灵的X坐标+偏移X坐标
  8. floatoffX=pointX+offPos.x;
  9. //我的屏幕大小设置为了480*640,我的图片为320*480,我让图片居中显示(Point(160,320)--->Point(320,320))
  10. //图片图片之间的间隔是一个屏幕(480),我移动图片时不想让他缩放的太小,即只在80-240之间缩放,由于要对称,所以
  11. //相应的240-400也会产生和80-240之间相同的缩放比例,这样后一种需要用480-offx
  12. if(offX>80&&offX<=240)
  13. floatscaleX=offX/240;
  14. sp->setScale(scaleX);
  15. //log("scaleX1%f",scaleX);
  16. elseif(offX>240&&offX<=400)
  17. floatscaleX=(480-offX)/240;
  18. //log("scaleX2%f",0); background-color:inherit">//对于在80-400之外的,我们保持同一缩放比例
  19. sp->setScale(80*1.0/240);
  20. }

我们应该知道,对象放到滚动层上,那么不管对象在scrollView上如何移动,它获得的坐标都是不会变的(如sp->getPosition()是不变的数值),这种情况下,如果我们想实现对象在某个坐标范围内会有缩放效果,那么只是去获取对象的坐标肯定是行不通的,所以肯定要找一个时刻在变化的”参照物”来利用下,该找什么呢?没错,就是scrollView的偏移坐标(scrollView->getContentOffset())!只要scrollView移动一下,那么它的 偏移量也随之改变。我这里就是利用对象的坐标与scrollView的偏移坐标之间不可告人的秘密,从而实现当前的目的。

实现了缩放,怎么去实现图片切换了,我们需要在触摸结束后,来切换ScrollView的偏移来达到切换效果

copy

    boolHelloWorld::onTouchBegan(Touch*touch,Event*pEvent)
  1. m_touchPoint=Director::getInstance()->convertToGL(touch->getLocationInView());
  2. log("beginx=%f,y=%f",m_touchPoint.x,m_touchPoint.y);
  3. }

获得一个触摸初始值,将来与结束值对比来做出一些约束

copy

    voidHelloWorld::onTouchEnded(Touch*touch,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> PointendPoint=Director::getInstance()->convertToGL(touch->getLocationInView());
  1. floatdistance=endPoint.x-m_touchPoint.x;
  2. log("endx=%f,endPoint.x,endPoint.y);
  3. //当我们移动的距离太小了,默认为不移动,也可以防止不小心碰了一下就切换了
  4. if(fabs(distance)<=240)
  5. log("thisis1");
  6. adjustScrollView(0);
  7. if(fabs(distance)>240)
  8. log("thisis2");
  9. adjustScrollView(distance);
  10. }
去看看adjustScrollView里面实现了什么?

copy

    <spanstyle="font-family:Arial;font-size:14px;">voidHelloWorld::adjustScrollView(floatoffset)
  1. if(offset<0)
  2. ++m_currentPage;
  3. if(offset>0)
  4. --m_currentPage;
  5. if(m_currentPage<0)
  6. if(m_currentPage>=PHOTO_COUNT)
  7. m_currentPage=1;
  8. autovisibleSize=Director::getInstance()->getVisibleSize();
  9. //注意这里为负的visibleSize.width,我开始写成正的,一直不出效果
  10. PointcurPoint(-visibleSize.width*m_currentPage,0);
  11. this->m_scrollView->setContentOffset(curPoint);
  12. //setback
  13. }</span><spanstyle="font-family:SimSun;font-size:14px;">
  14. </span>

此程序依然存在一些bug,比如一下子滑动了很远的距离,那样图片的切换就会变得杂乱无章,这个依然可以在 触摸结束里面使用distance 来限制,留给以后去完善吧!!

下面看看效果

原文链接:https://www.f2er.com/cocos2dx/345058.html

猜你在找的Cocos2d-x相关文章