Cocos2dx3.2编写常用UI组件（二）滚动计数器NumberScroller

概述前言： 废话不多说，先看最终效果图 正文： 1、使用说明： ①引入头文件 “NumberScroller.h" ②用NumberScroller::create(int length,int fontSize) 函数来创建NumberScroller对象 ③利用setNumber（int number）函数来设置计时器里面的值（这里只实现了向后滚动，即设置的值要大于等于当前值） ④利用getNum

前言：

废话不多说，先看最终效果图

正文：

1、使用说明：

①引入头文件 “NumberScroller.h"

②用NumberScroller::create(int length,int FontSize) 函数来创建NumberScroller对象

③利用setNumber（int number）函数来设置计时器里面的值（这里只实现了向后滚动，即设置的值要大于等于当前值）

④利用getNumber获得当前计数器显示的值

⑤利用setTime（float time）函数来设置计时器滚动的速度，默认为1

2、实现思路：

①根据输入的长度length确定计时器的长度（即多少位）

②根据输入的FontSize确定字体大小

③创建length条并排放置的竖着的从01234567890（注意末尾有个零）

④根据设置的数字，不同的竖条移动相应的位置。

⑤利用遮罩层遮罩

3、源码解析：

对应思路①②

bool NumberScroller::init(int length,int FontSize){	if(!Node::init())	return false;	m_length = length;	m_FontSize = FontSize;	m_visibleNode = Node::create();		//排好length列数字	for(int i=0;i<length;i++){		NumberColumn* column = NumberColumn::create(FontSize);		m_columns.pushBack(column);		column->setAnchorPoint(Point(0,0));		column->setposition(i * FontSize,0);		column->setTime(m_time);		m_visibleNode->addChild(column);	}	/*设置遮罩层*/	ClipPingNode* cliper = ClipPingNode::create();	DrawNode* drawNode = DrawNode::create();	Point points[] = {Point(getposition()),Point(getpositionX(),getpositionY()+m_FontSize),Point(getpositionX()+m_length*m_FontSize,getpositionY())};	drawNode->drawpolygon(points,4,color4F(0,1),1));		cliper->setStencil(drawNode);	cliper->addChild(m_visibleNode);	this->addChild(cliper);}

先暂时不用看设置遮罩层部分，前面只是保存长度和字体大小到成员变量中，下面的一个for循环就是用来排好length列数字的

其中这里出现了一个NumberColumn类，表示一列数字01234567890

具体的初始化函数如下

bool NumberColumn::init(int FontSize){	if(!Node::init())	return false;	m_numbers = Node::create();	this->addChild(m_numbers);	m_FontSize = FontSize;	this->scheduleUpdate();	for(int i=0;i<10;i++){		char str[2];		str[0] = i + '0';		str[1] = '
voID NumberScroller::setNumber(int number){	if(number > m_cur_num){		m_cur_num = number;		for(int i=0;i<m_length;i++){			m_columns.at(m_length - i -1)->setNumber(number);			number /= 10;		}			}}
';		Label* temp = Label::create(str,"",FontSize);		temp->setAnchorPoint(Point(0,0));		temp->setposition(Point(0,i * FontSize));		m_numbers->addChild(temp);	}	char str[2];	str[0]='0';	str[1]='
voID NumberColumn::setNumber(int number,bool direction){	m_target_num = number;	int delta = m_target_num - m_cur_num;	update_speed = (delta * m_FontSize / m_time);}
';	Label* temp = Label::create(str,FontSize);	temp->setAnchorPoint(Point(0,0));	temp->setposition(Point(0,10 * FontSize));	m_numbers->addChild(temp);	return true;}

NumberColumn的init函数里面，除了保存长度和字体大小和启动update外，接下来就是构造一个01234567890的竖列

注意，我们这里把所有Label都放在一个Node里面，这样可使我们更方便的 *** 作

最后，回到NumberScroller 初始化完的效果是这样子（无遮罩）的：

NumberScroller最重要的函数还是setNumber

voID NumberColumn::update(float d){	if(m_cur_num != m_target_num){<span >		</span>//如果当前显示的数字不等于目标数字，即要开始滚动		float dis = update_speed*d;<span >	</span>//每次调用update函数需要滚动的距离等于update_speed 乘以 d （update_speed在setNumber函数中已经算出）		m_numbers->setpositionY(m_numbers->getpositionY() - dis);<span >	</span>//每次使整条向下移动dis距离		update_moveSum += dis;<span >		</span>//update_moveSum 用于保存现在到底移动了多少距离		if(update_moveSum >= m_FontSize){<span >	</span>//如果现在已经移动了一个字大小的距离			m_cur_num++;<span >			</span>//当前数字+1			m_numbers->setpositionY( - m_cur_num%10 * m_FontSize);<span >	</span>//标准对齐			update_moveSum = 0; <span >	</span>//重置		}	}}

可以看出都是间接地调用NumberColumn的setNumber方法

int delta = m_target_num - m_cur_num;update_speed = (delta * m_FontSize / m_time);

奇怪啦，NumberColumn也只是简单的把传来的number保存到m_target_num里面，还有计算滚动的速度 也没有实现滚动的动作啊

奥秘在于NumberColumn启动的update函数

voID NumberScroller::setNumber(int number){	if(number > m_cur_num){		m_cur_num = number;		for(int i=0;i<m_length;i++){			m_columns.at(m_length - i -1)->setNumber(number);			number /= 10;		}			}}

update函数便是实现滚动效果的核心，每一行都给了详细的注释

因为我们这里要实现的是类似于时钟的滚动效果（秒针转1圈时，分针转1/60圈），应用到计时器，个位滚动10次，十位才会转一下

所以对应每一条NumberColum，其对应的m_cur_num是不一样的。

例如999这个数 ，第一条（百位）对应的m_cur_num应该是9，第二条（十位）对应的m_cur_num应该是99，第三条（个位）对应的m_cur_num应该是999

由于setNumber时候计算了速度：

bool NumberScroller::init(int length,int FontSize){        。。。省略了一部分。。。	/*设置遮罩层*/	ClipPingNode* cliper = ClipPingNode::create();	DrawNode* drawNode = DrawNode::create();	Point points[] = {Point(getposition()),1));		cliper->setStencil(drawNode);	cliper->addChild(m_visibleNode);	this->addChild(cliper);}

间隔越大，速度越快，因此保证了每条NumberColumn均会在m_time时间内完成滚动

有了上面的介绍，再回过头来再看一次NumberScroller的setNumber函数，是不是恍然大悟呢

完成效果后如下：

最后，添加遮罩层，只显示当前数字部分。

关于遮罩的基本知识，推荐一个很好的blog

http://www.jb51.cc/article/p-mftivbcg-wx.html

4、附上源码：

点击打开链接

总结

以上是内存溢出为你收集整理的Cocos2dx3.2编写常用UI组件（二）滚动计数器NumberScroller全部内容，希望文章能够帮你解决Cocos2dx3.2编写常用UI组件（二）滚动计数器NumberScroller所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。