CCScrollView 和 CCLabelTTF 组成CCScrollLabel

简介: 在一些项目中,经常会遇到文本很长,但是美术设计的对话框又不够大,以至于文本溢出对话框(如任务描述文字等)。为解决这个创建问题,本人写了一个CCScrollLabel,此类实现一个可以滚动查看文本的窗口。

在一些项目中,经常会遇到文本很长,但是美术设计的对话框又不够大,以至于文本溢出对话框(如任务描述文字等)。为解决这个创建问题,本人写了一个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
    //
    //  XJScrollLabel.h
    //
    //  Created by jason on 13-1-30.
    //
    
    #ifndef __COG__XJScrollLabel__
    #define __COG__XJScrollLabel__
    
    #include <iostream>
    #include "cocos2d.h"
    #include "cocos-ext.h"
    
    USING_NS_CC;
    USING_NS_CC_EXT;
    
    
    #define POINTER_OPERATION( pointer, operation ) \
    do\
    {\
    if( pointer )\
    {\
    operation;\
    }\
    }while( 0 )
    
    //the anchor point of XJScrollLabel is the left-bottom corner.
    class XJScrollLabel : public CCNode, public CCScrollViewDelegate
    {
    public://static functions
    	static XJScrollLabel* create( const char* pszText, const char *fontName, float fontSize, CCTextAlignment hAlignment, CCSize ScrollViewSize );
    	
    public:
    	XJScrollLabel();
    	~XJScrollLabel();
    	bool init( const char* pszText, const char *fontName, float fontSize, CCTextAlignment hAlignment, CCSize& ScrollViewSize );
    	
    	void setTextColor(const ccColor3B& color3)
    	{ POINTER_OPERATION( m_pLabel, m_pLabel->setColor( color3 ) ); }
    	
    public://scroll view delegate
    	virtual void scrollViewDidScroll(CCScrollView* view){}
        virtual void scrollViewDidZoom(CCScrollView* view){}
    	
    private:
    	CCScrollView* m_pScrollView;
    	CCLabelTTF* m_pLabel;
    };
    
    #endif /* defined(__COG__CGScrollLabel__) */
    


  • .cpp
    //
    //  XJScrollLabel.cpp
    //
    //  Created by jason on 13-1-30.
    //
    
    #include "XJScrollLabel.h"
    
    XJScrollLabel* XJScrollLabel::create(const char *pszText, const char *fontName, float fontSize, CCTextAlignment hAlignment, cocos2d::CCSize ScrollViewSize)
    {
    	XJScrollLabel* pScrollLabel = new XJScrollLabel;
    	if( pScrollLabel && pScrollLabel->init( pszText, fontName, fontSize, hAlignment, ScrollViewSize ) )
    	{
    		pScrollLabel->autorelease();
    		return pScrollLabel;
    	}
    	else
    	{
    		CC_SAFE_DELETE( pScrollLabel );
    		return NULL;
    	}
    }
    
    XJScrollLabel::XJScrollLabel() :
    m_pScrollView( NULL ),
    m_pLabel( NULL )
    {
    	
    }
    
    XJScrollLabel::~XJScrollLabel()
    {
    	CC_SAFE_RELEASE_NULL( m_pLabel );
    	CC_SAFE_RELEASE_NULL( m_pScrollView );
    }
    
    bool XJScrollLabel::init(const char *pszText, const char *fontName, float fontSize, CCTextAlignment hAlignment, cocos2d::CCSize& ScrollViewSize)
    {
    	//object has been initialized.
    	if( m_pScrollView || m_pLabel )
    	{
    		return false;
    	}
    	
    	//constraint the label's width, but not height.
    	m_pLabel = CCLabelTTF::create( pszText, fontName, fontSize, CCSizeMake( ScrollViewSize.width, 0 ), hAlignment );
    	m_pLabel->retain();
    	
    	//get the texture size
    	CCSize TextSize = m_pLabel->getTexture()->getContentSize();
    	
    	//we have to invoke CCScrollView::create( ScrollViewSize ) instead of 
    	//CCScrollView::create( ScrollViewSize, m_pLabel ) to let the CCScrollView
    	//create a default container for you.
    	
    	//It's because that the label may smaller than the view of
    	//CCScrollView. If that is the condition, the label will be positioned
    	//at the bottom of the View by CCScrollView. 
    	
    	//Even though you can set the label at the top, but the behavior of
    	//ScrollView always try to reposition it. So we must ensure the container
    	//is larger than the View of CCScrollView.
    	m_pScrollView = CCScrollView::create( ScrollViewSize );
    	m_pScrollView->retain();
    	m_pScrollView->setDelegate( this );
    	m_pScrollView->setDirection( kCCScrollViewDirectionVertical );
    	
    	//set the container size.
    	//So we must ensure the conainer is larger than the View of CCScrollView.
    	if( TextSize.height > ScrollViewSize.height )
    	{
    		m_pScrollView->setContentSize( TextSize );
    		//make the left-top corner of container coincide with View's
    		m_pScrollView->setContentOffset( ccp( 0, ScrollViewSize.height - TextSize.height ) );
    	}
    	else
    	{
    		m_pScrollView->setContentSize( ScrollViewSize );
    	}
    	
    	//put the label at the top of the container.
    	m_pScrollView->addChild( m_pLabel );
    	m_pLabel->ignoreAnchorPointForPosition( false );
    	m_pLabel->setAnchorPoint( ccp( 0, 1 ) );
    	m_pLabel->setPosition( ccp( 0, m_pScrollView->getContentSize().height ) );
    	
    
    	addChild( m_pScrollView );
    	return true;
    }
PS:
  • Cocos2d-x 2.0.4的CCScrollView有个bug,那就是必须要另外调用一次setContentSize(),才能完成滚动功能
关键代码我都做了有比较详尽的注释,就不对代码做过多解释。


相关文章
|
11天前
|
存储 人工智能 弹性计算
阿里云弹性计算_加速计算专场精华概览 | 2024云栖大会回顾
2024年9月19-21日,2024云栖大会在杭州云栖小镇举行,阿里云智能集团资深技术专家、异构计算产品技术负责人王超等多位产品、技术专家,共同带来了题为《AI Infra的前沿技术与应用实践》的专场session。本次专场重点介绍了阿里云AI Infra 产品架构与技术能力,及用户如何使用阿里云灵骏产品进行AI大模型开发、训练和应用。围绕当下大模型训练和推理的技术难点,专家们分享了如何在阿里云上实现稳定、高效、经济的大模型训练,并通过多个客户案例展示了云上大模型训练的显著优势。
|
14天前
|
存储 人工智能 调度
阿里云吴结生:高性能计算持续创新,响应数据+AI时代的多元化负载需求
在数字化转型的大潮中,每家公司都在积极探索如何利用数据驱动业务增长,而AI技术的快速发展更是加速了这一进程。
|
6天前
|
并行计算 前端开发 物联网
全网首发!真·从0到1!万字长文带你入门Qwen2.5-Coder——介绍、体验、本地部署及简单微调
2024年11月12日,阿里云通义大模型团队正式开源通义千问代码模型全系列,包括6款Qwen2.5-Coder模型,每个规模包含Base和Instruct两个版本。其中32B尺寸的旗舰代码模型在多项基准评测中取得开源最佳成绩,成为全球最强开源代码模型,多项关键能力超越GPT-4o。Qwen2.5-Coder具备强大、多样和实用等优点,通过持续训练,结合源代码、文本代码混合数据及合成数据,显著提升了代码生成、推理和修复等核心任务的性能。此外,该模型还支持多种编程语言,并在人类偏好对齐方面表现出色。本文为周周的奇妙编程原创,阿里云社区首发,未经同意不得转载。
|
11天前
|
人工智能 运维 双11
2024阿里云双十一云资源购买指南(纯客观,无广)
2024年双十一,阿里云推出多项重磅优惠,特别针对新迁入云的企业和初创公司提供丰厚补贴。其中,36元一年的轻量应用服务器、1.95元/小时的16核60GB A10卡以及1元购域名等产品尤为值得关注。这些产品不仅价格亲民,还提供了丰富的功能和服务,非常适合个人开发者、学生及中小企业快速上手和部署应用。
|
6天前
|
人工智能 自然语言处理 前端开发
用通义灵码,从 0 开始打造一个完整APP,无需编程经验就可以完成
通义灵码携手科技博主@玺哥超carry 打造全网第一个完整的、面向普通人的自然语言编程教程。完全使用 AI,再配合简单易懂的方法,只要你会打字,就能真正做出一个完整的应用。本教程完全免费,而且为大家准备了 100 个降噪蓝牙耳机,送给前 100 个完成的粉丝。获奖的方式非常简单,只要你跟着教程完成第一课的内容就能获得。
|
1天前
|
云安全 存储 弹性计算
|
22天前
|
自然语言处理 数据可视化 前端开发
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
合合信息的智能文档处理“百宝箱”涵盖文档解析、向量化模型、测评工具等,解决了复杂文档解析、大模型问答幻觉、文档解析效果评估、知识库搭建、多语言文档翻译等问题。通过可视化解析工具 TextIn ParseX、向量化模型 acge-embedding 和文档解析测评工具 markdown_tester,百宝箱提升了文档处理的效率和精确度,适用于多种文档格式和语言环境,助力企业实现高效的信息管理和业务支持。
3965 5
从数据提取到管理:合合信息的智能文档处理全方位解析【合合信息智能文档处理百宝箱】
|
11天前
|
算法 安全 网络安全
阿里云SSL证书双11精选,WoSign SSL国产证书优惠
2024阿里云11.11金秋云创季活动火热进行中,活动月期间(2024年11月01日至11月30日)通过折扣、叠加优惠券等多种方式,阿里云WoSign SSL证书实现优惠价格新低,DV SSL证书220元/年起,助力中小企业轻松实现HTTPS加密,保障数据传输安全。
534 3
阿里云SSL证书双11精选,WoSign SSL国产证书优惠
|
10天前
|
数据采集 人工智能 API
Qwen2.5-Coder深夜开源炸场,Prompt编程的时代来了!
通义千问团队开源「强大」、「多样」、「实用」的 Qwen2.5-Coder 全系列,致力于持续推动 Open Code LLMs 的发展。
|
17天前
|
安全 数据建模 网络安全
2024阿里云双11,WoSign SSL证书优惠券使用攻略
2024阿里云“11.11金秋云创季”活动主会场,阿里云用户通过完成个人或企业实名认证,可以领取不同额度的满减优惠券,叠加折扣优惠。用户购买WoSign SSL证书,如何叠加才能更加优惠呢?
998 3