Cocos2dx tips (14) ScrollView for scaling

At this stage, the mood is messy, so the beginning of this article will not be nonsense. (Who said my uncle was here !~~)
Speaking of Uncle Brother, I suddenly thought of a beautiful girl in the league of legends called evreia. Her cousin ID was actually called: Tired uncle, funny (haha, a little cold ~~ Yes, I don't mean anything ).

------------
A user asked me about the usage of scrollView the day before yesterday. As I was not clear about it on QQ, I wrote this blog at night.
The function of this article is to use scrollView to drag an object, the object will be zoomed in or out when it is moved to a fixed range.Start.


Before entering the topic, I will briefly introduce how to use scrollView (we will certainly use it as well ~~) :
1. Remember to include"../Extensions/cocos-ext.h"By the way, declare the scope:USING_NS_CC_EXT;
2. AddScrollViewDelegate, As follows:

class HelloWorld : public cocos2d::Layer,public ScrollViewDelegate

3. In the class declaration, Add three delegate functions of scrollView, As follows:

void scrollViewDidScroll(ScrollView* view);void scrollViewDidZoom(ScrollView* view);void scrollViewMoveOver(ScrollView* view);

4. I really don't want to talk nonsense anymore. Check the instance directly.

First look at the header file:

# 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 (); // obtain the Scene virtual bool init (); void menuCloseCallback (Ref * pSender); CREATE_FUNC (HelloWorld); // scroll delegates void scrollViewDidScroll (ScrollView * view ); void scrollViewDidZoom (ScrollView * view); void scrollViewMoveOver (ScrollView * view); private: Vector <Sprite *> sp_vec; // declare a container }; # endif/_ HELLOWORLD_SCENE_H __

See the definition below

Bool HelloWorld: init () {// first create scrollViewauto scroll_layer = Layer: create (); // create the container Layer scroll_layer-> setPosition (Point: ZERO) in the scrollView ); scroll_layer-> setAnchorPoint (Point: ZERO); scroll_layer-> setContentSize (Size (600,300); // set the container layer Size to (600,300) auto scrollView = ScrollView :: create (Size (400,300), scroll_layer); // create a scrollView. The displayed window Size is (400,300) scrollView-> setDelegate (this); // set the delegate scrollView-> setDirection (Scrol LView: Direction: HORIZONTAL); // set the scroll Direction to HORIZONTAL scrollView-> setPosition (Point (300,200); this-> addChild (scrollView, 2 ); // create three objects: auto boy = Sprite: create ("boy.png"); // yes, the main character is the one we are familiar. What a warmth. 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); // put the three objects into the container sp_vec.pushBack (girl ); sp_vec.pushBack (girl3); return true ;}

Next, let's take a look at the delegate function of scrollView. Here we only need to look at scrollViewDidScroll. The implementation effect is that the object will be scaled when moving within a coordinate range.

Void HelloWorld: scrollViewDidScroll (ScrollView * view) {// returns the function auto offsetPosX = (view-> getContentOffset () When scrollView is dragged ()). x; // obtain the offset X coordinate (moving to the right, the offset is positive, and the offset is negative to the left) // CCLOG ("offset pos is % f, % f", offsetPos. x, offsetPos. y); // for cyclically traverses each genie in the container for (auto e: sp_vec) {auto pointX = e-> getPositionX (); // obtain the X coordinate of the current object (this coordinate remains unchanged no matter how it is rolled) float endPosX = pointX + offsetPosX; // convert X coordinates of the genie + offset X coordinates. // when endPosX is at 150 ~ In the range of 250, the object size increases from left to right. if (endPosX> 150 & endPosX <250) {float x = endPosX/150; // The magnification is endPosX/150; e-> setScale (x); CCLOG ("x = % f", x);} // when endPosX is in 250 ~ In the range of 350, the object size decreases from left to right. else if (endPosX> 250 & endPosX <350) {// The following formula is hard to explain. Let's just say: // If endPosX = 200, the magnification should be around 200/150 = 1.33. When endPosX = 300, we use 250 as the symmetric center based on the symmetric principle, then the magnification of // 300 should also be 1.33. This is the formula below: float a = endPosX-250; float B = 250-a; float x = B/150; e-> setScale (x );} else {// not in the preceding range, set it to normal size e-> setScale (1.0f) ;}} void HelloWorld: scrollViewDidZoom (ScrollView * view) {// do something} void HelloWorld: scrollViewMoveOver (ScrollView * view) {// do something}

Well, the annotations are quite clear, but I still need to add something: we should know that objects are placed on the scroll layer (such as scroll_layer-> addChild (boy )), no matter how the object moves on the scrollView, the coordinates it obtains will not change (for example, boy-> getPosition () is a constant value). In this case, if we want to scale an object within a certain coordinate range, it is definitely not feasible to retrieve the coordinates of the object, so I must find a "reference object" that is changing at a time. What should I find? That's right. It's the offset coordinate of scrollView (scrollView-> getContentOffset ())! As long as scrollView is moved, its offset also changes. Here I am using the secret between the object coordinates and the scrollView offset coordinates to achieve the current purpose.

The following describes the running effect.

Respect Original, reprinted please indicate Source: http://blog.csdn.net/star530/article/details/25658725