程序博客网 > 淘宝蚂蚁花呗开通条件

CCScrollView 和 CCLabelTTF 组成CCScrollLabel

来源：互联网 发布：淘宝蚂蚁花呗开通条件 编辑：程序博客网 时间：2024/05/13 01:53

        CCScrollView 和 CCLabelTTF 组成CCScrollLabel       

分类：            cocos2d/cocos2s-x2013-01-31 13:472523人阅读评论(8)收藏举报

在一些项目中，经常会遇到文本很长，但是美术设计的对话框又不够大，以至于文本溢出对话框（如任务描述文字等）。为解决这个创建问题，本人写了一个CCScrollLabel，此类实现一个可以滚动查看文本的窗口。CCScrollLabel是基于cocos2d-x-2.0.4版本的。另外特别注意：cocos2d-x-2.0.3版本的CCScrollView有很大缺陷，建议基于该版本的游戏项目不要使用该CCScrollView。或者将项目中CCScrollView替换成至少2.0.4版本的。

其实这个功能实现起来应该说是很容易的，但是网上CCScrollView的资料手册不多。这里比较详细的说明一下2.0.4版本下的CCScrollView的各项特性：

  1. CCScrollView拥有两个重要属性，一个是View（可视区域）。一个是Container（容器区域）。
  2. View就是CCScrollView可以显示的区域，同时也是可以接受触摸消息的区域，即玩家可以滚动的大小。
  3. Container是CCScrollView的直接子节点。其大小即可以滚动的内容面板大小。举个常见的例子：如果View大小是(200,200），Container大小是（200,800)，那么我们就可以滚动Container以显示其不同区域。
  4. CCScrollView创建后，默认将Container的左下角于自身的左下角对齐，即从Container的底部区域开始显示。例如：上面的例子，CCScrollView中显示的是Container最下方的(200,200)区域，而不是顶部的(200,200)区域。所以这个特性加大我们CCScrollLabel的难度，因为我们一般希望文本顶格显示。
  5. Container的初始位置可以进行调用setContentOffset()进行偏移，这样就可以让Container的顶部作为一开始的显示区域。
  6. 调用CCScrollView::addChild的节点，都会被CCScrollView更改锚点和坐标。新的锚点值和坐标值都将是(0,0)。这也是为什么Container一开始会在CCScrollView的左下角的原因，如果CCScrollView有了Container（无论是你提供的，还是默认创建的），那么addChild( A )，会将A节点作为Container的直接子节点。
  7. 当Container的大小小于CCScrollView的大小的时候，CCScrollView一旦被滚动，就会试图将Container位置重置为创建时的位置，也就是将Container放在CCScrollView的左下角。这个也会加大我们创建CCScrollLabel的难度，因为当我们的文本很少时，我们无法将其顶格显示，因为只要滚动，文本即使一开始位于CCScrollView顶部，也会被CCScrollView强制拉回到最下角。
那么CCLabelTTF有什么特性呢？看一下几个重要的地方：
  1. CCLabelTTF可以设定字符串贴图的宽度，及字符串显示的宽度。例如：你有100个中文字符，我们可以设置CCLabelTTF的宽度为300，CCLabelTTF为我们生成的字符串texture，会保证其宽度为用户制定的宽度。高度是取max（用户制定的宽度，为了容纳字符串所需的最小高度）。所以我们可以在创建CCLabelTTF是将CCSizeMake( width, 0 )传给Dimension参数。
  2. CCLabelTTF的文本贴图（texture)大小，我们可以通过getTexture()->getContentSize()或者直接getContentSize()。但千万别使用getDimensions()。
通过以上对CCScrollView和CCLabelTTF特性的分析，我们能得出这样的结论：我们不能将我们的CCLabelTTF作为CCScrollView的Container！

因为当我们的文本不够大的时候，即使我们将文本强制设置到的CCScrollView的左上角，但是只要玩家一拖动，我们的文本还是会被CCScrollView设置到左下角。如何解决这个问题呢？解决方法就是：我们要保证Container的大小至少和CCScrollView（或者称为View）的大小一样大。这样就可以确保Container在被拖动时，不会因为自己太小而被CCScrollView强制拉回左下角，以至于出现诡异的现象。

如何确保Container的大小不比View小呢？那就是让CCScrollView默认创建一个Container（是一个CCLayer，大小为屏幕大小），然后我们在根据需求改变Container的大小（因为如果Container的大小为屏幕大小时，我们将会有一大片无用的区域可被玩家拖动，这是谁都不想看到的）。然后在将CCLabelTTF作为Container的子节点，并将其对齐到Container的左上角。之后，我们只需要确保Container一开始的时候顶格显示，就能保证我们的CCLabelTTF顶格显示了。

下面附带个人代码，仅供大家学习交流。任何因使用本人代码而造成的项目损失或者间接损失，本人不负任何责任。
  • .h
    [cpp] view plaincopyprint?
    1. // 
    2. //  XJScrollLabel.h 
    3. // 
    4. //  Created by jason on 13-1-30. 
    5. // 
    6.  
    7. #ifndef __COG__XJScrollLabel__ 
    8. #define __COG__XJScrollLabel__ 
    9.  
    10. #include <iostream> 
    11. #include "cocos2d.h" 
    12. #include "cocos-ext.h" 
    13.  
    14. USING_NS_CC; 
    15. USING_NS_CC_EXT; 
    16.  
    17.  
    18. #define POINTER_OPERATION( pointer, operation ) \ 
    19. do\ 
    20. {\ 
    21. if( pointer )\ 
    22. {\ 
    23. operation;\ 
    24. }\ 
    25. }while( 0 ) 
    26.  
    27. //the anchor point of XJScrollLabel is the left-bottom corner. 
    28. class XJScrollLabel : public CCNode,public CCScrollViewDelegate 
    29. { 
    30. public://static functions 
    31.     static XJScrollLabel* create(const char* pszText,const char *fontName,float fontSize, CCTextAlignment hAlignment, CCSize ScrollViewSize ); 
    32.      
    33. public: 
    34.     XJScrollLabel(); 
    35.     ~XJScrollLabel(); 
    36.     bool init( constchar* pszText, constchar *fontName, float fontSize, CCTextAlignment hAlignment, CCSize& ScrollViewSize ); 
    37.      
    38.     void setTextColor(const ccColor3B& color3) 
    39.     { POINTER_OPERATION( m_pLabel, m_pLabel->setColor( color3 ) ); } 
    40.      
    41. public://scroll view delegate 
    42.     virtual void scrollViewDidScroll(CCScrollView* view){} 
    43.     virtual void scrollViewDidZoom(CCScrollView* view){} 
    44.      
    45. private: 
    46.     CCScrollView* m_pScrollView; 
    47.     CCLabelTTF* m_pLabel; 
    48. }; 
    49.  
    50. #endif /* defined(__COG__CGScrollLabel__) */ 


  • .cpp
    [cpp] view plaincopyprint?
    1. // 
    2. //  XJScrollLabel.cpp 
    3. // 
    4. //  Created by jason on 13-1-30. 
    5. // 
    6.  
    7. #include "XJScrollLabel.h" 
    8.  
    9. XJScrollLabel* XJScrollLabel::create(constchar *pszText, constchar *fontName, float fontSize, CCTextAlignment hAlignment, cocos2d::CCSize ScrollViewSize) 
    10. { 
    11.     XJScrollLabel* pScrollLabel = new XJScrollLabel; 
    12.     if( pScrollLabel && pScrollLabel->init( pszText, fontName, fontSize, hAlignment, ScrollViewSize ) ) 
    13.     { 
    14.         pScrollLabel->autorelease(); 
    15.         return pScrollLabel; 
    16.     } 
    17.     else 
    18.     { 
    19.         CC_SAFE_DELETE( pScrollLabel ); 
    20.         return NULL; 
    21.     } 
    22. } 
    23.  
    24. XJScrollLabel::XJScrollLabel() : 
    25. m_pScrollView( NULL ), 
    26. m_pLabel( NULL ) 
    27. { 
    28.      
    29. } 
    30.  
    31. XJScrollLabel::~XJScrollLabel() 
    32. { 
    33.     CC_SAFE_RELEASE_NULL( m_pLabel ); 
    34.     CC_SAFE_RELEASE_NULL( m_pScrollView ); 
    35. } 
    36.  
    37. bool XJScrollLabel::init(constchar *pszText, constchar *fontName, float fontSize, CCTextAlignment hAlignment, cocos2d::CCSize& ScrollViewSize) 
    38. { 
    39.     //object has been initialized. 
    40.     if( m_pScrollView || m_pLabel ) 
    41.     { 
    42.         return false; 
    43.     } 
    44.      
    45.     //constraint the label's width, but not height. 
    46.     m_pLabel = CCLabelTTF::create( pszText, fontName, fontSize, CCSizeMake( ScrollViewSize.width, 0 ), hAlignment ); 
    47.     m_pLabel->retain(); 
    48.      
    49.     //get the texture size 
    50.     CCSize TextSize = m_pLabel->getTexture()->getContentSize(); 
    51.      
    52.     //we have to invoke CCScrollView::create( ScrollViewSize ) instead of 
    53.     //CCScrollView::create( ScrollViewSize, m_pLabel ) to let the CCScrollView 
    54.     //create a default container for you. 
    55.      
    56.     //It's because that the label may smaller than the view of 
    57.     //CCScrollView. If that is the condition, the label will be positioned 
    58.     //at the bottom of the View by CCScrollView.  
    59.      
    60.     //Even though you can set the label at the top, but the behavior of 
    61.     //ScrollView always try to reposition it. So we must ensure the container 
    62.     //is larger than the View of CCScrollView. 
    63.     m_pScrollView = CCScrollView::create( ScrollViewSize ); 
    64.     m_pScrollView->retain(); 
    65.     m_pScrollView->setDelegate( this ); 
    66.     m_pScrollView->setDirection( kCCScrollViewDirectionVertical ); 
    67.      
    68.     //set the container size. 
    69.     //So we must ensure the conainer is larger than the View of CCScrollView. 
    70.     if( TextSize.height > ScrollViewSize.height ) 
    71.     { 
    72.         m_pScrollView->setContentSize( TextSize ); 
    73.         //make the left-top corner of container coincide with View's 
    74.         m_pScrollView->setContentOffset( ccp( 0, ScrollViewSize.height - TextSize.height ) ); 
    75.     } 
    76.     else 
    77.     { 
    78.         m_pScrollView->setContentSize( ScrollViewSize ); 
    79.     } 
    80.      
    81.     //put the label at the top of the container. 
    82.     m_pScrollView->addChild( m_pLabel ); 
    83.     m_pLabel->ignoreAnchorPointForPosition( false ); 
    84.     m_pLabel->setAnchorPoint( ccp( 0, 1 ) ); 
    85.     m_pLabel->setPosition( ccp( 0, m_pScrollView->getContentSize().height ) ); 
    86.      
    87.  
    88.     addChild( m_pScrollView ); 
    89.     return true; 
    90. } 
PS:
  • Cocos2d-x 2.0.4的CCScrollView有个bug，那就是必须要另外调用一次setContentSize()，才能完成滚动功能
关键代码我都做了有比较详尽的注释，就不对代码做过多解释。


更多0
顶
6
踩
0
-
查看评论
6楼 xqk2013-10-22 18:34发表[回复][引用][举报]
为什么不滚啊， 另外，也没看到你的代码上边有写使用action啊， 就算没用action也没使用CCScrollView自带的滚动方法setContentOffsetInDuration 啊？ 你的代码到底是如何滚动文字的呢？
5楼 wj1232013-09-13 14:59发表[回复][引用][举报]
CCSize size = CCDirector::sharedDirector()->getWinSize();
    ScrollLabel *scrolLabel = ScrollLabel::create("每一个台阶，都能看到更痛苦的自己， 我去～～脚抽了2", "", 50, kCCTextAlignmentCenter, CCSizeMake(size.width*0.3f, size.height*0.8f));
    scrolLabel->setAnchorPoint(ccp(0.0, 1.0f));
    scrolLabel->setPosition( ccp(size.width*0.2, size.height/2) );
    scrolLabel->setTextColor(ccc3(11, 79, 78));
    this->addChild(scrolLabel, 120);
我这么写的 怎么显示不出来！！
Re: xujiezhige2013-09-27 08:57发表[回复][引用][举报]
回复swordmanwj：Sorry，具体为什么显示不出来我很难说。保证参数都正确，另外看看相关变量对象是否设置正确。这个还需要你自己查看一下。
4楼 chenyu9648778142013-06-21 22:47发表[回复][引用][举报]
顶... 谢谢分享
3楼 渣皮人2013-04-07 15:03发表[回复][引用][举报]
请问下，这个XJScrollLabel 这个类该如何调用，显示在cclayer中
Re: xujiezhige2013-04-07 17:23发表[回复][引用][举报]
回复xuyide54321：只要使用create函数，创建出该类的一个对象，就能想使用普通CCNode派生类对象一样就可以。

create函数中唯一需要说明的就是最后一个参数（其他参数和CCLabelTTF一样），最后一个参数是滚动窗口大小，即可视区域大小。

最好建立一个工程，测试一下这个类，看看具体表现。如有问题，请追问，谢谢！^-^
2楼 qingcheng892013-02-28 19:08发表[回复][引用][举报]
你的帖子救了我一命。。。纠结了一个下午的矛盾终于解开了
1楼 wangqiuyun2013-01-31 19:08发表[回复][引用][举报]
顶起！
淘宝蚂蚁花呗开通条件 淘宝蚂蚁花呗开通条件
原创粉丝点击
热门IT博客
淘宝爆款打造方法2016淘宝爆款打造方法2016
windows 微软雅黑字体windows 微软雅黑字体
达内seo百度云
淘宝中年女模特叫什么
黑蚂蚁成年网络电视
淘宝易信
sql server企业管理器
淘宝助理申通模板
自适应源码
linux 解包
网络攻击演示
最便宜域名
成都湛源软件
英语培训 知乎
seo的站外优化流程
e5a安卓中文编程软件
招聘数据分析表
淘宝网有电子吹管吗?
cms模板
美团内部数据
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 烫面怎么做 煮面条做法大全 家常面条的做法 面条做法 面条做法大全带图解 怎样做面条好吃 面条做法大全 怎么做面条好吃 清汤面的做法 老汤面的做法 各种面食的做法 正宗番茄鸡蛋汤面做法 面条做法大全汤面 西红柿鸡蛋热汤面 西红柿鸡蛋面的做法汤面 西红柿鸡蛋清汤面 汤音 汤饭的家常做法 汤饭的家常做法大全集 汤饭做法 沟水汨汨 汨汨流淌 汨怎么读 汨怎么读音 汨汨什么意思 汨罗一中校花邓可欣 汨罗一中邓可欣事件 汨罗在线 汨罗花鼓戏 汨罗猫 白维国与汨罗一中校花 汨罗猫和暹罗猫 汨罗至长沙火车时刻表 汨罗邮编 汨罗花鼓戏刘春满全集 汨罗网 汨罗招聘 汨罗市 汨罗 黄石 灵丘县

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里