cocos2d-x ScrollView RichText用法和使用中的坑

来源：互联网发布：靠网络挣钱编辑：程序博客网时间：2024/04/30 03:56

ScrollView 是滚动层,RichText 是富文本

版本 cocos2d-x 3.8.1

直接上代码好了

头文件，不管用不用得到，包涵了总没错

#include "cocos2d.h"#include "cocostudio/CocoStudio.h"#include "ui/CocosGUI.h"USING_NS_CC;using namespace cocostudio::timeline;using namespace ui;

下面是测试代码，可以放在HelloWorld 的init() 函数里

//滚动层练习//创建滚动层auto test = ScrollView::create();test->setPosition(Vec2(100, 100));//开启滚动回弹test->setBounceEnabled(true);addChild(test);//背景颜色层（非必须）auto color = LayerColor::create(Color4B::GRAY);color->setPosition(0, 0);color->setAnchorPoint(Vec2(0, 0));test->addChild(color);//滚动层分为外框（裁剪区域）和内部层（内容），内容Size要大于外框Sizetest->setContentSize(Size(300, 300));test->setInnerContainerSize(Size(300, 600));//测试添加图片auto s1 = Sprite::create("HelloWorld.png");auto s2 = Sprite::create("HelloWorld.png");auto s3 = Sprite::create("HelloWorld.png");test->addChild(s1);test->addChild(s2);test->addChild(s3);//获取外框和内层大小Vec2 v1 = test->getContentSize();Vec2 v2 = test->getInnerContainerSize();//设置锚点s1->setAnchorPoint(Vec2(0, 0));s2->setAnchorPoint(Vec2(0, 0));s3->setAnchorPoint(Vec2(0, 0));//设置缩放s1->setScale(0.3f);s2->setScale(0.3f);s3->setScale(0.3f);//设置位置s1->setPosition(0, 0);s2->setPosition(100, v2.y/2);s3->setPosition(200, v2.y);//滚动到底部，时间为1秒，有减速缓冲test->scrollToBottom(1.0f,true);//这里测试富文本控件RichText* _richText = RichText::create();//设置自动换行_richText->ignoreContentAdaptWithSize(false);_richText->setContentSize(Size(300, 300));_richText->setAnchorPoint(Vec2(0, 0));_richText->setPosition(Vec2(0, 0));RichElementText* re1 = RichElementText::create(1, Color3B::WHITE, 255, "This is white text. ", "Helvetica", 24);RichElementText* re2 = RichElementText::create(2, Color3B::YELLOW, 255, "This is the yellow words. ", "Helvetica", 24);RichElementText* re3 = RichElementText::create(3, Color3B::BLUE, 255, "I am blue.", "Helvetica", 47);RichElementText* re4 = RichElementText::create(4, Color3B::GREEN, 255, "Green here. ", "Helvetica", 24);RichElementText* re5 = RichElementText::create(5, Color3B::RED, 255, "The last to turn red ", "Helvetica", 24);RichElementImage* reimg = RichElementImage::create(6, Color3B::WHITE, 255, "CloseNormal.png");//cocos2d::extension::CCArmatureDataManager::sharedArmatureDataManager()->addArmatureFileInfo("cocosgui/100/100.ExportJson");//cocos2d::extension::CCArmature *pAr = cocos2d::extension::CCArmature::create("100");//pAr->getAnimation()->play("Animation1");//RichElementCustomNode* recustom = RichElementCustomNode::create(1, ccWHITE, 255, pAr);RichElementText* re6 = RichElementText::create(7, Color3B::ORANGE, 255, "Orange orange!! ", "Helvetica", 35);_richText->pushBackElement(re1);_richText->insertElement(re2, 1);_richText->pushBackElement(re3);_richText->pushBackElement(re4);_richText->pushBackElement(re5);_richText->insertElement(reimg, 2);_richText->pushBackElement(re6);//_richText->pushBackElement(recustom);test->addChild(_richText);//UI类图片测试auto _im = ImageView::create("HelloWorld.png");_im->setAnchorPoint(Vec2(1,0));_im->setPosition(Vec2(v1.x, 0));_im->setScale(0.3f);test->addChild(_im);

看效果图

注意！！！坑在这里，左下角的图片和富文本，坐标设置的时候都是（０,０），但是他们的位置却不一样。

经过测试，富文本作为滚动层子节点时，设置坐标位置的（０,０）位置是以（０，外框高度）为原点。

这是滚动的情况：

0 0