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

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要大于外框Size
	test->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);

看效果图

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

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

这是滚动的情况：