[Hanjiang Guye's Cocos2d-x Journey_33]RichTextEx is a rich text control that controls text style through HTML tags_html/css_WEB-ITnose

RichTextEx is a rich text control that controls text style through HTML tags

Blog address:

Download address

Github link

What is this for?

Change the following text content
"<#F37C2A><30>【世】<#3AB5B3>Hanjiang Guye:HelloWorld"
Generate RichText with the style shown in the picture (Supports images, flashing, rotation and other customized effects and controls)

About it

This is the LUA version, the CPP version has not been written. Welcome to transplant the CPP and JS versions
The LUA file is modified with a file written by others (add some functions, fix A few bugs... I can't run before, dear... what the hell)
Also, I'm sorry, I can't find his Github link...
· TTF font supports strokes , system fonts are not supported

Instructions for use

RichTextEx is very simple to use, just copy RichTextEx.lua to your project directory and require it
For example Like this:

APUtils = APUtils or {}  APUtils.RichTextEx = APUtils.RichTextEx or require("APUtils/gui/RichTextEx.lua")

It is very simple to create a rich text using RichText:

local txt = RichTextEx:create() -- 或 RichTextEx:create(26, cc.c3b(10, 10, 10))txt:setText("<outLine 5><underLine true><#EFB65C><font res/fonts/pw.ttf><24>您的元宝和银券不足请<#FF0000><35>充值<#EFB65C><24>,或领取抽取元宝奖励！")-- 多行模式要同时设置 ignoreContentAdaptWithSize(false) 和 contentSizetxt:setMultiLineMode(true)  -- 这行其实就是 ignoreContentAdaptWithSize(false)txt:setContentSize(200, 400)someNode:addChild(txt)

If the string is entered by the user, it is recommended to call RichTextEx.htmlEncode( "") Encode the user input to avoid unpredictable errors caused by the user entering key characters
RichTextEx.htmlDecode will be automatically called before generating the string, if you customize A control for displaying text content, please remember to call it to decode the string

Basic options for RichTextEx

<#F00> = <#FF0000>  = 文字颜色<32>                = 字体大小<font Arial>        = 文字字体 支持TTF<img filename>      = 图片（filename 可以是已经在 SpriteFrameCache 里的 key，或磁盘文件）<img_32*32 fname>   = 指定大小的图片<+2> <-2> <*2> </2> = 当前字体大小 +-*/<!>                 = 颜色、字体和字体大小恢复默认\n \t               = 换行 和 tab，可能暂时实现得不是很好 最好不要用 如果需要换行你可以创建多个RichText然后依次放好<outLine 1>         = 设置1像素描边，只支持TTF字体<underLine true>    = 是否开启下划线

Example options for RichTextEx (in RichTextEx. Provided in defaultCb)

<blink 文字>      = （动画）闪烁那些文字<rotate 文字>     = （动画）旋转那些文字<scale 文字>      = （动画）缩放那些文字(但如果你做了 setText(t, callback) 除非你在 callback 主动调用 defaultCb，否则以上选项会被忽略)   

You can extend the function

`<img_w*h http://path/image> 例如从网络下载图片`

and also support custom special syntax, just add a callback, such as

txt:setText("XXXXX <aaaa haha> <bbbb> <CCCC> xxx", function(text, sender) -- 第二个参数 sender 可选    -- 对每一个自定义的 <***> 都会调用此 callback    -- text 就等于 *** (不含<>)    -- 简单的返回一个 Node 的子实例就可，如    -- 如果接收第二个参数 sender，就可获取当前文字大小、颜色: sender._fontSize、sender._textColor    if string.sub(text, 1, 4) == "aaaa" then        return ccui.Text:create("aaa111" .. string.sub(text, 6)), "", 32)        --这里如果为了代码的健壮性最好加入self:htmlDecode        --return ccui.Text:create(self:htmlDecode("aaa111" .. string.sub(text, 6))), "", 32)    elseif text == "bbbb" then        -- 用当前文字大小和颜色        local lbl = ccui.Text:create("bbb111", "", sender._fontSize)        lbl:setTextColor(sender._textColor)        return lbl    elseif string.sub(text, 1, 4) == "CCCC" then        local img = ccui.ImageView:create(....)        img:setScale(...)        img:runAction(...)        return img    endend)

What else do you want to do

In order to support strokes and underlines, you also need to modify the source code of Cocos
Place UIRichText.h and UIRichText.cpp in the project source code directory to replace the original ones
Path: frameworks/cocos2d-x/cocos/ui
(There are three main aspects of modifying the content: adding underline settings, adding stroke settings, RichText can automatically change the height)
In addition, the toLua file needs to be modified
frameworks/cocos2d-x/cocos/scripting/lua-bindings/auto/lua_cocos2dx_ui_auto.cpp
Two functions can be seen around line 18878
int lua_cocos2dx_ui_RichElementText_init(lua_State* tolua_S)
and
int lua_cocos2dx_ui_RichElementText_create(lua_State* tolua_S)
Replace the implementation of these two functions with the following form:

int lua_cocos2dx_ui_RichElementText_init(lua_State* tolua_S){    int argc = 0;    cocos2d::ui::RichElementText* cobj = nullptr;    bool ok  = true;#if COCOS2D_DEBUG >= 1    tolua_Error tolua_err;#endif#if COCOS2D_DEBUG >= 1    if (!tolua_isusertype(tolua_S,1,"ccui.RichElementText",0,&tolua_err)) goto tolua_lerror;#endif    cobj = (cocos2d::ui::RichElementText*)tolua_tousertype(tolua_S,1,0);#if COCOS2D_DEBUG >= 1    if (!cobj)     {        tolua_error(tolua_S,"invalid 'cobj' in function 'lua_cocos2dx_ui_RichElementText_init'", nullptr);        return 0;    }#endif    argc = lua_gettop(tolua_S)-1;    if (argc == 8)    {        int arg0;        cocos2d::Color3B arg1;        uint16_t arg2;        std::string arg3;        std::string arg4;        double arg5;        int arg6;        bool arg7;        ok &= luaval_to_int32(tolua_S, 2,(int *)&arg0, "ccui.RichElementText:init");        ok &= luaval_to_color3b(tolua_S, 3, &arg1, "ccui.RichElementText:init");        ok &= luaval_to_uint16(tolua_S, 4,&arg2, "ccui.RichElementText:init");        ok &= luaval_to_std_string(tolua_S, 5,&arg3, "ccui.RichElementText:init");        ok &= luaval_to_std_string(tolua_S, 6,&arg4, "ccui.RichElementText:init");        ok &= luaval_to_number(tolua_S, 7,&arg5, "ccui.RichElementText:init");        ok &= luaval_to_int32(tolua_S, 8,&arg6, "ccui.RichElementText:init");        ok &= luaval_to_boolean(tolua_S, 9,&arg7, "ccui.RichElementText:init");        if(!ok)        {            tolua_error(tolua_S,"invalid arguments in function 'lua_cocos2dx_ui_RichElementText_init'", nullptr);            return 0;        }        bool ret = cobj->init(arg0, arg1, arg2, arg3, arg4, arg5,arg6,arg7);        tolua_pushboolean(tolua_S,(bool)ret);        return 1;    }    luaL_error(tolua_S, "%s has wrong number of arguments: %d, was expecting %d \n", "ccui.RichElementText:init",argc, 6);    return 0;#if COCOS2D_DEBUG >= 1    tolua_lerror:    tolua_error(tolua_S,"#ferror in function 'lua_cocos2dx_ui_RichElementText_init'.",&tolua_err);#endif    return 0;}int lua_cocos2dx_ui_RichElementText_create(lua_State* tolua_S){    int argc = 0;    bool ok  = true;#if COCOS2D_DEBUG >= 1    tolua_Error tolua_err;#endif#if COCOS2D_DEBUG >= 1    if (!tolua_isusertable(tolua_S,1,"ccui.RichElementText",0,&tolua_err)) goto tolua_lerror;#endif    argc = lua_gettop(tolua_S) - 1;    if (argc == 6)    {        int arg0;        cocos2d::Color3B arg1;        uint16_t arg2;        std::string arg3;        std::string arg4;        double arg5;        ok &= luaval_to_int32(tolua_S, 2,(int *)&arg0, "ccui.RichElementText:create");        ok &= luaval_to_color3b(tolua_S, 3, &arg1, "ccui.RichElementText:create");        ok &= luaval_to_uint16(tolua_S, 4,&arg2, "ccui.RichElementText:create");        ok &= luaval_to_std_string(tolua_S, 5,&arg3, "ccui.RichElementText:create");        ok &= luaval_to_std_string(tolua_S, 6,&arg4, "ccui.RichElementText:create");        ok &= luaval_to_number(tolua_S, 7,&arg5, "ccui.RichElementText:create");        if(!ok)        {            tolua_error(tolua_S,"invalid arguments in function 'lua_cocos2dx_ui_RichElementText_create'", nullptr);            return 0;        }        cocos2d::ui::RichElementText* ret = cocos2d::ui::RichElementText::create(arg0, arg1, arg2, arg3, arg4, arg5);        object_to_luaval<cocos2d::ui::RichElementText>(tolua_S, "ccui.RichElementText",(cocos2d::ui::RichElementText*)ret);        return 1;    }    if (argc == 7)    {        int arg0;        cocos2d::Color3B arg1;        uint16_t arg2;        std::string arg3;        std::string arg4;        double arg5;        int arg6;        ok &= luaval_to_int32(tolua_S, 2,(int *)&arg0, "ccui.RichElementText:create");        ok &= luaval_to_color3b(tolua_S, 3, &arg1, "ccui.RichElementText:create");        ok &= luaval_to_uint16(tolua_S, 4,&arg2, "ccui.RichElementText:create");        ok &= luaval_to_std_string(tolua_S, 5,&arg3, "ccui.RichElementText:create");        ok &= luaval_to_std_string(tolua_S, 6,&arg4, "ccui.RichElementText:create");        ok &= luaval_to_number(tolua_S, 7,&arg5, "ccui.RichElementText:create");        ok &= luaval_to_int32(tolua_S, 8,&arg6, "ccui.RichElementText:create");        if(!ok)        {            tolua_error(tolua_S,"invalid arguments in function 'lua_cocos2dx_ui_RichElementText_create'", nullptr);            return 0;        }        cocos2d::ui::RichElementText* ret = cocos2d::ui::RichElementText::create(arg0, arg1, arg2, arg3, arg4, arg5, arg6);        object_to_luaval<cocos2d::ui::RichElementText>(tolua_S, "ccui.RichElementText",(cocos2d::ui::RichElementText*)ret);        return 1;    }    if (argc == 8)    {        int arg0;        cocos2d::Color3B arg1;        uint16_t arg2;        std::string arg3;        std::string arg4;        double arg5;        int arg6;        bool arg7;        ok &= luaval_to_int32(tolua_S, 2,(int *)&arg0, "ccui.RichElementText:create");        ok &= luaval_to_color3b(tolua_S, 3, &arg1, "ccui.RichElementText:create");        ok &= luaval_to_uint16(tolua_S, 4,&arg2, "ccui.RichElementText:create");        ok &= luaval_to_std_string(tolua_S, 5,&arg3, "ccui.RichElementText:create");        ok &= luaval_to_std_string(tolua_S, 6,&arg4, "ccui.RichElementText:create");        ok &= luaval_to_number(tolua_S, 7,&arg5, "ccui.RichElementText:create");        ok &= luaval_to_int32(tolua_S, 8,&arg6, "ccui.RichElementText:create");        ok &= luaval_to_boolean(tolua_S, 9,&arg7, "ccui.RichElementText:create");        if(!ok)        {            tolua_error(tolua_S,"invalid arguments in function 'lua_cocos2dx_ui_RichElementText_create'", nullptr);            return 0;        }        cocos2d::ui::RichElementText* ret = cocos2d::ui::RichElementText::create(arg0, arg1, arg2, arg3, arg4, arg5, arg6, arg7);        object_to_luaval<cocos2d::ui::RichElementText>(tolua_S, "ccui.RichElementText",(cocos2d::ui::RichElementText*)ret);        return 1;    }    luaL_error(tolua_S, "%s has wrong number of arguments: %d, was expecting %d\n ", "ccui.RichElementText:create",argc, 6);    return 0;#if COCOS2D_DEBUG >= 1    tolua_lerror:    tolua_error(tolua_S,"#ferror in function 'lua_cocos2dx_ui_RichElementText_create'.",&tolua_err);#endif    return 0;}  

Recompile the project, and then you can use it in the project

Contents to be updated in the next version

1. Continue to modify the source code of RichText of Cocos2d-x to better support tabs and line breaks
2. Add clickable text and change color after clicking
3. Add a stroke to the system font (when it is judged to be a system font, the stroke is replaced by a shadow)

Others

Underlining is very clumsy, if you have a better way Do tell me.
Maybe you want a version that does not require modification of the Cocos2d-x source code (this version does not support strokes and underlines)
Welcome to communicate QQ: 446569365

Copyright Statement: This article is an original article by the blogger and may not be reproduced without the blogger's permission.