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. /**
2. *@jsNA
3. *@luaNA
4. */
5. virtualvoidscrollViewDidScroll(ScrollView*view)=0;
6. /**
7. *@jsNA
8. *@luaNA
9. */
10. voidscrollViewDidZoom(ScrollView*view)=0;

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

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

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

在来看看源文件里面

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. }

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

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

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

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

listener->setFixedPriority(0);

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

copy

_eventDispatcher->addEventListenerWithFixedPriority(listener1，fixedPriority);

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

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

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的触摸移动，可以这么做：

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

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的偏移来达到切换效果

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. }

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>

下面看看效果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!