我们逐一来分析上面出现的4种label控件作用、用法与什么时候该用什么，什么时候场合使用等
1. Label
这货是3.0以后才来出的，引用star特530文章里的http://www.cocoachina.com/bbs/read.php?tid=197179，使用他在不同的平台上有相同的视觉效果，
由于使用更快的缓存代理，它的渲染也将更加快速，同时它还提供了绘边、阴影等特性。
//这个创建和LabelTTF::create()是一样的static Label * create(const std::string& text, const std::string& fontName, float fontSize,
const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,
TextVAlignment vAlignment = TextVAlignment::TOP);//这个创建和LabelTTF::create()是一样的，只不过第二个参数font可以为字体名字或者字体文件，通过看名字就知道
//字体一些形状特性和平台有关
static Label* createWithSystemFont(const std::string& text, const std::string& font, float fontSize,
const Size& dimensions = Size::ZERO, TextHAlignment hAlignment = TextHAlignment::LEFT,
TextVAlignment vAlignment = TextVAlignment::TOP);
//通过读取TTFConfig配置的方式创建标签，稍后给出TTFConfig是个什么货
static Label* createWithTTF(const TTFConfig& ttfConfig, const std::string& text, TextHAlignment alignment = TextHAlignment::LEFT, int maxLineWidth = 0);
//使用.fnt的方式创建标签，类似CCLabelBMFont:create();
static Label* createWithBMFont(const std::string& bmfontFilePath, const std::string& text,
const TextHAlignment& alignment = TextHAlignment::LEFT, int lineWidth = 0,
const Point& imageOffset = Point::ZERO);
//使用.png的方式创建标签，类似CCLabelAtlas::create();
static Label * createWithCharMap(const std::string& charMapFile, int itemWidth, int itemHeight, int startCharMap);
//下面两个是.png文件获取方式不同的函数
static Label * createWithCharMap(Texture2D* texture, int itemWidth, int itemHeight, int startCharMap);
static Label * createWithCharMap(const std::string& plistFile);
//特效的种类有一下四种：
enum class LabelEffect {
NORMAL, //普通标签（纯粹的、脱离了低级趣味的label）
OUTLINE, //文艺标签（有描边）
SHADOW, //2B标签 （有阴影）
GLOW //土豪标签（有荧光）
};
下面是TTFConfig的描述
typedef struct _ttfConfig
{
std::string fontFilePath;
int fontSize;
GlyphCollection glyphs;
const char *customGlyphs;
bool distanceFieldEnabled;
int outlineSize;
//构造函数
...
//注意：当outlineSize初始化的值大于0时，distanceFieldEnabled则为false
}TTFConfig;
//GlyphCollection有四种类型：
enum class GlyphCollection {
DYNAMIC,
NEHE,
ASCII,
CUSTOM
};1、使用.ttf
1）创建
TTFConfig config2("fonts/Marker Felt.ttf",30);//初始化TTFConfig，第一个参数为字库的路径，第二个参数为字体大小
auto label2 = Label::createWithTTF(config2,"createWithTTF",TextHAlignment::LEFT);//创建label，并向左对其
label2->setPosition(Point(visibleSize.width/2,300));
label2->setAnchorPoint(Point::ANCHOR_MIDDLE);//设置锚点居中
this->addChild(label2,2);auto label4 = Label::create("create","Marker Felt",30);
2）另字体看起来紧凑点，也就是设置distanceFieldEnabled = true
直接修改config里的distanceFieldEnabled，方式如下：
TTFConfig config2("fonts/Marker Felt.ttf",30,GlyphCollection::DYNAMIC,nullptr,true);//修改config的第五个参数为true
3）设置glow（荧光）效果
label2->enableGlow(Color3B::GREEN);//荧光颜色为绿色
4）设置描边
label2->enableOutline(Color4B(255,125,0,255),8);//第一个参数为描边的颜色，第二个参数为描边的大小
5）设置阴影
label2->enableShadow(Color3B::RED,Size(2,-2),0.2,0.5);//第一个参数为阴影颜色，第二个参数为阴影相对于标签的坐标，第三个参数设置透明度，第四个参数与模糊有关
2、使用.fnt 的label
1）创建
auto label3 = Label::createWithBMFont("fonts/bitmapFontTest.fnt", "createWithBMFont");
label3->setPosition(Point(visibleSize.width/2,250));
label3->setAnchorPoint(Point::ANCHOR_MIDDLE);
this->addChild(label3,2);
label3->enableShadow();
2）设置阴影（描边和荧光只能用在.ttf 上）
label3->enableShadow(Color3B::RED);
效果如图，可以与上图对比一下。
3、使用.png
加入我们有这么一张图，使用方法如下：
1）创建
auto label4= Label::createWithCharMap("fonts/costFont.png",30,44,'/');//参数分别为：路径;每个字符的宽和高，起始字符
label4->setPosition(Point(visibleSize.width/2,200));
label4->setAnchorPoint(Point::ANCHOR_MIDDLE);
label4->setString("10");//设置显示的内容为”10“this->addChild(label4,2);
2）设置阴影
label4->enableShadow(Color3B::RED);
4、取消所有特效
label->disableEffect();//取消所有特效
下面看一个整体的效果图
代码：
bool HelloWorld::init()
{
if ( !Layer::init() )
{
return false;
}
Size visibleSize = Director::getInstance()->getVisibleSize();
Point origin = Director::getInstance()->getVisibleOrigin();
auto closeItem = MenuItemImage::create(
"CloseNormal.png",
"CloseSelected.png",
CC_CALLBACK_1(HelloWorld::menuCloseCallback, this));
closeItem->setPosition(Point(origin.x+ visibleSize.width - closeItem->getContentSize().width/2 ,
origin.y + closeItem->getContentSize().height/2));
auto menu = Menu::create(closeItem, NULL);
menu->setPosition(Point::ZERO);
this->addChild(menu, 1);
autolabel1 = Label::createWithSystemFont("Hello World1","Arial", 36); //A
label1->setPosition(Point(origin.x+ visibleSize.width/2,
origin.y + visibleSize.height - 100));
this->addChild(label1,1);
autolabel2 = Label::createWithTTF("Hello World2", "fonts/MarkerFelt.ttf", 36); //B
label2->setPosition(Point(origin.x+ visibleSize.width/2,
origin.y + visibleSize.height - 200));
this->addChild(label2,1);
autolabel3 = Label::createWithBMFont("fonts/BMFont.fnt", "HelloWorld3"); //C
label3->setPosition(Point(origin.x+ visibleSize.width/2,
origin.y + visibleSize.height - 300));
this->addChild(label3,1);
TTFConfigttfConfig("fonts/Marker Felt.ttf",
36,
GlyphCollection::DYNAMIC); //D
autolabel4 = Label::createWithTTF(ttfConfig, "Hello World4"); //E
label4->setPosition(Point(origin.x+ visibleSize.width/2,
origin.y + visibleSize.height - 400));
this->addChild(label4, 1);
ttfConfig.outlineSize= 4; //F
autolabel5 = Label::createWithTTF(ttfConfig, "Hello World5"); //G
label5->setPosition(Point(origin.x+ visibleSize.width/2,
origin.y + visibleSize.height - 500));
label5->enableShadow(Color4B(255,255,255,128),Size(4, -4)); //H
label5->setColor(Color3B::RED); //I
this->addChild(label5,1);
return true;
}在上面的代码中//A行是通过 createWithSystemFont 函数创建 Label 对象
代码//B行是通过 createWithTTF 是创建 TTF 字体标签对象
代码//C是 createWithBMFont 是创建位图字体标签对象
代码//D行TTFConfig ttfConfig("fonts/Marker Felt.ttf", 36, GlyphCollection::DYNAMIC)是创建一个TTFConfig结构体变量，前面已经介绍这个结构体了
代码//E行Label::createWithTTF(ttfConfig,"Hello World4") 是通过指定 TTFConfig 创建 TTF 字体标签
代码//F行代码 ttfConfig.outlineSize = 4 设置 TTFConfig 的描边字段
代码//G行代码 Label::createWithTTF(ttfConfig,"Hello World5") 是重新创建 TTF 字体标签。
代码//H行代码 label5->enableShadow(Color4B(255,255,255,128),Size(4, -4)) 是设置标签的阴影效果
代码//I行代码 label5->setColor(Color3B::RED) 是设置标签的颜色
1581
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
