COCOS2DX tips for "reprint" (14) ScrollView Zoom effect

COCOS2DX Tips (14) ScrollView Zoom effect

At this stage, the mood is quite chaotic, so the beginning of this article is not nonsense. （ who said the big uncle came to me with who urgent! ~~）
Speaking of the big uncle, I suddenly thought of the League of Heroes have a beautiful explanation called Ivele, her cousin ID unexpectedly called: Uncle tired Ah, funny (oh, a bit cold ~ ~, I said no nonsense).

------------
The day before yesterday, a netizen asked me some about the use of ScrollView, because in the QQ is really not clear, so the use of the night time to write this blog out.
The function to be implemented in this article is that when you drag an object with ScrollView, the object moves to a fixed range with an effect that zooms in and out. Start below.


before I get to the point, I will briefly introduce the next ScrollView how to use it (presumably everyone would use ~ ~):
1. Remember to include in the header file ". /extensions/cocos-ext.h ", by the way, declare the following scope: Using_ns_cc_ext;
2, in the inheritance of the class plus scrollviewdelegateAs follows:
?

1	classHelloWorld : public cocos2d::Layer,publicScrollViewDelegate

3. In the declaration of the class, plus three scrollview of a delegate functionAs follows:
?

123	voidscrollViewDidScroll(ScrollView* view);void scrollViewDidZoom(ScrollView* view);voidscrollViewMoveOver(ScrollView* view);

4, really do not want to continue to say nonsense, directly see the example bar.

First-in-the- file:
?

12345678910111213141516171819202122232425262728

#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*>

see below for definitions
?

123456789101112131415161718192021222324252627282930313233

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

next look at the ScrollView of the delegate function, here just look at Scrollviewdidscroll just fine. The implementation effect is that the object will have a zoom effect when it moves within a coordinate range.
?

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647

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}

Well, the notes are very clear, but I'd like to add a little bit: we should know that objects are placed on the rolling layer (such as scroll_layer->addchild (Boy)), so no matter how the object moves on the ScrollView, The coordinates it obtains are not changed (such as Boy->getposition () is the constant value), in this case, if we want to implement the object in a coordinate range will have a scaling effect, then just to get the coordinates of the object is definitely not feasible, so must find a moment in the change of " Reference "To use the next, what to look for?" Yes, that's ScrollView's offset coordinates (SCROLLVIEW->GETCONTENTOFFSET ())! As soon as the scrollview moves, so does its offset. I am here to use the object's coordinates and ScrollView offset coordinates between the hidden secret, so as to achieve the current purpose.

Let's look at the effect of the operation.

Respect original, reprint please indicate source: http://blog.csdn.net/star530/article/details/25658725

COCOS2DX tips for "reprint" (14) ScrollView Zoom effect