[发明专利]一种三维网页图形绘制方法及装置

说明书

技术领域

本申请涉及一种三维网页图形绘制方法及装置。

背景技术

伸缩矢量图(SVG)是万维网联盟(W3C)开发的一套Web页面图形内容标准，可以用来开发二维(2D)图形。它是一种在语法上与XML标签语言类似的Web页面语言。SVG既能够用来描述静态矢量图形，也能够描述动态图形，支持实时渲染并具有较高的质量。SVG图形能够帮助用户很简洁地描述圆形、椭圆形、矩形、多边形等常用基本图形。

作为一种描述2D图形的简便的方法，SVG标准并没有提出关于绘制三维(3D)模式图形的方法。针对这个问题，已有一些尝试性的解决方案。其中大多数是通过投影的方式，将三维空间中的物体投影到2D平面上，通过这种方式来模拟其原始的三维空间中的形态。通过这种方式，二维平面上的SVG图形可以近似地表示诸如立方体等三维物体。另一种常用方式是基于插值方法，即选择两个相同或不同的二维SVG图形作为前景图形与背景图形，在两者之间插入一些辅助图形，从而实现由某一个位置或者尺寸向另一个位置或者尺寸的平滑过渡，并用较靠前的图像覆盖较靠后的图像的一部分，依次累加得到近似的3D SVG图形。

上述方法都只能适用于单目3D SVG图形的显示，而无法应用在显示器上。随着双目立体显示器的普及，设计并实现能够同时支持左右两个视帧的双目立体3D图形，并在此基础上构建复杂的双目3D可伸缩矢量图形，以满足多种终端设备的显示需求，这一工作的重要性日益凸显。

发明内容

本申请提供一种三维网页图形绘制方法及装置，可以对网页中的图形元素进行三维绘制。

根据本申请的第一方面，本申请提供一种三维网页图形绘制方法，包括：读取图形元素的属性以及预设的坐标值及尺寸；判断所述图形元素的属性中是否携带三维渲染属性参数，所述三维渲染属性用于表示将当前的元素图形绘制为立体图形；若判断出所述图形元素的属性中是携带三维渲染属性参数，则执行第一绘制流程：根据所述预设的坐标值及尺寸计算所述图形元素在左视帧渲染位及右视帧渲染位；在所述左视帧渲染位和所述右视帧渲染位分别对所述图形元素进行渲染，得到三维网页图形；若判断出所述图形元素的属性中不携带三维渲染属性参数，则执行第二绘制流程：根据所述预设的坐标值及尺寸在屏幕上绘制所述图形元素。

根据本申请的第二方面，本申请提供一种三维网页图形绘制装置，包括：读取单元，用于读取图形元素的属性以及预设的坐标值及尺寸；判断单元，用于判断所述图形元素的属性中是否携带三维渲染属性参数，所述三维渲染参数用于表示将当前的元素图形绘制为立体图形；第一绘制单元，包括：计算单元以及渲染单元；计算单元，用于在所述判断单元判断出所述图形元素的属性中是携带三维渲染属性参数，则根据所述预设的坐标值及尺寸计算所述图形元素在左视帧渲染位及右视帧渲染位；渲染单元，用于在所述计算单元计算出的所述左视帧渲染位和所述右视帧渲染位分别对所述图形元素进行渲染，得到三维网页图形；第二绘制单元，用于在所述判断单元判断出所述图形元素的属性中不携带三维渲染属性参数，则根据所述预设的坐标值及尺寸在屏幕上绘制所述图形元素。

本申请提供的三维网页图形绘制方法及装置，用于读取图形元素属性及坐标值及尺寸，判断图形元素属性中是否有三维渲染属性参数，若是，则根据预设的坐标值及尺寸计算所述图形元素在左视帧渲染位及右视帧渲染位，在左视帧渲染位和右视帧渲染位分别对所述图形元素进行渲染，得到三维网页图形。若判断出所述图形元素的属性中不携带三维渲染属性参数，则根据所述预设的坐标值及尺寸在屏幕上绘制所述图形元素。通过本申请方法，可以对网页中的图形元素进行三维绘制。更重要的是，不仅可以对矩形等常用图形进行三维绘制，对于同时带有三维效果的元素和二维效果的元素这些更复杂的网页图案也可进行绘制，适用范围广，满足多种终端设备的显示需求。

附图说明

图1为本发明实施例的方法流程图；

图2为本发明实施例的另一种方法流程图；

图3为利用本实施例方法将单个矩形元素绘制成立体矩形的效果图；

图4为利用本实施例方法将多个图形元素绘制成立体矩形的效果图；

图5为发明实施例的装置结构示意图；

图6为发明实施例的另一种装置结构示意图。

具体实施方式

下面通过具体实施方式结合附图对本发明作进一步详细说明。

在本申请实施例中，提供一种三维网页图形绘制方法及装置，对网页中的图形元素进行三维绘制，满足多种终端设备的显示需求。

实施例一：