我们逐一来分析上面出现的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 };下面简单介绍Label的用法
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);当然了,也可以用Label创建普通的标签,效果和用CCLabelTTF::create()的一样
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);//荧光颜色为绿色效果如图所示。这里有个地方要注意下,想要显示荧光效果,必须令distanceFieldEnabled = true,否则看不到效果。
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; }