【转载】Cocos2dx 小技巧（十四）ScrollView实现缩放效果

Cocos2dx 小技巧（十四）ScrollView实现缩放效果
这阶段心绪比较乱，所以这篇开头就不扯淡了。（谁说大姨夫来了我跟谁急！~~）
说到大姨夫我突然想到英雄联盟有个美女解说叫伊芙蕾亚，她的堂弟ID竟然叫：姨夫累呀，好笑吧（呵呵，有点冷~~额，我都说不扯淡了）。

------------
前天有个网友问我一些关于scrollView的用法，由于在QQ上实在讲不清，所以就利用晚上的时间写这篇博客出来了。
本篇要实现的功能是用scrollView 拖动对象时，对象移动到某个固定范围会有放大、缩小的效果。下面开始。

在进入正题前我先简短的介绍下scrollView应该怎么用吧（想必大家也都会用~~）：
1、记得在头文件里包含 “../extensions/cocos-ext.h"，顺便声明下作用域：USING_NS_CC_EXT;
2、在类的继承里 加上ScrollViewDelegate，如下：

?


1

class HelloWorld : public cocos2d::Layer,public ScrollViewDelegate

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

?


1

2

3

void scrollViewDidScroll(ScrollView* view);

void scrollViewDidZoom(ScrollView* view);

void scrollViewMoveOver(ScrollView* view);

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

先看头文件：

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

#ifndef __HELLOWORLD_SCENE_H__

#define __HELLOWORLD_SCENE_H__

#include "cocos2d.h"

#include "../extensions/cocos-ext.h"

USING_NS_CC;

USING_NS_CC_EXT;

class HelloWorld : public cocos2d::Layer,public ScrollViewDelegate

{

public:

    static cocos2d::Scene* createScene();//获取欢迎画面的Scene

    virtual bool init(); 

    void menuCloseCallback(Ref* pSender);

    

    CREATE_FUNC(HelloWorld);

    //scroll 委托

    void scrollViewDidScroll(ScrollView* view);

    void scrollViewDidZoom(ScrollView* view);

    void scrollViewMoveOver(ScrollView* view);

private:

    Vector<sprite*> sp_vec;//声明一个容器

};

#endif // __HELLOWORLD_SCENE_H__</sprite*>

下面看定义

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

bool HelloWorld::init()

{  

    //首先创建scrollView

    auto scroll_layer = Layer::create();//创建scrollView中的容器层

    scroll_layer->setPosition(Point::ZERO);

    scroll_layer->setAnchorPoint(Point::ZERO);

    scroll_layer->setContentSize(Size(600,300));//设置容器层大小为（600，300）

    auto scrollView = ScrollView::create(Size(400,300),scroll_layer);//创建scrollView，显示窗口大小为(400,300)

    scrollView->setDelegate(this);//设置委托

    scrollView->setDirection(ScrollView::Direction::HORIZONTAL);//设置滚动方向为水平

    scrollView->setPosition(Point(300,200));

    this->addChild(scrollView,2);

    //创建三个对象

    auto boy = Sprite::create("boy.png");//没错，主角又是我们熟悉的那仨。多么温馨。

    boy->setPosition(Point(150,100));

    scroll_layer->addChild(boy,2);

    auto girl = Sprite::create("girl_1.png");

    girl->setPosition(Point(300,100));

    scroll_layer->addChild(girl,2);

    auto girl3 = Sprite::create("girl_3.png");

    girl3->setPosition(Point(450,100));

    scroll_layer->addChild(girl3,2);

 

    sp_vec.pushBack(boy);//将三个对象放入容器中

    sp_vec.pushBack(girl);

    sp_vec.pushBack(girl3);

       return true;

}

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

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

void HelloWorld::scrollViewDidScroll(ScrollView* view)

{

    //在scrollView拖动时响应该函数

    auto offsetPosX = (view->getContentOffset()).x;//获得偏移X坐标(向右移动，偏移量为正数，向左则为负数）

//  CCLOG("offset pos is %f , %f",offsetPos.x,offsetPos.y);

    //for 循环遍历容器中的每个精灵

    for( auto e : sp_vec )

    {

        auto pointX = e->getPositionX();//获得当前对象的X坐标（不管怎么滚动，这个坐标都是不变的）

        float endPosX = pointX + offsetPosX;//将精灵的 X坐标 + 偏移X坐标

        //当endPosX在 150~250 范围，则对象的大小从左向右递增

        if( endPosX > 150 && endPosX < 250 )

        {

            float x = endPosX / 150;//放大倍数为 endPosX / 150;

            e->setScale(x);

            CCLOG("x = %f",x);

        }

        //当endPosX在 250~350 范围，则对象的大小从左向右递减

        else if( endPosX > 250 && endPosX < 350 )

        {

            //下面这个公式不好解释，我就这么说吧：

            //假设 endPosX = 200，那么放大倍数应该是 200 / 150 = 1.33左右，那么当endPosX = 300时，出于对称的原理，我们以250为对称中心，那么

            //300 的放大倍数也应该是 1.33。这就是下面的公式由来

            float a = endPosX - 250;

            float b = 250 - a;

            float x = b / 150;

            e->setScale(x);

        }

        else

        {

            //不是在上面的范围，则设置为正常大小

            e->setScale(1.0f);

        }

    }  

}

void HelloWorld::scrollViewDidZoom(ScrollView* view)

{

    //do something

}

void HelloWorld::scrollViewMoveOver(ScrollView* view)

{

    //do something

}

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

下面看下运行效果。

尊重原创，转载请注明来源：http://blog.csdn.net/star530/article/details/25658725

时间： 2024-10-24 11:06:56

【转载】Cocos2dx 小技巧（十四）ScrollView实现缩放效果的相关文章

Cocos2dx 小技巧（十四）ScrollView实现缩放效果

这阶段心绪比較乱,所以这篇开头就不扯淡了.(谁说大姨夫来了我跟谁急!~~)说到大姨夫我突然想到英雄联盟有个美女讲解叫伊芙蕾亚,她的堂弟ID居然叫:姨夫累呀,好笑吧(呵呵,有点冷~~额,我都说不扯淡了).------------前天有个网友问我一些关于scrollView的使用方法,因为在QQ上实在讲不清,所以就利用晚上的时间写这篇博客出来了.本篇要实现的功能是用scrollView 拖动对象时,对象移动到某个固定范围会有放大.缩小的效果.以下開始.在进入正题前我先简短的介绍下scrollView

Cocos2dx 小技巧（十二） 一种可行的系列动画播放方式

定义: 将一个类(Adaptee)的接口转换成客户(Client)希望的另外一个接口(Target). 目标接口(Target):客户所期待的接口.目标可以是具体的或抽象的类,也可以是接口. 需要适配的类(Adaptee):需要适配的类或适配者类. 适配器(Adapter):使得一个东西适合另一个东西的东西.百度中定义为:接口转换器.通过包装一个需要适配的对象,把源接口转换成目标接口. 为什么要适配:需要的东西已做好,但是不能用,短时间又不能改造,想办法适配它. 作用: 使得原本由于接口不兼容而

Cocos2dx 小技巧（十三）聊聊坐标系

一好友考上了空姐,她说:以后基本上不会回来了,等下次见面时请叫我白富美!虽然有点羡慕,但我依旧不甘示弱回复:下次见面时请叫我高富帅!未来,谁说得准呢? ------------------有段时间没用到onTouchBegan,近来写代码时发现对convertToGL(),getLocation()这些接口都有点陌生了,所以趁这次机会就写个总结到博客里,下次忘了就来博客里看看,当笔记用咯. 首先脑补下基础知识吧:1.OpenGL坐标系:该坐标系原点在屏幕左下角,x轴向右,y轴向上.这也就是coc

【转】cocos2d-x游戏开发(十四)用shader使图片背景透明

转自:http://blog.csdn.net/dawn_moon/article/details/8631783 好吧,终于抽时间写这篇文章了. 手头上有很多人物行走图,技能特效图等,但这些图都有个纯黑色背景,怎么样将内容显示出来,让背景透明呢?前段时间搞了一下,感谢群里的童鞋们,提供了思路和方法. 这里用shader处理了像素,使黑色背景透明,直接上代码 ShaderSprite.h 1 #ifndef __TestShader__ShaderSprite__ 2 #define __Tes

《企业云桌面实施》-小技巧-08-建筑设计行业-真实效果-漫游动画-三维视图渲染

<企业云桌面实施>-系列博文-陆续更新中 **************************************************************************************************** <企业云桌面实施>-小技巧-01-规划注意事项 http://dynamic.blog.51cto.com/711418/1884922 <企业云桌面实施>-小技巧-02-使用ISO光驱安装esxi6.5http://dynami

Cocos2dx 小技巧（九）现成的粒子特效

和高中的她 差点儿相同有两三年没见面了吧.下午她正好来泉州.我俩出来一起吃了个饭. 怎么说呢,自从高中毕业后我俩的联系就少了非常多.大学期间也就见过两三面吧. 现在毕业也快一年了,她已是人妇,而我自己的感情也是经历的长期的稳定与最近的跌宕.事实上那份感觉一直都不曾改变,变了的是周边不断影响自己的人和事. 你要好好的幸福下去.而我也在争取幸福的路上. ----- 这篇讲的是粒子,事实上我对粒子这一块没什么研究,由于当初刚開始接粗cocos2dx时.总经理和我说粒子这块能够临时不去了解.由于还用不到

从零开始のcocos2dx生活（十）ScrollView

目录 简介 基础变量 ScrollViewDelegate Direction _dragging _container _touchMoved _bounceable _touchLength 方法 create setContentSize deaccelerateScrolling maxContainerOffset 和 minContainerOffset 触摸的各阶段 onTouchBegan onTouchMoved onTouchEnded 简介 scrollView是在一定可视

Cocos2dx 小技巧（一）预定义文件路径

我们的主题是:有些技巧你不知道不要紧,但知道后会很牛逼. 假设在项目工程的Resource有好多个目录,如image,fonts,Menu,InterfaceUI,等等,而我要创建的几个精灵对应的图片分别在这几个目录里,如: auto sprite = Sprite::create("image/sp.png"); 但要命的是我记忆力不好(假的),忘了图片都分别在哪个目录里,这时候就要跑到目录里去搜索下,这样是不是很麻烦?(说不麻烦的现在就给我出去!out!). 现在有一种办法可以从根

Cocos2dx 小技巧（三）Label的换行

好了,这次又把Label这货拉出来鞭一鞭.我先创建一个label std::string star_str = "star is not star in the sky,it is on heart";//先定义一个string auto m_label = LabelTTF::create(star_str,"Arial",25);//创建一个labelm_label->setPosition(Point(300,300));this->addChil