一种支持多表现形式的统一Web图形绘制系统

摘要

本发明公开了一种支持多表现形式的统一Web图形绘制系统，包括：客户操作端以及线上服务端，所述客户操作包含客户输入模块、数据模型上传模块、数据模型下载模块和Web图形显示模块，线上服务端包含数据模型接收模块、信息服务传送模块、辨别读取模块、绘图信息数据库、画板模型数据库和向量图形生成模块。该支持多表现形式的统一Web图形绘制系统，可在进行Web图形绘制时进行线上线下的配合使用，通过线上绘图信息数据库和画板模型数据库进行不同表现形式的Web绘制图形转换，以便于进行不同绘制技术手段的配合绘制，方便不同技术手段绘制Web图形的升级维护，转换为统一的表达形式可以有效降低开发绘制的难度和成本。

说明书

技术领域

本发明涉及Web图形绘制相关技术领域，具体为一种支持多表现形式的统一Web图形绘制系统。

背景技术

Web图形相较于普通绘图较为复杂，其不仅包括普通的平面静态图形，Web图形通常还涵盖了一些3d图形和一些空间场景的切换图形等，普通的Web图形配以文字网页很多时候已经无法满足使用者的需求，Web图形绘制的更多动态图片等可以有效提高网页的丰富度。

而在进行Web图形的绘制时，不仅是绘制图形需求的2d平面图和各种3d图形的种类不同，绘制不同种类图形的技术软件使用也有所不同，如常见的html5和WebGL还有各类其他绘制软件辅助技术手段多种多样，不同的技术种类手段深入掌握的难度较高，技术间差别较大且更新换代速度快，不同技术手段绘制图形表现形式不统一，导致在进行Web图形绘制时不同绘图技术和工具不便于进行配合开发绘制，已绘制Web图形更换不同软件进行绘制时较为困难。

针对上述问题，在原有Web图形绘制系统的基础上进行创新设计。

发明内容

本发明的目的在于提供一种支持多表现形式的统一Web图形绘制系统，以解决上述背景技术中提出Web图形绘制不同技术软件间表现形式不统一，不便于直接在绘制端进行协调，不利于Web图形的多样化绘制和图形调整的问题。

为实现上述目的，本发明提供如下技术方案：一种支持多表现形式的统一Web图形绘制系统，包括：客户操作端以及线上服务端，所述客户操作包含客户输入模块、数据模型上传模块、数据模型下载模块和Web图形显示模块，线上服务端包含数据模型接收模块、信息服务传送模块、辨别读取模块、绘图信息数据库、画板模型数据库和向量图形生成模块；

首先，客户输入模块使用适配技术软件进行绘图操作输入或进行绘制模型的输入，Web图形显示模块显示绘制图形；

然后，数据模型上传模块传送模型数据或绘制操作数据至线上服务端；

之后，当线上服务端的数据模型接收模块接收到绘制操作数据或数据模型接收模块接收到模型数据时，通过辨别读取模块辨别不同绘图技术手段类型，自绘图信息数据库和画板模型数据库中读取对应数据；

接着，向量图形生成模块依据所需技术类型转换生成向量图形；

然后，信息服务传送模块传送向量图形至客户操作端；

最后，客户端Web图形显示模块显示转换表现形式的Web图形。

优选的，所述客户端中的客户输入模块用于输入外部绘图数据，以及输入向量图形模型数据，数据模型上传模块和数据模型下载模块分别用于原绘图数据上传和下载云端转换表现形式的绘图数据，Web图形显示模块是用于直接显示向量图形。

优选的，所述线上服务端的数据模型接收模块用于实时感知与客户操作端具有映射关系的Web画板的绘图信息的变化，并将感应到的变化信息通过辨别读取模块实时反映到与映射关系对应的绘图信息数据库以及画板模型数据库。

优选的，所述辨别读取模块用于控制客户操作端对线上服务端绘图信息数据库和画板模型数据库的绘图数据模型资源获取范围及操作权限，与绘图信息数据库和画板模型数据库具有相同映射关系的客户操作端分别获取对应线上服务端中所具有的绘图数据模型的相应模型数据。

优选的，所述线上服务端绘图信息数据库和画板模型数据库支持技术类型至少包括SVG、VML、html5、canvas和WebGL，且均与辨别读取模块映射管理对应。

优选的，所述绘图信息数据库内的绘图操作对应包括画板新建和删除、点和线的绘制、重绘和擦除，画板模型数据库包括点数据模型、线数据模型、样式数据模型，用以提供标准的绘图接口，以完整描述一副独立图形的基本信息。

优选的，所述点数据模型包括点的唯一标识、关联样式、位置信息和描述信息，可完整描述图形中实体元素的基本结构，线数据模型包括线的唯一标识、关联样式、起始点、结束点和描述信息，可描述实体元素间的连接关系，样式数据模型包括唯一标识、关联图标、颜色和节点，对图形中具体绘图元素的表现进行描述。

优选的，所述线上服务端的信息服务传送模块用于接收客户操作端上传的数据模型和发送转换技术表现形式的模型数据下发，且线上服务端和客户操作端之间通过信息服务传送模块构成多通路信息传递，传送转换向量图形至客户操作端。

与现有技术相比，本发明的有益效果是：该支持多表现形式的统一Web图形绘制系统，

1、通过客户操作端和线上服务端的配合，直接对单某一形式的Web图形绘制进行云端同步处理转换，调整为不同技术手段的表现形式同步进行不同技术手段软件的配合开发绘制，使得绘制过程中的图形可以实时通过云端转换为客户端所需的统一显现形式，从而便于Web图形的多样化绘制，转换为统一表现形式后有效提高整体网页内容的丰富度；

2、线上服务端的绘图信息数据库和画板模型数据库包括SVG、VML、html5、canvas和WebGL等不同形式软件的画板操作和数据模型，除了进行实时转换绘制操作的数据模型外，还可以对绘制的现有Web图形进行表达形式的统一转化，以便于利用不同的技术手段进行一定的升级维护，绘制人员只需本地端现有的绘制方式即可进行灵活重绘，降低Web绘图的掌握开发难度，节约绘制成本。

附图说明

图1为本发明系统结构框图；

图2为本发明实施例1处理流程示意图；

图3为本实用实施例2处理流程示意图；

图4为本实用绘图信息数据库和画板模型数据库示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1

请参阅图1-2和图4，本发明提供一种技术方案：一种支持多表现形式的统一Web图形绘制系统，包括：客户操作端以及线上服务端，客户操作包含客户输入模块、数据模型上传模块、数据模型下载模块和Web图形显示模块，线上服务端包含数据模型接收模块、信息服务传送模块、辨别读取模块、绘图信息数据库、画板模型数据库和向量图形生成模块；

首先，客户输入模块使用适配技术软件，如html5软件进行绘图操作输入，Web图形显示模块显示绘制图形；

然后，数据模型上传模块同步传送绘制操作数据至线上服务端；

之后，当线上服务端的数据模型接收模块接收到绘制操作数据时，通过辨别读取模块辨别不同绘图技术手段类型，自数据库中读取对应html5数据和所需转换的技术类型如WebGL的绘图信息数据和画板模型数据；

接着，向量图形生成模块依据所需的WebGL技术类型，转换生成相应的向量图形；

然后，信息服务传送模块传送向量图形至客户操作端；

最后，客户端Web图形显示模块显示转换表现形式的Web图形。

客户端中的客户输入模块用于输入外部绘图数据，以及输入向量图形模型数据，数据模型上传模块和数据模型下载模块分别用于原绘图数据上传和下载云端转换表现形式的绘图数据，Web图形显示模块是用于直接显示向量图形。

线上服务端的数据模型接收模块用于实时感知与客户操作端具有映射关系的Web画板的绘图信息的变化，并将感应到的变化信息通过辨别读取模块实时反映到与映射关系对应的绘图信息数据库以及画板模型数据库。

辨别读取模块用于控制客户操作端对线上服务端绘图信息数据库和画板模型数据库的绘图数据模型资源获取范围及操作权限，与绘图信息数据库和画板模型数据库具有相同映射关系的客户操作端分别获取对应线上服务端中所具有的绘图数据模型的相应模型数据。

线上服务端绘图信息数据库和画板模型数据库支持技术类型至少包括SVG、VML、html5、canvas和WebGL，且均与辨别读取模块映射管理对应。

绘图信息数据库内的绘图操作对应包括画板新建和删除、点和线的绘制、重绘和擦除，画板模型数据库包括点数据模型、线数据模型、样式数据模型，用以提供标准的绘图接口，以完整描述一副独立图形的基本信息。

点数据模型包括点的唯一标识、关联样式、位置信息和描述信息，可完整描述图形中实体元素的基本结构，线数据模型包括线的唯一标识、关联样式、起始点、结束点和描述信息，可描述实体元素间的连接关系，样式数据模型包括唯一标识、关联图标、颜色和节点，对图形中具体绘图元素的表现进行描述。

线上服务端的信息服务传送模块用于接收客户操作端上传的数据模型和发送转换技术表现形式的模型数据下发，且线上服务端和客户操作端之间通过信息服务传送模块构成多通路信息传递，传送转换向量图形至客户操作端。

实施例2

请参阅图1和图3-4，本发明提供一种技术方案：一种支持多表现形式的统一Web图形绘制系统，包括：客户操作端以及线上服务端，客户操作包含客户输入模块、数据模型上传模块、数据模型下载模块和Web图形显示模块，线上服务端包含数据模型接收模块、信息服务传送模块、辨别读取模块、绘图信息数据库、画板模型数据库和向量图形生成模块；

首先，客户输入模块可将html5技术软件进行绘制的Web图形模型进行直接输入，Web图形显示模块显示Web图形模型；

然后，数据模型上传模块传送模型数据至线上服务端；

之后，当线上服务端的数据模型接收模块接收到模型数据时，通过辨别读取模块辨别不同绘图技术手段类型，自数据库中读取对应html5数据和所需转换的技术类型如WebGL的绘图信息数据和画板模型数据；

接着，向量图形生成模块依据所需的WebGL技术类型，转换生成相应的向量图形；

然后，信息服务传送模块传送向量图形至客户操作端；

最后，客户端Web图形显示模块显示转换表现形式的Web图形。

客户端中的客户输入模块用于输入外部绘图数据，以及输入向量图形模型数据，数据模型上传模块和数据模型下载模块分别用于原绘图数据上传和下载云端转换表现形式的绘图数据，Web图形显示模块是用于直接显示向量图形。

线上服务端的数据模型接收模块用于实时感知与客户操作端具有映射关系的Web画板的绘图信息的变化，并将感应到的变化信息通过辨别读取模块实时反映到与映射关系对应的绘图信息数据库以及画板模型数据库。

辨别读取模块用于控制客户操作端对线上服务端绘图信息数据库和画板模型数据库的绘图数据模型资源获取范围及操作权限，与绘图信息数据库和画板模型数据库具有相同映射关系的客户操作端分别获取对应线上服务端中所具有的绘图数据模型的相应模型数据。

线上服务端绘图信息数据库和画板模型数据库支持技术类型至少包括SVG、VML、html5、canvas和WebGL，且均与辨别读取模块映射管理对应。

绘图信息数据库内的绘图操作对应包括画板新建和删除、点和线的绘制、重绘和擦除，画板模型数据库包括点数据模型、线数据模型、样式数据模型，用以提供标准的绘图接口，以完整描述一副独立图形的基本信息。

点数据模型包括点的唯一标识、关联样式、位置信息和描述信息，可完整描述图形中实体元素的基本结构，线数据模型包括线的唯一标识、关联样式、起始点、结束点和描述信息，可描述实体元素间的连接关系，样式数据模型包括唯一标识、关联图标、颜色和节点，对图形中具体绘图元素的表现进行描述。

线上服务端的信息服务传送模块用于接收客户操作端上传的数据模型和发送转换技术表现形式的模型数据下发，且线上服务端和客户操作端之间通过信息服务传送模块构成多通路信息传递，传送转换向量图形至客户操作端。

本说明书中未作详细描述的内容属于本领域专业技术人员公知的现有技术，尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。