生命游戏(两),有一种东西叫CCScrollView

生命游戏(两),有一种东西叫CCScrollView

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

订婚app要么game’肯定不会陌生:CCScrollView并且CCTableView。

假如我不知道是什么CCScrollView,再看看testcpp要么testlua样品棒。

先说说CCScrollView:.cpp和.h文件在\cocos2d-x-2.2.3\extensions\GUI\文件夹下,所以要使用CCScrollView首先要引入头文件#include “cocos-ext.h”,以及空间名USING_NS_CC_EXT; 假设头文件报错,那么请检查project的配置。这里就不多说了无非是引用,link的输入和c/c++里面的附加包括文件夹。(ps:假设是个简单的project个人建议你又一次建个新project)。

#include "cocos-ext.h"
USING_NS_CC_EXT;
void HelloWorld::initScroll(){
  CCSize size = CCDirector::sharedDirector()->getWinSize();
  CCScrollView* scroll = CCScrollView::create(size); //scroll->setViewSize(size);
  scroll->setDirection(kCCScrollViewDirectionVertical);  //设置滚动方向
  CCSprite* p1 = CCSprite::create("HelloWorld.png");
  p1->ignoreAnchorPointForPosition(true);
  CCSprite* p2 = CCSprite::create("HelloWorld.png");
  p2->setPosition(ccp(0,size.height));
  p2->ignoreAnchorPointForPosition(true);
  CCLayer* conLayer = CCLayer::create();
  conLayer->addChild(p1);
  conLayer->addChild(p2);
  scroll->setContainer(conLayer);
  scroll->setContentSize(CCSizeMake(size.width,320*2));
  this->addChild(scroll);
}

执行以上代码。我们就能够使用Scrollview了,总结起来就是

1、create scrollview 

2、create Container层

3、将内容add到containner层

4、container层add到scrollview,scrollview增加指定layer或者scene

这里有几个点须要注意:

1、setContentSize不是scrollview大小,而是可滑动面的大小,viewSize是滑动面大小。

2、setContentSize不能放在setContainer前面,假设放在前面。那么这个滑动后回自己主动回到第一页。

3、container层中的内容position须要手动设定

4、假设不create container层,那么CCScrollView会给你创建个一个,可是直接在scrollview下add多个node仅仅会保留一个,原因在后面分析。

好了。最easy的部分写完了,以下分析一下CCScrollView的源代码和一些让人蛋疼的东西。

CCScrollView::CCScrollView()
: m_fZoomScale(0.0f)
, m_fMinZoomScale(0.0f)
, m_fMaxZoomScale(0.0f)
, m_pDelegate(NULL)			   //view管理器
, m_eDirection(kCCScrollViewDirectionBoth)  //滚动类型
, m_bDragging(false)
, m_pContainer(NULL)                        //container层
, m_bTouchMoved(false)
, m_bBounceable(false)                      //弹性开关
, m_bClippingToBounds(false)                //弹性开关
, m_fTouchLength(0.0f)
, m_pTouches(NULL)
, m_fMinScale(0.0f)
, m_fMaxScale(0.0f)
{

}
CCScrollView* CCScrollView::create(CCSize size, CCNode* container/* = NULL*/)
{
    CCScrollView* pRet = new CCScrollView();
    if (pRet && pRet->initWithViewSize(size, container))
    {
        pRet->autorelease();
    }
    else
    {
        CC_SAFE_DELETE(pRet);
    }
    return pRet;
}
bool CCScrollView::initWithViewSize(CCSize size, CCNode *container/* = NULL*/)
{
    if (CCLayer::init())//scrollview继承CCLayer
    {
        m_pContainer = container;
        
        if (!this->m_pContainer)
        {
        m_pContainer = CCLayer::create();//create container层
            this->m_pContainer->ignoreAnchorPointForPosition(false);
            this->m_pContainer->setAnchorPoint(ccp(0.0f, 0.0f));
        }

        this->setViewSize(size);//设置视图尺寸,假设使用CCScrollView::create() 引擎会设置 size 为 CCSizeMake(200, 200)


        setTouchEnabled(true); //scrollview 自然是要有触摸的
        m_pTouches = new CCArray();//触点 array
        m_pDelegate = NULL;
        m_bBounceable = true;    //默认弹性开启
        m_bClippingToBounds = true;
        //m_pContainer->setContentSize(CCSizeZero);
        m_eDirection  = kCCScrollViewDirectionBoth;  //默认both滚动模式
        m_pContainer->setPosition(ccp(0.0f, 0.0f));
        m_fTouchLength = 0.0f;
        
        this->addChild(m_pContainer);
        m_fMinScale = m_fMaxScale = 1.0f;  //默认放缩1.0
        m_mapScriptHandler.clear();  //清理回调列表
        return true;
    }
    return false;
}

我们补习一下滚动模式,CCScrollView中定义了一个枚举类型来表示滚动模式

typedef enum {
    kCCScrollViewDirectionNone = -1,   //不滚动
    kCCScrollViewDirectionHorizontal = 0,  //横向滚动
    kCCScrollViewDirectionVertical,   //竖向滚动
    kCCScrollViewDirectionBoth   //双向滚动
} CCScrollViewDirection;

初始化就先讲到这,在看看属性设置上一些东西

void CCScrollView::setContainer(CCNode * pContainer)
{
    // Make sure that 'm_pContainer' has a non-NULL value since there are
    // lots of logic that use 'm_pContainer'.
    if (NULL == pContainer)
        return;
    this->removeAllChildrenWithCleanup(true);  //这个就是多次使用setContainer却仅仅能显示一个sprite的原因
    this->m_pContainer = pContainer //假设setContentSize在setContainer之前,实际上设置的size给引擎自带的container,而不是目标container
    this->m_pContainer->ignoreAnchorPointForPosition(false);
    this->m_pContainer->setAnchorPoint(ccp(0.0f, 0.0f));
    this->addChild(this->m_pContainer);
    this->setViewSize(this->m_tViewSize);
}
void CCScrollView::setViewSize(CCSize size)
{
    m_tViewSize = size;
    CCLayer::setContentSize(size); //这里不是container的size。而是scrollview的size
}
void CCScrollView::setContentSize(const CCSize & size)
{
    if (this->getContainer() != NULL)
    {
        this->getContainer()->setContentSize(size); //这里才是设置container的size
        this->updateInset();                        //设置弹性状态下虚拟边界值。
    }
}
/**尽管setcontainer仅仅能用一次。可是addchild却能够满足我们的愿望。

 * make sure all children go to the container */void CCScrollView::addChild(CCNode * child, int zOrder, int tag){    child->ignoreAnchorPointForPosition(false);    child->setAnchorPoint(ccp(0.0f, 0.0f));    if (m_pContainer != child) {        m_pContainer->addChild(child, zOrder, tag);    } else {        CCLayer::addChild(child, zOrder, tag);    }}

属性设置完了,显示是没问题了。只是scrollview究竟是怎样滚动的?

首先:

    virtual bool ccTouchBegan(CCTouch *pTouch, CCEvent *pEvent);
    virtual void ccTouchMoved(CCTouch *pTouch, CCEvent *pEvent);
    virtual void ccTouchEnded(CCTouch *pTouch, CCEvent *pEvent);

代码太多,这里就不全贴出来了。有兴趣能够自己去看源代码。让我们把主要代码摘出来

void CCScrollView::setContentOffset(CCPoint offset, bool animated/* = false*/) //此方法在ccTouchMoved中调用,功能是将container移动到指定位置
{
    if (animated)
    { //animate scrolling
        this->setContentOffsetInDuration(offset, BOUNCE_DURATION);//将container移动到指定位置,BOUNCE_DURATION=0.15f。移动时间
    } 
    else
    { //set the container position directly
        if (!m_bBounceable)             //未开启边界弹性
        {
            const CCPoint minOffset = this->minContainerOffset();
            const CCPoint maxOffset = this->maxContainerOffset();
            
            offset.x = MAX(minOffset.x, MIN(maxOffset.x, offset.x));
            offset.y = MAX(minOffset.y, MIN(maxOffset.y, offset.y));
        }


        m_pContainer->setPosition(offset);


        if (m_pDelegate != NULL)
        {
            m_pDelegate->scrollViewDidScroll(this);   //回调虚函数,由子类override。lua中能够注冊该函数的回调
        }
    }
}
void CCScrollView::setContentOffsetInDuration(CCPoint offset, float dt) //好了,动画来了。
{
    CCFiniteTimeAction *scroll, *expire;
    scroll = CCMoveTo::create(dt, offset);
    expire = CCCallFuncN::create(this, callfuncN_selector(CCScrollView::stoppedAnimatedScroll));
    m_pContainer->runAction(CCSequence::create(scroll, expire, NULL));
    this->schedule(schedule_selector(CCScrollView::performedAnimatedScroll));  
}
void CCScrollView::deaccelerateScrolling(float dt) //该方法是在ccTouchEnded中的主要内容 ,当滑动停止的时候,container还会移动一段距离。
    if (m_bDragging) //拖拽的话该方法不会多次循环调用
    {
        this->unschedule(schedule_selector(CCScrollView::deaccelerateScrolling));
        return;
    }
    float newX, newY;
    CCPoint maxInset, minInset;
    
    m_pContainer->setPosition(ccpAdd(m_pContainer->getPosition(), m_tScrollDistance));
    
    if (m_bBounceable)            //弹性设置边界,该值>设置containerSize值。
    {
        maxInset = m_fMaxInset;
        minInset = m_fMinInset;
    }
    else
    {
        maxInset = this->maxContainerOffset();
        minInset = this->minContainerOffset();
    }
    
    //check to see if offset lies within the inset bounds
    newX     = MIN(m_pContainer->getPosition().x, maxInset.x);
    newX     = MAX(newX, minInset.x);
    newY     = MIN(m_pContainer->getPosition().y, maxInset.y);
    newY     = MAX(newY, minInset.y);
    
    newX = m_pContainer->getPosition().x;
    newY = m_pContainer->getPosition().y;
    
    m_tScrollDistance     = ccpSub(m_tScrollDistance, ccp(newX - m_pContainer->getPosition().x, newY - m_pContainer->getPosition().y));
    m_tScrollDistance     = ccpMult(m_tScrollDistance, SCROLL_DEACCEL_RATE);
    this->setContentOffset(ccp(newX,newY));
    //滑动灵敏度推断,边界推断,结束定时任务。在每次移动结束都会调用
    if ((fabsf(m_tScrollDistance.x) <= SCROLL_DEACCEL_DIST &&
         fabsf(m_tScrollDistance.y) <= SCROLL_DEACCEL_DIST) ||
        newY > maxInset.y || newY < minInset.y ||
        newX > maxInset.x || newX < minInset.x ||
        newX == maxInset.x || newX == minInset.x ||
        newY == maxInset.y || newY == minInset.y)
    {
        this->unschedule(schedule_selector(CCScrollView::deaccelerateScrolling));
        this->relocateContainer(true); //又一次设置locate。边界弹性
    }
}
void CCScrollView::relocateContainer(bool animated)  //没什么好说的,推断边界。如超出的话就移动回来
{
    CCPoint oldPoint, min, max;
    float newX, newY;
    
    min = this->minContainerOffset();
    max = this->maxContainerOffset();
    
    oldPoint = m_pContainer->getPosition();


    newX     = oldPoint.x;
    newY     = oldPoint.y;
    if (m_eDirection == kCCScrollViewDirectionBoth || m_eDirection == kCCScrollViewDirectionHorizontal)
    {
        newX     = MAX(newX, min.x);
        newX     = MIN(newX, max.x);
    }


    if (m_eDirection == kCCScrollViewDirectionBoth || m_eDirection == kCCScrollViewDirectionVertical)
    {
        newY     = MIN(newY, max.y);
        newY     = MAX(newY, min.y);
    }


    if (newY != oldPoint.y || newX != oldPoint.x)
    {
       this->setContentOffset(ccp(newX, newY), animated);
    }
}

好了。到这里基本上大体就算一站了,还有些细节以及放缩就不在细说。

那么我们搞了这么久到底是要干什么?非常easy。我们希望滑动能够自己主动匹配图片的大小。

怎么做那?

方法一:改动源代码:

1、加入一个成员变量。记录初始滑动位置。

2、加入成员变量:图片匹配size

3、改动relocateContainer,max。min取近期符合要求的坐标。setContentOffset or setContentOffsetInDuration就可以

原理就是:

  1. touch開始的时候记录初始位置。在touch结束的时候, 获取结束时刻的时间和位置. 通过滑动距离等推断是否已经翻页,然后设置终于目标坐标。
    • 方法二:自己定义控件,继承CCScrollView。在ccTouchEnded末尾调用自己定义函数,实现以上功能。

    • 假设是lua开发,我推荐第一中方法,高速,改动相对少些。不用新增pkg文件。假设是c++的话,还是继承的好。
    • 试着改动下源代码,不仅有利于学习,并且有快感!!!




版权声明:本文博客原创文章,博客,未经同意,不得转载。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117631.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 神思SS628(100)型第二代身份证验证阅读机具二次开发

    神思SS628(100)型第二代身份证验证阅读机具二次开发神思SS628(100)型第二代身份证验证阅读机具是神思电子一款经典产品B/S项目中需要读取个人的身份信息进行登记,为了提高效率,选择了神思电子的神思SS628(100)型第二代身份证验证阅读机,具体使用步骤如下:首先下载驱动包,由于该功能也是基于ocx插件进行交互的,,所以要先安装驱动下面提供下载地址:根据自己的系统型号进行安装链接:https://pan.baidu.com/s/15…

  • ubuntu安装vscode的两种方法_vscode vim

    ubuntu安装vscode的两种方法_vscode vimUbuntu16.04安装VisualStudioCode出现问题的解决一、前述关于ubuntu安装VisualStudioCode这里不在说明。这里记录两点自己安装过程中遇到的问题。二、umake安装出现问题解决usage:umakeweb[-h]{firefox-dev,phantomjs}…umakeweb:error:argumentframew…

  • jQuery ajax 例子「建议收藏」

    jQuery ajax 例子「建议收藏」 转自http://www.ibm.com/developerworks/cn/xml/x-ajaxjquery.html使用jQuery将使

  • java中的io流知识总结_java中的io流开发用的多吗

    java中的io流知识总结_java中的io流开发用的多吗通过前面的简单学习,我们已经能够大致了解了关于文件的操作,但是能够明显感受到在执行其他的操作的时候,还是会有一些不方便的地方存在,因此今天我们会学习另外四个IO流来帮助我们对文件进行操作,这四个流分别是缓冲流、转换流、序列化、打印流。好了,废话不多说,我直接开始今天的学习吧!……

    2022年10月20日
  • 全局路径规划:图搜索算法介绍4(RRT/RRT*)

    全局路径规划:图搜索算法介绍4(RRT/RRT*)本节介绍RRT/RRT*的算法:RRT的基本原理是:我们首先初始化我们的起点,接下来随机撒点,选出一个x_rand,在x_near和x_rand之间选择一个x_new,再在原有的已经存在的x中找到离这个点最近的点将这两个点连接起来,同时这个最近的点也会作为x_new的父节点。RRT算法的伪代码如下:对照着图,再看一次:首先我们随机生成一个点,x_rand然后再tree上面…

    2022年10月24日
  • mysql5.7安装及配置超详细教程_mysql安装教程 linux

    mysql5.7安装及配置超详细教程_mysql安装教程 linuxMySQL5.7.35安装教程下载工具官网下载下载在下图中选择你自己需要的版本即可第二种下载方式如下图所示下载下载完成后对工具包进行解压,我解压的在D盘解压好过后在里面新建my.ini文件(如果你不知道怎么创建my.ini文件请看)右击新建文本文档创建文本文档过后进行重命名讲文本文档的后缀名改为ini如图操作再将新建的文本文档改名为my.ini编辑my.ini文件将下面的代码复制进去记得更改里面【basedir】【datadir】的路径为你自己的安装路径[mysqld]#

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号