scrollView简介

最新推荐文章于 2020-09-07 10:20:29 发布

weixin_30355437

最新推荐文章于 2020-09-07 10:20:29 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

文章标签：游戏

原文链接：http://www.cnblogs.com/rat-bin/p/4359842.html

1、记得在头文件里包含 “../extensions/cocos-ext.h"，顺便声明下作用域：USING_NS_CC_EXT;
2、在类的继承里加上ScrollViewDelegate，如下：

1. class HelloWorld : public cocos2d::Layer,public ScrollViewDelegate

3、在类的声明中，加上三个scrollView的委托函数，如下：

    1.
    void scrollViewDidScroll(ScrollView* view);
   
    2.
    void scrollViewDidZoom(ScrollView* view);
   
    3.
    void scrollViewMoveOver(ScrollView* view);

4、实在不想继续说废话了，直接看实例吧。

先看头文件：

    01.
    #ifndef __HELLOWORLD_SCENE_H__
   
    02.
    #define __HELLOWORLD_SCENE_H__
   
    03.
     
    04.
    #include "cocos2d.h"
   
    05.
    #include "../extensions/cocos-ext.h"
   
    06.
     
    07.
    USING_NS_CC;
   
    08.
    USING_NS_CC_EXT;
   
    09.
     
    10.
    class HelloWorld : public cocos2d::Layer,public ScrollViewDelegate
   
    11.
    {
   
    12.
    public:
   
    13.
    static cocos2d::Scene* createScene();//获取欢迎画面的Scene
   
    14.
    virtual bool init(); 
   
    15.
     
    16.
    void menuCloseCallback(Ref* pSender);
   
    17.
     
    18.
    CREATE_FUNC(HelloWorld);
   
    19.
     
    20.
    //scroll 委托
   
    21.
    void scrollViewDidScroll(ScrollView* view);
   
    22.
    void scrollViewDidZoom(ScrollView* view);
   
    23.
    void scrollViewMoveOver(ScrollView* view);
   
    24.
     
    25.
    private:
   
    26.
    Vector<Sprite*> sp_vec;//声明一个容器
   
    27.
    };
   
    28.
    #endif // __HELLOWORLD_SCENE_H__

下面看定义

    01.
    bool HelloWorld::init()
   
    02.
    {  
   
    03.
    //首先创建scrollView
   
    04.
    auto scroll_layer = Layer::create();//创建scrollView中的容器层
   
    05.
    scroll_layer->setPosition(Point::ZERO);
   
    06.
    scroll_layer->setAnchorPoint(Point::ZERO);
   
    07.
    scroll_layer->setContentSize(Size(600,300));//设置容器层大小为（600，300）
   
    08.
     
    09.
    auto scrollView = ScrollView::create(Size(400,300),scroll_layer);//创建scrollView，显示窗口大小为(400,300)
   
    10.
    scrollView->setDelegate(this);//设置委托
   
    11.
    scrollView->setDirection(ScrollView::Direction::HORIZONTAL);//设置滚动方向为水平
   
    12.
    scrollView->setPosition(Point(300,200));
   
    13.
    this->addChild(scrollView,2);
   
    14.
     
    15.
    //创建三个对象
   
    16.
    auto boy = Sprite::create("boy.png");//没错，主角又是我们熟悉的那仨。多么温馨。
   
    17.
    boy->setPosition(Point(150,100));
   
    18.
    scroll_layer->addChild(boy,2);
   
    19.
     
    20.
    auto girl = Sprite::create("girl_1.png");
   
    21.
    girl->setPosition(Point(300,100));
   
    22.
    scroll_layer->addChild(girl,2);
   
    23.
     
    24.
    auto girl3 = Sprite::create("girl_3.png");
   
    25.
    girl3->setPosition(Point(450,100));
   
    26.
    scroll_layer->addChild(girl3,2);
   
    27.
     
    28.
    sp_vec.pushBack(boy);//将三个对象放入容器中
   
    29.
    sp_vec.pushBack(girl);
   
    30.
    sp_vec.pushBack(girl3);
   
    31.
     
    32.
    return true;
   
    33.
    }

接下来看下scrollView的委托函数，这里只要看scrollViewDidScroll 就好了。实现效果是对象在某个坐标范围内移动时会有缩放效果。

    01.
    void HelloWorld::scrollViewDidScroll(ScrollView* view)
   
    02.
    {
   
    03.
    //在scrollView拖动时响应该函数
   
    04.
     
    05.
    auto offsetPosX = (view->getContentOffset()).x;//获得偏移X坐标(向右移动，偏移量为正数，向左则为负数）
   
    06.
    //  CCLOG("offset pos is %f , %f",offsetPos.x,offsetPos.y);
   
    07.
     
    08.
    //for 循环遍历容器中的每个精灵
   
    09.
    for( auto e : sp_vec )
   
    10.
    {
   
    11.
    auto pointX = e->getPositionX();//获得当前对象的X坐标（不管怎么滚动，这个坐标都是不变的）
   
    12.
    float endPosX = pointX + offsetPosX;//将精灵的 X坐标 + 偏移X坐标
   
    13.
     
    14.
    //当endPosX在 150~250 范围，则对象的大小从左向右递增
   
    15.
    if( endPosX > 150 && endPosX < 250 )
   
    16.
    {
   
    17.
    float x = endPosX / 150;//放大倍数为 endPosX / 150;
   
    18.
    e->setScale(x);
   
    19.
    CCLOG("x = %f",x);
   
    20.
    }
   
    21.
    //当endPosX在 250~350 范围，则对象的大小从左向右递减
   
    22.
    else if( endPosX > 250 && endPosX < 350 )
   
    23.
    {
   
    24.
    //下面这个公式不好解释，我就这么说吧：
   
    25.
    //假设 endPosX = 200，那么放大倍数应该是 200 / 150 = 1.33左右，那么当endPosX = 300时，出于对称的原理，我们以250为对称中心，那么
   
    26.
    //300 的放大倍数也应该是 1.33。这就是下面的公式由来
   
    27.
    float a = endPosX - 250;
   
    28.
    float b = 250 - a;
   
    29.
     
    30.
    float x = b / 150;
   
    31.
    e->setScale(x);
   
    32.
    }
   
    33.
    else
   
    34.
    {
   
    35.
    //不是在上面的范围，则设置为正常大小
   
    36.
    e->setScale(1.0f);
   
    37.
    }
   
    38.
    }  
   
    39.
    }
   
    40.
    void HelloWorld::scrollViewDidZoom(ScrollView* view)
   
    41.
    {
   
    42.
    //do something
   
    43.
    }
   
    44.
    void HelloWorld::scrollViewMoveOver(ScrollView* view)
   
    45.
    {
   
    46.
    //do something
   
    47.
    }

恩，注释写的很清楚啦，但我还是要稍微补充一些东东：我们应该知道，对象放到滚动层上（如scroll_layer->addChild(boy)），那么不管对象在scrollView上如何移动，它获得的坐标都是不会变的（如boy->getPosition()是不变的数值），这种情况下，如果我们想实现对象在某个坐标范围内会有缩放效果，那么只是去获取对象的坐标肯定是行不通的，所以肯定要找一个时刻在变化的”参照物”来利用下，该找什么呢？没错，就是scrollView的偏移坐标（scrollView->getContentOffset()）！只要scrollView移动一下，那么它的偏移量也随之改变。我这里就是利用对象的坐标与scrollView的偏移坐标之间不可告人的秘密，从而实现当前的目的。

下面看下运行效果。