CN101968888A - 一种适用于移动终端的矢量图形填充方法 - Google Patents

Abstract

本发明公开了一种适用于移动终端的矢量图形填充方法，通过获取矢量图形多边形的边与各像素点相交的交点信息Grid(X_i)，并在Y轴上的坐标Y_i的依次存入链表GridRow(Y_i)中。然后进行填充，在填充时，按照Y坐标递增序，依次对多边形涉及到得各GridRow进行处理，这个步骤包含两个部分，一是对边与扫描线的交点像素，进行反走样计算并填充合适的值，二是对此扫描线上的多边形内部区域进行填充，填充可以为实填充，也可以线性渐变填充与放射渐变填充。本发明的填充方法比起活性边填充方法和扫描线种子填充更适合于移动终端屏幕显示，耗时少，效率高，而且支持复杂自交多边形填充。

Description

一种适用于移动终端的矢量图形填充方法

技术领域

本发明属于计算机图形处理技术领域，更为具体地讲，涉及一种适用于移动终端的矢量图形填充方法。

背景技术

富媒体有别于传统媒体，它将文本，矢量图形，图片，动画，音视频等多种媒体对象在时间/空间上进行有机结合，提供丰富的表现形式和交互能力。其主要特征是可基于时间或用户交互的基础上产生动态行为。最近的研究报告表明，越来越多的富媒体应用被装载到移动终端上，例如，交互式电视、游戏、动态UI等。这些应用要求更低的内存消耗和更高的播放速度。目前移动领域的富媒体应用倾向于使用专门的富媒体引擎，通过定义基于XML规范的轻量级标记语言，脚本及其它技术等展现各种的富媒体应用。例如W3C的SVG Tiny 1.2标准，以及基于SVG Tiny 1.2标准上的扩展技术，如MPEG组织的LASeR标准、3GPP组织的DIMS标准，私有技术如NOKIA倡导的MORE方案和Adobe公司的Flashlite等。

富媒体内容播放的速度很大程度上取决于富媒体引擎所采用的渲染技术，移动设备上的渲染技术可以分为软件、硬件和软硬件结合三种。但是目前移动设备大多尚未配备硬件加速技术，且图形加速接口也不统一，所以移动设备的渲染技术还是主要采用纯软件实现方案。在具体实现过程中，在保证图形质量的情况下，除了需要充分考虑到降低计算量、减少内存需求，实现快速绘制外，还需要考虑到CPU处理能力、电池供电能力和内存带宽等因素。

针对软件实现的富媒体场景渲染，其主要的优化策略体现在多边形填充方面，可细分为复杂自交多边形处理，反走样处理、图形光栅化填充等方面。经过国内外专家学者的研究，这些方面都取得了长足的进步。多边形填充方面，虽然有很多成熟的算法，如活性边表和扫描线种子填充算法，但是支持反走样和复杂自交多边形的算法则很少，针对移动设备的优化则更少。如Kiia K基于经典的edge-flag填充算法提出的一种简单并高效的填充方式，但是其采用的n-rooks过采样策略不太适用于移动终端，而且文中并没有给出如何实现不同填充规则的算法；Khanh D的算法解决复杂自交多边形的问题，支持even-odd、nonzero、winding-counting三种填充方式，但是其算法难度高，且其采用的反走样策略并不适用与移动终端。

通常情况下富媒体场景处理流程一般分为3个步骤，分别是：

Step1.读取：这个步骤主要负责读入场景文档并解析创建场景树；

Step2.合成：这个步骤主要负责根据时间触发动画或者用户交互事件去改变当前场景树的状态；

Step3.渲染：主要负责根据Step2产生的场景树进行渲染。

经过对比发现，读取步骤虽然耗时很多，但是在场景处理流程中发生的次数并不多，一般发生在场景切换，或者LASeR等技术中接收到场景单元的时刻，剩下的两个部分将在场景处理中频繁发生，与合成相比，渲染占用了大量的时间，成为场景生命周期中最耗时间的一个环节，占用了大概80％的CPU时间。表1是现有技术在不同用例下采用渲染整个视口(viewport)的方式处理场景，三个步骤分别运行一次占用的时间对比。时间单位是毫秒，测试用例来源于08年9月份发布的W3C SVGTiny1.2TestSuite Beta3版本。

表1

表1是富媒体场景处理流程中的3个步骤的时间开销对照表。从表1我们可以看出，渲染步骤是场景处理流程中最耗时的步骤，而造成这一结果的原因之一是一些没有发生变化或没有被变化影响到的元素也被渲染了，造成了资源无谓的浪费；另一方面在矢量图形光栅化填充过程中由于嵌入式设备的数据总线速度较低，对内存的大量读写也会耗费大量的时间。

发明内容

本发明的目的在于提供一种耗时少的适用于移动终端的矢量图形填充方法。

为实现上述发明目的，本发明适用于移动终端的矢量图形填充方法，其特征在于，包括以下步骤：

(1)、获取矢量图形的多边形顶点坐标及其顺序，选择第一个顶点作为当前顶点；

(2)、从当前顶点开始到下一个顶点按照线段绘制方式得到一条多边形的边，然后获取该条边与各像素点相交的交点信息Grid(X_j)：包括像素点的X轴坐标X_j、该条边与像素点相交的两个交点在Y轴上的距离截距K以及参考面积A；

其中，j为像素点在X轴上的编号，j∈N，N是屏幕在X轴方向上的像素点总数；截距K带有方向性，如果该条边按Y轴方向递增，为正，否则为负；

参考面积A按照以下公式进行计算：

$A=\frac{(L_1+L_2)\×K}{2};$

式中，L₁，L₂是该条边与像素点相交的两个交点到像素点左边框的距离；

将获得的交点信息Grid(X_j)按交点像素在Y轴上的坐标Y_i的依次存入链表GridRow(Y_i)中，其中，i为像素点在Y轴上的编号，i∈M，M是屏幕在在Y轴方向上的像素点总数；

(3)、将下一个顶点作为当前顶点，重复步骤(2)，直至矢量图形的多边形闭合；

(4)、填充

a1、获取链表GridRow(Y₁)，并将其设置为当前处理的链表GridRow_current；

a2、按照交点坐标X_j递增序对当前链表GridRow所含交点信息Grid(X_j)进行桶排序，交点坐标X_j相同的交点信息Grid(X_j)进行合并，合并的规则是将截距K相加，参考面积A相加；

a3、排序后，按照交点坐标X_j递增方向，获得当前链表GridRow中第一个交点信息Grid(X_min)作为当前交点信息Grid(X_current)，将其截距K记录为截距和K′，及其参考面积A，

a4、根据当前交点信息Grid(X_current)的参考面积A、截距和K′以及选定的填充规则，计算出矢量图形的多边形内部区域占该交点像素的面积比例P；

按照反走样的区域采样策略，根据面积比例P，得到该交点像素的透明度信息，提取当前矢量图形的颜色及背景颜色，计算出该交点像素在屏幕上需要显示的颜色进行填充；

a5、判断当前交点信息Grid(X_current)是否是当前链表GridRow中的最后一个；

如果不是，进一步判断，当前链表GridRow中下一个交点信息Grid(X_next)中的X轴坐标是否与当前链表GridRow_current中的X轴坐标相邻，如果是相邻，则转到步骤a52，如果不相邻，则进行步骤a51；

a51、截距和K′是否为0，如果为0，则当前交点像素至下个交点像素之间的区域为矢量图形多边形的外部区域，不需要进行填充；截距和K′不为0，则根据选定的填充规则，计算出矢量图形的多边形内部区域占该交点像素的面积S″，若此时面积S″为0，则此区域为多边形外部区域，不需要进行填充，反之为内部区域，根据当前矢量图形的颜色进行填充；

a52、将当前链表GridRow中下一个交点信息Grid(X_next)的截距K与截距和K′相加，返回步骤a4；

如果是，则进一步判断当前链表GridRow是否是最后一个链表GridRow(Y_M)，如果不是最后一个链表GridRow(Y_M)，则将按照Y坐标顺序递增的下一个链表GridRow(Y_next)设置为当前链表GridRow_current，返回步骤a2；如果是最后一个链表GridRow(Y_M)，则矢量图形填充完毕。

矢量图形的多边形填充会涉及到排序和内存读写，本发明的方法的设计指导思想是在内存空间允许的条件下，尽量快速的排序以及尽量少的内存读写操作。在填充时，按照Y坐标递增序，依次对多边形涉及到得各GridRow进行处理，这个步骤包含两个部分，一个是对边与扫描线的交点像素，进行反走样计算并填充合适的值，二是对此扫描线上的多边形内部区域进行填充，填充可以为实填充，也可以线性渐变填充与放射渐变填充。

本发明的方法比起活性边填充方法和扫描线种子填充方法(又称扫描线边界填充方法)更适合于移动终端屏幕显示，耗时少，效率高，而且支持复杂自交多边形填充。在活性边填充算法中，活性边动态排序、选择或删除边时需要频繁的对内存空间进行申请和释放，算法的时间复杂度较高，这对处理速度慢的移动终端来说是难以接受的。在扫描线种子填充算法中，需要事先知道各边的边界与扫描线的交点与颜色，然后对当前扫描线的上下进行探测，确定种子，然后针对每一个种子进行填充，在这种方法中，存在不确定的栈空间分配，而且存在过多的像素点读写操作，在内存读写慢的移动设备上这种算法的填充效率并不高。

同时，本发明的方法充分考虑了移动设备的特点，支持复杂自交多边形填充以及even_odd和nonzero两种填充规则。扫描线上的多边形内部区域的填充可以为实填充、线性渐变填充和放射渐变填充。SVG元素的Stroke和Fill操作都可以使用这种算法。

附图说明

图1是本发明中一个交点信息Grid(X_j)的示意图；

图2是本发明中链表的GridRow(Y_i)的存储示意图；

图3是本发明中链表获取的一具体实例示意图；

图4是一个自交多边形在某扫描线Y_i上的局部效果图。

具体实施方式

下面结合附图对本发明的具体实施方式进行描述，以便本领域的技术人员更好地理解本发明。需要特别提醒注意的是，在以下的描述中，当已知功能和设计的详细描述也许会淡化本发明的主要内容时，这些描述在这里将被忽略。

图1是本发明中一个交点信息Grid(X_j)的示意图。

在本发明中，定义了一个交点信息Grid(X_j)，如图1所示，位于坐标(X_j，Y_i)的像素点与矢量图形多边形的一条边E相交，这样，交点信息Grid(X_j)就定义为包括像素点的X轴坐标X_j、该条边E与像素点相交的两个交点在Y轴上的距离截距K以及参考面积A；其中j为像素点在X轴上的编号，j∈N，N是屏幕在X轴方向上的像素点总数；截距K带有方向性，如果该条边按Y轴方向递增，为正，否则为负；参考面积A按照以下公式进行计算：

$A=\frac{(L_1+L_2)\×K}{2};$

式中，L₁，L₂是该条边与像素点相交的两个交点到像素点左边框的距离。

交点信息Grid(X_j)中的截距K及参考面积A会被用于判断多边形内、外部区域以及反走样计算。

如图1所示，图中像素为某扫描线Y_i中第j个像素点，此像素点与多边形的一条边E存在两个交点，两个交点距像素点左边框的距离分别是L₁和L₂，图1中，L₂为一个像素宽度，边E与此像素点形成了长度为K的截距，K带有方向性，图1中，边E按Y方向递增为正，因此为正。边E与像素点相交形成了参考面积A，因为K带有方向性，所以A也有正负之分。在计算时可将一个像素的宽度记做W_p，则一个像素点面积定义为W_p ²个单位。按照所需精度，可以使用2ⁿ(n＝2，4，6，8...)来表示W_p，距离L₁和L₂根据精度的不同也需要进行下取整计算。

参考面积A按照以下公式进行计算：

$A=\frac{(L_1+L_2)\×K}{2};$

图2是本发明中链表的GridRow(Y_i)的存储示意图。

如图2所示，将获得的交点信息Grid(X_j)按交点像素在Y轴上的坐标Y_i的依次存入链表GridRow(Y_i)中，其中，，i为像素点在Y轴上的编号，i∈M，M是屏幕在在Y轴方向上的像素点总数。

这样，屏幕每一条扫描线对应于一个链表GridRow(Y_i)，链表GridRow(Y_i)包含矢量图形的多边形与此扫描线相交的一个或多个Grid信息。

如图2所示，矢量图形的多边形的两条边E₁，E₂与坐标值Y_i扫描线上的像素点相交，生成了3个交点信息Grid(X_j-(l+1))、Grid(X_j)，Grid(X_j+1)，并记录在对应的链表GridRow(Y_i)中，其中，l是两个交点像素的间隔距离。

在本实施例中，步骤(2)中从当前顶点开始到下一个顶点按照线段绘制方式得到一条多边形的边，然后获取该条边与各像素点相交的交点信息Grid(X_j)，将获得的交点信息Grid(X_j)按交点像素在Y轴上的坐标Y_i的依次存入链表GridRow(Y_i)中为：

2.1)、找到当前顶点的Y坐标Y_i所对应的链表GridRow(Y_i)，计算该条边与当前扫描线的交点，得到交点信息，放入对应的链表GridRow(Y_i)中；

2.2)、将Y坐标向该条边终点方向增加1个像素点，计算该条边与新的扫描线的交点，得到新的交点信息，放入对应的链表GridRow(Y_i+1)或GridRow(Y_i-1)中，重复此步骤，直至达到该条边的终点。

图3是本发明中链表获取的一具体实例示意图。

在本实施中，如图3所示，矢量图形的多边形顶点V₁，V₂，V₃，V₄以及对应的各边E₁，E₂，E₃，E₄，以及按照E₁，E₂，E₃，E₄的方式顺序处理各条边，得到的交点信息。其中按照Y轴正方向增长的边的参考面积是浅色，反之是深色。值得注意的是，例如，V₁顶点涉及到两条边E₁和E₄，这两条边生成了各自的交点信息Grid(X₁)，这两个交点信息具有相同的横坐标值X₁，但是参考面积不同，这两个交点信息Grid(X₁)都会被记录在链表GridRow(Y₅)中，类似，在V₂，V₃，V₄上也是同样的情况。所以在链表GridRow(Y₅)中，有3个交点信息，即Grid(X₁)、Grid(X₂)、Grid(X₁)。类似，在链表GridRow(Y₃)中有5个交点信息，即Grid(X₅)、Grid(X₅)、Grid(X₄)、Grid(X₁)、Grid(X₁)，在链表GridRow(Y₁)中有4个交点信息，即Grid(X₄)、Grid(X₃)、Grid(X₃)、Grid(X₂)。处理完成时，每个GridRow(Y_1～5)中的交点信息是按照多边形边的处理顺序排列的，例如GridRow(Y₂)中的交点信息的顺序是Grid(X₄)、Grid(X₂)、Grid(X₁)。尽管上述表述中，交点信息表述的符号有重叠，但是由于它们被放在不同的链表中以及不同的链表位置，因此，在移动终端中进行处理时，是可以区分的。

在本实施例中，a4步骤选定的填充规则为奇偶填充规则，即even_odd填充规则，矢量图形的多边形内部区域占该交点像素的面积比例P根据以下公式计算得出：

$P=\frac{S^{\′\′}}{{W_p}^2};$

上式中，W_P为像素宽度，矢量图形的多边形内部区域占该交点像素的面积S″：

$S^{\&prime;\&prime;}=\left\{\begin{array}{cc}{S}^{\&prime;},& S^{\&prime;}<{W_p}^2\\ 2{W_p}^2-S^{\&prime;},& S^{\&prime;}\&GreaterEqual;{W_p}^2\end{array}\right.$

S′＝|S|mod(2W_p ²)；

S＝K′×W_p-A；

上式面积S″也用于判断多边形内部区域，其数学特征保证了扫描线填充时经过奇数条边后进行填充，而经过偶数条边后不进行填充，符合even_odd规则。

在本实施例中，a4步骤选定的填充规则也可以为非零填充规则，即nonzero填充规则，矢量图形的多边形内部区域占该交点像素的面积比例P根据以下公式计算得出：

$P=\frac{S^{\&prime;\&prime;}}{{W_p}^2};$

上式中，W_P为像素宽度，矢量图形的多边形内部区域占该交点像素的面积S″：

$S^{\&prime;\&prime;}=\left\{\begin{array}{cc}\left|S\right|,& \left|S\right|<{W_p}^2\\ {W_p}^2,& \left|S\right|\&GreaterEqual;{W_p}^2\end{array}\right.$

S＝K′×W_p-A；

上式面积S″也用于判断多边形内部区域，其数学特征保证了当穿过Y轴正负方向的边相同时不进行填充，不同时进行填充，符合nonzero规则。

图4是一个自交多边形在某扫描线Y_i上的局部效果图。

假设扫描线Y_i上的交点像素X_j-(l+1)左边的区域是多边形外部，其中，l是两个交点像素的间隔距离，则无论使用even_odd填充规则还是nonzero填充规则填充，[X_j-(l+1)，X_j]都属于多边形内部区域，但是在计算像素点X_j的面积比例P时，如果按照even_odd填充规则填充，则面积比例P小于1，如果按照nonzero填充规则填充，面积比例P等于1。当计算像素点X_j+1到下一个交点像素之间的区域是否是多边形内部区域时，不同的填充规则导致了不同的结果。在图4中，此时

如果按照even_odd填充规则填充，则S″等于0，从而这段区域不需要填充，若按照nonzero填充规则填充，则S″等于W_p ²，则区域需要填充。even_odd填充规则与nonzero填充规则在本发明的填充中存在一定的区别。

表2是本发明的填充方法与其他俩种种填充算法在复杂度方面的比较，其中m为多边形涉及到的扫描线数，n为多边形在某扫描线上最多交点的数量，v为多边形边数量。

表1

本发明的填充方法也属于扫描线填充算法的一种，其具有O(m×n)的时间复杂度和O(m×n)的空间复杂度，且扫描线数m＜Min(PolygonHeight，ScreenHeight)，最多交点的数量n＜Min(PolygonWidth，ScreenWidth)。如表1所示，在移动终端上，活性边表填充算法的空间复杂度小于本发明的填充方法，但时间复杂度大于本发明的填充方法，在多边形很复杂时，由于涉及到活性边的动态排序，将耗费大量时间，移动终端上屏幕分辨率较小，本发明的填充方法中O(m×n)的空间复杂度能够承受。虽然本发明的方法与传统的扫描线种子填充算法相比具有相同的时间和空间复杂度，但是在具体实现时，后者需要额外的栈空间存储种子，而且需要大量的对内存的读写操作，而本发明的填充方法大部分只涉及到写操作。因为移动设备上数据总线相对较慢，采用本发明的填充方法时可以节省大量的IO操作时间。

尽管上面对本发明说明性的具体实施方式进行了描述，以便于本技术领的技术人员理解本发明，但应该清楚，本发明不限于具体实施方式的范围，对本技术领域的普通技术人员来讲，只要各种变化在所附的权利要求限定和确定的本发明的精神和范围内，这些变化是显而易见的，一切利用本发明构思的发明创造均在保护之列。

Claims (4)

1.一种适用于移动终端的矢量图形填充方法，其特征在于，包括以下步骤：

(1)、获取矢量图形的多边形顶点坐标及其顺序，选择第一个顶点作为当前顶点；

(2)、从当前顶点开始到下一个顶点按照线段绘制方式得到一条多边形的边，然后获取该条边与各像素点相交的交点信息Grid(X_j)：包括像素点的X轴坐标X_j、该条边与像素点相交的两个交点在Y轴上的距离截距K以及参考面积A；

其中，j为像素点在X轴上的编号，j∈N，N是屏幕在X轴方向上的像素点总数；截距K带有方向性，如果该条边按Y轴方向递增，为正，否则为负；

参考面积A按照以下公式进行计算：

式中，L₁，L₂是该条边与像素点相交的两个交点到像素点左边框的距离；

将获得的交点信息Grid(X_j)按交点像素在Y轴上的坐标Y_i的依次存入链表GridRow(Y_i)中，其中，i为像素点在Y轴上的编号，i∈M，M是屏幕在在Y轴上的像素点总数；

(3)、将下一个顶点作为当前顶点，重复步骤(2)，直至矢量图形的多边形闭合；

(4)、填充

a1、获取链表GridRow(Y₁)，并将其设置为当前处理的链表GridRow_current；

a2、按照交点坐标X_j递增序对当前链表GridRow所含交点信息Grid(X_j)进行桶排序，交点坐标X_j相同的交点信息Grid(X_j)进行合并，合并的规则是将截距K相加，参考面积A相加；

a3、排序后，按照交点坐标X_j递增方向，获得当前链表GridRow中第一个交点信息Grid(X_min)作为当前交点信息Grid(X_current)，将其截距K记录为截距和K′，及其参考面积A，

a4、根据当前交点信息Grid(X_current)的参考面积A、截距和K′以及选定的填充规则，计算出矢量图形的多边形内部区域占该交点像素的面积比例P；

按照反走样的区域采样策略，根据面积比例P，得到该交点像素的透明度信 息，提取当前矢量图形的颜色及背景颜色，计算出该交点像素在屏幕上需要显示的颜色进行填充；

a5、判断当前交点信息Grid(X_current)是否是当前链表GridRow中的最后一个；

如果不是，进一步判断，当前链表GridRow中下一个交点信息Grid(X_next)中的X轴坐标是否与当前链表GridRow_current中的X轴坐标相邻，如果是相邻，则转到步骤a52，如果不相邻，则进行步骤a51；

a51、截距和K′是否为0，如果为0，则当前交点像素至下个交点像素之间的区域为矢量图形多边形的外部区域，不需要进行填充；截距和K′不为0，则根据选定的填充规则，计算出矢量图形的多边形内部区域占该交点像素的面积S″，若此时面积S″为0，则此区域为多边形外部区域，不需要进行填充，反之为内部区域，根据当前矢量图形的颜色进行填充；

a52、将当前链表GridRow中下一个交点信息Grid(X_next)的截距K与截距和K′相加，返回步骤a4；

如果是，则进一步判断当前链表GridRow是否是最后一个链表GridRow(Y_M)，如果不是最后一个链表GridRow(Y_M)，则将按照Y坐标顺序递增的下一个链表GridRow(Y_next)设置为当前链表GridRow_current，返回步骤a2；如果是最后一个链表GridRow(Y_M)，则矢量图形填充完毕。

2.根据权利要求1所述的适用于移动终端的矢量图形填充方法，其特征在于，步骤(2)中从当前顶点开始到下一个顶点按照线段绘制方式得到一条多边形的边，然后获取该条边与各像素点相交的交点信息Grid(X_j)，将获得的交点信息Grid(X_j)按交点像素在Y轴上的坐标Y_i的依次存入链表GridRow(Y_i)中为：

2.1)、找到当前顶点的Y坐标Y_i所对应的链表GridRow(Y_i)，计算该条边与当前扫描线的交点，得到交点信息，放入对应的链表GridRow(Y_i)中；

2.2)、将Y坐标向该条边终点方向增加1个像素点，计算该条边与新的扫描线的交点，得到新的交点信息，放入对应的链表GridRow(Y_i+1)或GridRow(Y_i-1)中，重复此步骤，直至达到该条边的终点。

3.根据权利要求1所述的适用于移动终端的矢量图形填充方法，其特征在于，a4步骤选定的填充规则为奇偶填充规则，即even odd填充规则，矢量图形的多边形内部区域占该交点像素的面积比例P根据以下公式计算得出： 

上式中，W_P为像素宽度，矢量图形的多边形内部区域占该交点像素的面积S″：

S′＝|S|mod(2W_p ²)；

S＝K′×W_p-A。

4.根据权利要求1所述的适用于移动终端的矢量图形填充方法，其特征在于，a4步骤选定的填充规则为非零填充规则，即nonzero填充规则，矢量图形的多边形内部区域占该交点像素的面积比例P根据以下公式计算得出：

上式中，W_P为像素宽度，矢量图形的多边形内部区域占该交点像素的面积S″：

S＝K′×W_p-A。 

Images