本申请提供的三维网页图形绘制方法及装置，读取图形元素属性及坐标值及尺寸，判断图形元素属性中是否有三维渲染属性参数，若是，则根据预设的坐标值及尺寸计算所述图形元素在左视帧渲染位及右视帧渲染位，在左视帧渲染位和右视帧渲染位分别对所述图形元素进行渲染，得到三维网页图形。若判断出所述图形元素的属性中不携带三维渲染属性参数，则根据所述预设的坐标值及尺寸在屏幕上绘制所述图形元素。通过本申请方法，可以对网页中的图形元素进行三维绘制。更重要的是，不仅可以对矩形等常用图形进行三维绘制，对于同时带有三维效果的元素和二维效果的元素这些更复杂的网页图案也可进行绘制，适用范围广，满足多种终端设备的显示需求。
【技术实现步骤摘要】
本申请涉及一种三维网页图形绘制方法及装置。
技术介绍
伸缩矢量图（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为专利技术实施例的另一种装置结构示意图。【具体实施方式】 下面通过【具体实施方式】结合附图对本专利技术作进一步详细说明。 在本申请实施例中，提供一种三维网页图形绘制方法及装置，对网页中的图形元 素进行三维绘制，满足多种终端设备的显示需求。 实施例一： 请参考图1，图1为本专利技术实施例一的方法流程图。如图1所示，一种三维网页图 形绘制方法，可以包括以下步骤： 101、读取图形元素的属性以及预设的坐标值及尺寸。 在需要将某个图形元素设置为带三维立体效果时，需要修改矩形、圆形、椭圆、折 线形、多边形等常用可伸缩矢量图（SVG)图形元素的属性。具体地，是向图形元素的属性中 添加三维渲染属性参数，优选的，还可以为图形元素的厚度和深度进行预先设置，具体地， 可以预先向图形元素的属性参数中添加预设的厚度值以及预设的深度值。添加的三维渲染 属性参数及预设的厚度值以及预设的深度值如表1所示。可以理解的是，SVG支持2D绘制， 在不需要将图像元素绘制为带三维效果时，按照现有方法进行绘制即可。值得指出的是，在 建立带有三维立体效果的图形时，一些网页图案往往较为复杂，需要多个图形元素结合才 能得到设计人员设想的效果，某些时候需要将其中一些图形元素绘制为三维效果，另一些 则绘制为二维效果，再将多个图形元素绘制效果叠加才能得到最终的设计图案。下面对图 形元素的二维及三维效果的属性进行举例介绍： 例如，表示一个顶点坐标为（10,20)，宽度为40,高度为30的矩形，传统的二维矩 形的编写方式如下： 〈rect X = "10"当前第1页1 2 本文档来自技高网...
【技术保护点】
一种三维网页图形绘制方法，其特征在于，包括：读取图形元素的属性以及预设的坐标值及尺寸；判断所述图形元素的属性中是否携带三维渲染属性参数，所述三维渲染属性用于表示将当前的元素图形绘制为立体图形；若判断出所述图形元素的属性中是携带三维渲染属性参数，则执行第一绘制流程：根据所述预设的坐标值及尺寸计算所述图形元素在左视帧渲染位及右视帧渲染位；在所述左视帧渲染位和所述右视帧渲染位分别对所述图形元素进行渲染，得到三维网页图形；若判断出所述图形元素的属性中不携带三维渲染属性参数，则执行第二绘制流程：根据所述预设的坐标值及尺寸在屏幕上绘制所述图形元素。
【技术特征摘要】
【专利技术属性】
技术研发人员：王文敏，刘中欣，王荣刚，李革，董胜富，王振宇，李英，高文，
申请(专利权)人：北京大学深圳研究生院，
类型：发明
国别省市：广东;44
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。