RichText支持显示删除线吗？

Creator 2.x
#1

类似这样的，没办法直接直接这么用

#2

顶一波…

#3

没有支持 是在想用可以看看的实现 仿照着写一个

https://docs.cocos.com/creator/manual/zh/components/richtext.html?h=richtext

#4

@mayiyezongheng

先传下效果图

1605779746562.jpg888×344 17.7 KB

原来是仿照引擎提供的下划线标签写的(2.4.3版本)

修改的脚本如下:

  1. html-text-parser.js
    header = attribute.match(/^(on|u|b|i|s)(\s)*/);
    if (header && header[0].length > 0) {
        tagName = header[0];
        attribute = attribute.substring(tagName.length).trim();
        switch (tagName[0]) {
            case 'u':
                obj.underline = true;
                break;
            case 'i':
                obj.italic = true;
                break;
            case 'b':
                obj.bold = true;
                break;
            case 's':
                obj.strike = true;
                break;
        }
        if (attribute === "") {
            return obj;
        }
        eventObj = this._processEventHandler(attribute);
        obj.event = eventObj;
    }

增加对s标签解析

  1. CCRichText.js
    labelComponent.enableUnderline = textStyle && textStyle.underline;
    labelComponent.enableStrike = textStyle && textStyle.strike;

根据解析结果设置label的属性

  1. CCLabel.js
    _enableStrike: false,
    enableStrike: {
        get() {
            return this._enableStrike;
        },
        set(value) {
            this._enableStrike = value;
            this.setVertsDirty();
        }
    },

给label组件添加是否显示删除线的属性

  1. ttf.js

let _enableUnderline = false;
let _underlineThickness = 0;
let _enableStrike = false;

添加一个_enableStrike变量

    _enableUnderline = comp.> enableUnderline;
    _enableStrike = comp.enableStrike;

_updateProperties方法赋值下

if (!_shadowComp && !_outlineComp && !_enableUnderline && !_enableStrike) return;

_drawTextEffect方法加下判断

        if (_enableStrike) {
            _drawUnderlineWidth = measureText(_splitedStrings[i]);
            if (_hAlign === macro.TextAlignment.RIGHT) {
                _drawUnderlinePos.x = startPosition.x - _drawUnderlineWidth;
            } else if (_hAlign === macro.TextAlignment.CENTER) {
                _drawUnderlinePos.x = startPosition.x - (_drawUnderlineWidth / 2);
            } else {
                _drawUnderlinePos.x = startPosition.x;
            }
            _drawUnderlinePos.y = drawTextPosY + _drawFontSize / 8;
            _context.fillRect(_drawUnderlinePos.x, _drawUnderlinePos.y - _drawFontSize / 2, _drawUnderlineWidth, _underlineThickness);
        }

_drawTextEffect方法新增_enableStrike解析 仿照上面下划线写的

测了下web然后用ttf字体是可以的 如果想用的话可以自己看看源码扩展下 我这个只是临时弄的一个 自己没使用过 公司线上项目的话还是自己研究下引擎好好写写 自己的项目就无所谓了

这样改完以后label也支持了 不一定非要用richText

1赞
#5

感谢大佬…

#6

layout 加sprite 子节点里一个文本控件就完事了呀

#7

其实用文字删除线生成器就好了，复制粘贴就完事https://cn.piliapp.com/cool-text/strikethrough-text/

image
image1108×806 34.3 KB

#8

mark!