一种根据指定字符规则渲染出flash富文本的实现方法与流程

文档序号:15146656发布日期:2018-08-10 20:32阅读:313来源:国知局

本发明涉及flash的富文本渲染和交互领域,尤其涉及一种根据指定字符规则渲染出flash富文本的实现方法。



背景技术:

现有技术中,flash对文本的原生渲染非常简单。通过flash内置的api(applicationprogramminginterface)、有限的html(hypertextmarkuplanguage)标签和css(cascadingstylesheets)样式,只能实现简单的文本效果。但对于图文混排,或者给特定文本加上复杂样式等任务则没有很好的实现。

具体来说,下面的三种渲染效果,flash就无法实现:

1)flash无法给特定的文本块添加背景颜色,也无法添加下划线;

2)flash无法在特定的文本位置插入图片;

3)flash渲染出来的文本无法兼容2d(显示列表)和3d(stage3d)环境。

flash作为ria(richinternetapplication)概念的一种实现方案,迫切的需要一种对显示文本的高级支持。因此,本领域的技术人员致力于开发一种根据指定字符规则渲染出flash富文本的实现方法,可以给指定的文本添加丰富的样式,在指定的文本位置插入图片,也可以使得渲染出来的文本能够同时在多种flash渲染模式中运行。



技术实现要素:

有鉴于现有技术的上述缺陷,本发明所要解决的技术问题是如何在flash环境下实现图文混排或者给特定文本加上复杂样式的支持,并可以在2d和3d环境下兼容显示。

为实现上述目的,本发明提供了一种根据指定字符规则渲染出flash富文本的实现方法,所述方法包括以下步骤:

步骤1、通过正则匹配,解析器根据自定义的解析规则把原始文本解析成一系列的文本块对象;

步骤2、判断显示环境是2d环境还是3d环境,根据显示环境的不同,采取不同的文本渲染过程进行渲染,并以富文本的格式把文本显示在不同的显示环境下。

进一步地,所述步骤2还包括:

步骤2.1、判断显示环境是2d环境还是3d环境,如果显示环境是2d环境,则选择textrender为渲染器,并跳到步骤2.2,如果显示环境是3d环境,则选择gputextrender为渲染器,并跳到步骤2.4;

步骤2.2、将解析器解析产出的文本块交由blockmanager管理,blockmanager获得每个文本块的具体样式及其坐标信息,并提供抽象的数据接口,为渲染提供数据支持;

步骤2.3、textfieldrender将根据blockmanager提供的文本块信息,直接渲染到textfield文本上,再针对每个文本块应用解析产生的样式数据,利用textfield提供的settextformat方法逐个渲染指定的文本实现图文混编的富文本渲染效果;

步骤2.4、gtextfieldrender收到textfield内容已经改变的通知,利用bitmap类的bitmapdata.draw(textfield)功能,把2d对象textrender上面的内容全部绘制,给textfield做一个快照,然后用texture.uploadfrombitmapdata(bitmapdata)功能把bitmapdata动态地转换成stage3d需要的texture对象,即starling的纹理,然后把顶点数据和纹理数据上传到gpu渲染。

进一步地,所述自定义的解析规则,涉及如下特殊符号:

|换行;

*.+*如果是第一句,居中加粗换行,否则换行居中加粗换行;

|该符号之前的字母提示;

[.+]该符号之间的字母提示;

[.+]该符号之间的字母下划线;

<b>.+</b>之间字符加粗;

<i>.+</i>之间字符斜体;

<u>.+</u>之间字符下划线;

<fontcolor=“#d">.+</font>之间的文字特殊颜色;

<=>绘制一条短的输入线;

<_>绘制一条长的输入线;

___是问题占位符;

|分隔符;

|+|表示之间的内容视为一个单词;

[+]单词时间标记符号。

进一步地,所述自定义的解析规则,根据不同的业务模式,可以拓展到更多的符号。

进一步地,所述文本块对象是原始文本的子文本,每个文本块对象除包含原始文本的内容,还包含附属样式的信息,比如字体、字号、开始索引和结束索引等信息。

进一步地,所述textfieldrender由三层显示对象上下叠加组成,上下两层是sprite层,中间一层是textfield层,通过三层组合叠加达到图文混排的效果。

进一步地,所述上层的sprite被用来绘制一些文本遮罩;所述中层textfield文本负责渲染文本样式。

进一步地,所述底层的sprite利用textfield.getcharboundaries获取特定字符索引的边界,借此渲染文本背景、下划线等元素。

进一步地,所述gputextrender点击功能的实现是利用点击产生的坐标,经过坐标换算映射到2d对象上来实现。

进一步地,所述textfieldrender和gputextrender进行了封装,对外暴露一致的接口,方便用户的调用。

本发明所开发的flash富文本实现方法,可以给指定的文本添加丰富的样式,在指定的文本位置插入图片,也可以使得渲染出来的文本能够同时在多种flash渲染模式中运行。

以下将结合附图对本发明的构思、具体结构及产生的技术效果作进一步说明,以充分地了解本发明的目的、特征和效果。

附图说明

图1是本发明的一个较佳实施例的方法流程图;

图2是本发明的一个较佳实施例在2d环境下的渲染流程图;

图3是本发明的一个较佳实施例在3d环境下的渲染流程图;

图4是本发明的一个较佳实施例在整个处理过程中衍生出来的类。

具体实施方式

以下参考说明书附图介绍本发明的多个优选实施例,使其技术内容更加清楚和便于理解。本发明可以通过许多不同形式的实施例来得以体现,本发明的保护范围并非仅限于文中提到的实施例。

如图1所示,是从原始的字符串解析渲染出符合特殊要求的富文本格式的处理流程。第一个步骤是解析输入的原始文本(rawtext),生成一系列的文本块(textblocks)。第二个步骤是根据显示环境的不同,采取不同的文本渲染过程进行渲染,并以富文本的格式显示在不同的显示环境下。

在第一个步骤中,解析器(iparser)负责对原始文本进行解析。通过正则匹配,解析器根据规则把原始文本解析成一系列的文本块对象。每个文本块对象都是原始文本的子文本。每个文本块对象除了包含原始文本的内容,还包含附属样式的信息,比如字体、字号、开始索引和结束索引等信息。

按照文本实现的不同需求,自行定义解析器的解析规则。根据不同的业务模式,可以对解析规则进行拓展,拓展到更多的特殊符号。

在本实施例中,解析器所依据的解析规则,涉及如下特殊符号:

|换行;

*.+*如果是第一句,居中加粗换行,否则换行居中加粗换行;

|该符号之前的字母提示;

[.+]该符号之间的字母提示;

[.+]该符号之间的字母下划线;

<b>.+</b>之间字符加粗;

<i>.+</i>之间字符斜体;

<u>.+</u>之间字符下划线;

<fontcolor=“#d">.+</font>之间的文字特殊颜色;

<=>绘制一条短的输入线;

<_>绘制一条长的输入线;

___是问题占位符;

|分隔符;

|+|表示之间的内容视为一个单词;

[+]单词时间标记符号。

第二个步骤,根据显示环境的不同,采取不同的文本渲染过程,把文本块以富文本的格式在不同的显示环境下显示。文本渲染由渲染器负责,渲染器分为textrender和gputextrender两个部分,将根据显示环境的不同而选择不同的渲染器。如果显示环境为2d(显示列表)环境,则选择textrender为渲染器。如果显示环境为3d(stage3d)环境,则选择gputextrender为渲染器,与文本做交互。

如图2所示,第一个步骤中解析器解析产出的文本块将交由blockmanager管理。blockmanager管理器持有所有文本块对象,blockmanager有能力获得每个文本块的具体样式及其坐标信息,并提供抽象的数据接口,比如想要获取第三个文本块的文本索引,只需读取前两个文本块的文本总长度。blockmanager为渲染提供数据支持。在2d环境下,textfieldrender将根据blockmanager提供的文本块信息,操纵textfield的settextformat()接口,改变具体的文本样式,实现图文混编的富文本渲染效果。具体来说,textfieldrender由三层显示对象上下叠加组成。上下两层是sprite层,中间一层是textfield层,通过三层组合叠加达到图文混排的效果。所有用到的符号都是按照步骤一中设定的解析规则进行解析,最终把解析完的数据展现到这三层上面。上层的sprite被用来绘制一些文本遮罩;中层textfield文本负责渲染文本样式;底层的sprite利用textfield.getcharboundaries获取特定字符索引的边界,借此渲染文本背景、下划线等元素。中层渲染先把textblock上面的文本直接渲染到textfield文本上,然后再针对每个textblock应用解析产生的样式数据,利用textfield提供的settextformat方法逐个渲染指定的文本,最终达到图文混编的富文本渲染效果。

不同特殊符号的解析规则和解析过程不一样。下面是四个特殊符号的解析规则和解析过程:

1)

输入:aa|bb

输出:[aa\nbb]

表现:换行

说明:换行不属于具体的格式,当一个元素处理。当发现|后,解析器直接用字符串的replace方法把它替换成\n。因为\n是标准的换行转义符,所以文本textfield能够直接渲染。

2)

输入:aa[bb]cc

输出:[aa,bb,cc]

表现:该符号之间的字母下划线

说明:解析数组里面产生三个文本块对象,其中文本块1、3是普通的文本块对象,第二个文本块继承于文本块对象,包含额外的meta信息,用于表示该文本里面包含下划线。textfieldrender识别meta信息后,调用getcharboundaries方法获取里面每个字符的宽度和高度位置。根据字符的宽度和高度位置,在第一层的sprite里面绘制相应的下划线。

3)

输入:aa<bb>cc

输出:[aa,bb,cc]

表现:绘制一条长的输入线

说明:与上述规则2一样,区别在于在本规则所阐释的场景中,用肉眼观察,看上去是填写填空题。解析器解析之后,产生三个数组对象。textfieldrender识别第二个文本块为绘制输入线,将该文本块的文字颜色改为和背景颜色一致(也就是第三层sprite的颜色),并在第一层上面绘制下划线。下划线的绘制规则参考上述规则2。

4)

输入:aa<b>bb</b>cc

输出:aa<b>bb</b>cc

表现:bb加粗

说明:由于textfield原生支持简单的html标签,所以该文本不用解析,直接就能显示。

上述四个规则最具代表性,其他规则都是衍生规则,只是修改样式。也可以根据不同的业务模式,对上述解析规则进行拓展。

如图3所示,在3d环境下,选择gputextrender为渲染器,与文本做交互。gputextrender是一个抽象的渲染器。gtextfieldrender收到textfield内容已经改变的通知,利用bitmap类的bitmapdata.draw(textfield)功能,把2d对象textrender上面的内容全部绘制,给textfield做一个快照,然后用texture.uploadfrombitmapdata(bitmapdata)功能把bitmapdata动态地转换成stage3d需要的texture对象,即starling的纹理,然后把顶点数据和纹理数据上传到gpu渲染。需要注意的是,2d转3d后会丢失原有的鼠标监听功能,所以gputextrender点击功能的实现是利用点击产生的坐标,经过坐标换算映射到2d对象上来实现。

textfieldrender和gputextrender进行了封装,对外暴露一致的接口,方便用户的调用。

如图4所示,是整个处理过程衍生出来的类。textblock是文本块类。blockmanager是文本块管理器类。textfieldrender是2d环境的渲染器类。gtextfieldrender是3d环境的渲染器类。

以上详细描述了本发明的较佳具体实施例。应当理解,本领域的普通技术无需创造性劳动就可以根据本发明的构思作出诸多修改和变化。因此,凡本技术领域中技术人员依本发明的构思在现有技术的基础上通过逻辑分析、推理或者有限的实验可以得到的技术方案,皆应在由权利要求书所确定的保护范围内。

当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1