cocos2dx-标签:Label的使用

一、setContentSize与setDimensions对于Label的作用

1、首先看看setContentSize的定义:

/*
* Set the untransformed size of the node.
* 设置节点转换前的大小
* The contentSize remiains the same no matter the node is scaled or rotated.
* 无论缩放还是旋转节点,它的contentSize始终保持不变
* All nodes has a size. Layer and Scene has the same size of the screen.
* 所有的节点都有一个大小,layer和scene的大小和屏幕大小保持一致
*/

/*
* 说明:
* 1、节点在使用的过程中可能进行缩放、旋转等变化,这样导致我们看见的节点的大小可能发生了变化。但是
* contentSize是一直保持
* 不变的,因为这是一个基准。可以想一下,如果这个contentSize在进行缩放之后发生了变化,那么在
* setScale(1.5f)之后再设置setScale(1.0f)如何能够还原呢?
*/

void Node::setContentSize(const Size& size)
{
    if(!size.equals(_contentSize)
    {   
        _contentSize = size;
        _anchorPoints.set(_contentSize.width * _anchorPoint.x, _contentSize.height * _anchorPoint.y);
        _transformUpdated= _transformDiry = _inverseDirty = _contentSizeiryt = true;
    }
}

2、其次,我们看看setDimenSions的定义:

/*
Sets the untransformed size of the Label in a more efficient way.
以一种更高效的方式设置Label未转换前的大小
*/

void Label::setDimensions(float width, float height)
{
    if(_overflow == Overflow::RESIZE_HEIGHT){
        height = 0;
    }
    if (height != _labelHeight || width != _labelWidth)
    {
        _labelWidth = width;
        _labelHeight = height;
        _labelDimensions.width = width;
        _labelDimensions.height = height;

        _maxLineWidth = width;
        _contentDirty = true;

        if(_overflow == Overflow::SHRINK){
            if (_originalFontSize > 0) {
                this->restoreFontSize();
            }
        }
    }
}

3、_labelDimensions、_labelWidth、_labelHeight的使用:

        在setDimensions的源码中我们看到了主要是对这几个成员变量进行了设置,那么这几个成员变量的使用方法以及相关的作用是什么呢?首先来看看_labelDimensions的使用:

         从上图中可以知道,对于_labelDimensions成员变量的使用只在相关的set和get方法中出现了。接下来我们看看_labelWidth和_labelHeight的使用。

        

        从上图中我们可以看到,在alignText方法中使用到了_labelWidth,即在文字的对齐方式中进行了使用。因此我们很自然的可以想到:_labelDimenSions与标签的对齐方式有关。其中setMaxLineWidth也说明了,只有在调用了setDimenSions方法之后,对于标签的对齐方式、显示方式才会生效。 

4、实验验证:

auto labTest = Label::createWithSystmeFont("I love China, I am a Chinese", "", 30);
labTetst->setPosition(Vec2(_size.width / 2, _size.height * 0.75f));
this->addChild(labTest, 100);

auto labTest2 = Label::createWithSystemFont("I love China, I am a Chinese", "", 30);
labTest2->setPosition(Vec2(m_vSize.width / 2, m_vSize.height * 0.70));
labTest2->setDimensions(200.0f, 80.0f);
this->addChild(labTest2, 100);

auto labTest3 = Label::createWithSystemFont("I love China, I am a Chinese", "", 30);
labTest3->setPosition(Vec2(m_vSize.width / 2, m_vSize.height * 0.65));
labTest3->setContentSize(Size(200.0f, 80.0f));
this->addChild(labTest3, 100);

        由上述的实验结果我们可以看到,分别使用setDimenSions和setContentSize方法对于Label进行同样大小的设置,但是setContentSize并没有起到什么效果;而使用setDimenSions对Label的设置产生了效果,同时使其进行了自动缩放和换行的调整。

5、结论:

  1. setContentSize和setDimenSions都是设置节点大小,但是对于Label而言,setContentSize并没有什么作用,而是通过使用setDimenSions来进行相关的设置。

  2. 对于Label进行对齐方式、换行等设置也只有在调用了setDimenSions之后才会生效。  

二、 Label常用操作封装

1、Label设置下划线:

        在公司做产品的过程中遇到这样一个使用场景,需要对Label创建的字体加上一个下划线,但是又没有现成的接口可以设置下划线于是就自己封装了一个。

// Label增加下划线处理
void whStartLayer::labAttachUnderline(Label* labNode)
{
	if (nullptr == labNode) {
		return;
	}

	float labWidth = labNode->getContentSize().width;
	auto underLine = DrawNode::create();
	underLine->drawSegment(Vec2(0, 0), Vec2(labWidth, 0), 1, Color4F::BLACK);
	labNode->addChild(underLine);

	return;
}

示例1:

// 创建一个label
auto labPrivacy = Label::createWithSystemFont(u8"隐私协议", "", 40.0f);
labPrivacy->setTextColor(Color4B(0x2e, 0x2e, 0x2e, 0xff));
labPrivacy->setPosition(Vec2(visibleSize / 2));
this->addChild(labPrivacy);
// label增加下划线处理
labAttachUnderline(labPrivacy);

2、Label文本过长的处理方式

        目前我在游戏开发的过程中经常会遇见文本内容过长的问题,我个人对于此类问题的处理主要是采用以下两种方式:1,设置label的最大宽度,不进行换行操作,当文本大小超过了最大宽度限定就会进行自动缩放;2,设置label的最大宽度,同时保持字体大小不变,超过最大限度之后之后进行换行处理。

        对于第一种处理方式主要适用于标题、按钮文本等内容的处理,文本必须在一行呈现出来才比较美观。

// 标签内容一行呈现,字体进行自动缩放
void setLabAlignInOneLine(Label* labNode, float maxWidth)
{
	auto curSize = labNode->getContentSize();
	float dimenWidth = curSize.width > maxWidth ? maxWidth : curSize.width;
	labNode->setDimensions(dimenWidth, curSize.height);
	labNode->setOverflow(Label::Overflow::SHRINK);	// 设置溢出处理方式(共有4种):缩放处理
	labNode->setAlignment(TextHAlignment::CENTER, TextVAlignment::CENTER);
	return;
}

        对于第二种方式,我们保持字体的大小不变,在最大宽度限定下来自动适应高度。其实Label中的溢出处理方式中有一个“Label::Overflow::RESIZE_HEIGHT”,但是设置这个属性之后去获取标签的大小时,高度始终时0,因为这个bug我就放弃了这种处理方式。因为我在使用的过程中还是需要Label的大小去设置相应的位置坐标,因此我采用以下的方式进行处理。

        使用过程中自己去判断为了保持字体大小不变,最大宽度限定下实际创建的Label会有多少行,然后手动去设定标签的大小。如果不手动设置标签大小的话,换行之后的部分文本可能无法显示出来。

void setLabAutoHeight(Label * labNode, float maxWidth, TextHAlignment hType, TextVAlignment vType, float lineSpace)
{
    auto curSize = labNode->getContentSize();
    int lineNum = (int)(curSize.width / maxWidth) + 1;
    float dimenHeight = lineNum*(curSize.height + lineSpace) - lineSpace;
    labNode->setDimensions(maxWidth, dimenHeight);
    labNode->setAlignment(hType, vType);
    labNode->setLineBreakWithoutSpace(true);
    labNode->setLineSpacing(lineSpace);
    
    return;
}

示例2:

// 示例代码:
	string textStr = u8"这是一个标题示例,我们正在做溢出处理测试。";
	auto labTemp = Label::createWithSystemFont(textStr, "", 40.0f);
	labTemp->setPosition(Vec2(visibleSize.width / 2, 1000.0f));
	labTemp->setTextColor(Color4B::BLACK);
	this->addChild(labTemp);

	auto labTemp2 = Label::createWithSystemFont(textStr, "", 40.0f);
	labTemp2->setPosition(Vec2(visibleSize.width / 2, 900.0f));
	labTemp2->setTextColor(Color4B::BLACK);
	this->addChild(labTemp2);
	setLabAlignInOneLine(labTemp2, 600.0f);

   

示例3:

// 示例代码:

    // 文本内容一行展示
	string textStr = u8"这是一个标题示例,我们正在做溢出处理测试。再继续增加一点文字长度!";
	auto labTemp = Label::createWithSystemFont(textStr, "", 40.0f);
	labTemp->setPosition(Vec2(visibleSize.width / 2, 900.0f));
	labTemp->setTextColor(Color4B::BLACK);
	this->addChild(labTemp);

	// 水平居中对齐
	auto labTemp2 = Label::createWithSystemFont(textStr, "", 40.0f);
	labTemp2->setPosition(Vec2(visibleSize.width / 2, 700.0f));
	labTemp2->setTextColor(Color4B::BLACK);
	this->addChild(labTemp2);
	setLabAutoHeight(labTemp2, 600.0f, TextHAlignment::CENTER, TextVAlignment::CENTER, 0.0f);	

	// 水平左对齐
	auto labTemp3 = Label::createWithSystemFont(textStr, "", 40.0f);
	labTemp3->setPosition(Vec2(visibleSize.width / 2, 500.0f));
	labTemp3->setTextColor(Color4B::BLACK);
	this->addChild(labTemp3);
	setLabAutoHeight(labTemp3, 600.0f, TextHAlignment::LEFT, TextVAlignment::CENTER, 0.0f);	

	// 水平右对齐
	auto labTemp4 = Label::createWithSystemFont(textStr, "", 40.0f);
	labTemp4->setPosition(Vec2(visibleSize.width / 2, 300.0f));
	labTemp4->setTextColor(Color4B::BLACK);
	this->addChild(labTemp4);
	setLabAutoHeight(labTemp4, 600.0f, TextHAlignment::RIGHT, TextVAlignment::CENTER, 0.0f);	

 

三、Label常用接口说明:

  1. setLineBreakWithoutSpace();
    指定当一行太长的时候对于标签来说会发生什么,该行会在单词之间自动进行断开换行,即标签太长而换行的时候不会将一个完成的单词一分为二。
  2. setMaxLineWith();
    使标签最多不超过该行的未转换宽度,如果该值不为零,则标签的最大线宽将用于强制换行。即限制标签的最大宽度,如果超出之后会进行换行处理。
  3. setDimensions();
    设置标签的大小,前面已经说过了,只要设置了标签的大小之后对于标签的自动换行、缩放、对齐方式等的设置才会有意义。
  4. setOverflow();
    设置标签的移除处理方式,主要有四种处理方式:自动适应、超出区域被裁剪、自动缩放、自动适应高度的方式。
  5. setAlignment();
    设置标签的对其方式,横向、纵向
  6. setLineSpacing();
    设置标签的行距,不支持系统字体

​​​​​​​​​​​​​​​​​​​​​

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值