CN105094753A - 一种线框图的绘制方法、装置和系统 - Google Patents

Abstract

本发明实施例提供了一种线框图的绘制方法、装置和系统，所述的方法包括：在浏览器侧向服务器侧发送线框图页面的加载请求；接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；对所述线框图页面数据进行渲染处理，获得线框图页面；接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条。本发明实施例展现给用户的不是一个静态的图片，而是一个由HMTL元素组成的图片，触发线框图的元素可以展开查看具体的内容，并且线框图中的文字可以支持复制，同时在文字可以添加链接，大大提高了扩展性。

Description

一种线框图的绘制方法、装置和系统

技术领域

本申请涉及图像处理的技术领域，特别是涉及一种线框图的绘制方法、一种线框图的绘制装置和一种线框图的绘制系统。

背景技术

在整个社会环境中，存在千差万别的系统，尽管每个系统的属性不尽相同，但是各个系统间又存在着相互影响而又相互合作的关系，经常是不同单位间相互配合与协作、部门间协调关系以完整一项庞大工作。

例如，在应用程序开发、测试的过程中，不同的工作人员经常需要画系统交互图、数据库关系及模型图等以进行交流。

一般，用户可以通过在不同的设备上部署专门的客户端进行画图，画好后保存成图片让更多用户查看。

但是开发、维护专门的客户端成本很高；而图片完成之后，只能保存成功为一个静态图片展示给其他用户，扩展性很低；如果需要修改图片上的内容，首先需要打开图片的原始文件，然后再擦去原始的笔画再增加新的笔画，步骤较复杂，操作十分不方便。

因此，目前需要本领域技术人员迫切解决的一个技术问题就是：提出支持多人协同的线框图的绘制机制，降低成本低，提高扩展性，提高操作简便性。

发明内容

本申请实施例所要解决的技术问题是提供一种线框图的绘制方法，降低成本低，提高扩展性，提高操作简便性。

相应的，本申请实施例还提供了一种线框图的绘制装置以及一种线框图的绘制系统，用以保证上述方法的实现及应用。

为了解决上述问题，本申请实施例公开了一种线框图的绘制方法，包括：

在浏览器侧向服务器侧发送线框图页面的加载请求；所述加载请求中包括线框图标识；

接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；

对所述线框图页面数据进行渲染处理，获得线框图页面；

接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；

在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条。

优选地，所述线框包括线框标识，所述线条包括线条标识，所述的方法还包括：

生成线框记录和/或线条记录；所述线框记录为所述线框信息与所述线框标识的对应关系，所述线条记录为所述线条信息与所述线条标识的对应关系；

将所述线框记录和/或所述线条记录发送至所述服务器侧；所述服务器侧用于保存所述线框记录和/或所述线条记录，与所述线框图标识的对应关系。

优选地，所述线框图标识为首次绘制线框图时，在浏览器侧向服务器侧发送线框图的绘制请求接收服务器侧返回的，依据所述绘制请求分配的网页标识中包括的线框图标识。

优选地，当首次绘制线框图时，所述线框图页面数据包括空白的线框图；所述对所述线框图页面数据进行渲染处理，获得线框图页面的步骤包括：

在浏览器窗口中生成新的网页，获得空白的线框图页面。

优选地，当非首次绘制线框图时，所述线框图页面数据包括线框记录和/或线条记录。

优选地，所述对所述线框图页面数据进行渲染处理，获得线框图页面的步骤包括：

在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框，获得线框图页面；

或者，

在浏览器窗口中生成新的网页，在所述网页上按照所述线条记录渲染线条，获得线框图页面；

或者，

在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框，按照所述线条记录渲染线条，获得线框图页面。

优选地，所述线框图页面数据包括的线框记录和/或线条记录为，在先当前浏览器侧或者其他浏览器侧绘制线框和/或线条时，生成的所述线框和/或所述线条对应的线框记录和/或线条记录。

优选地，所述线框图页面绘制线框和/或线条的绘制指令包括以下的至少一种：

新增线框和/或线条的操作指令、编辑已有的线框和/或线条的操作指令。

优选地，所述线框信息包括以下的至少一种：

位置信息、大小信息、颜色信息、内容信息。

优选地，所述线条信息包括以下的至少一种：

粗细信息、方向信息、颜色信息、起点信息、终点信息。

优选地，所述起点信息包括起点类型及对应的起点位置，所述终点信息包括终点类型及对应的终点位置；

其中，当线条的起点为线框中的像素点时，所述起点类型为线框类型，所述起点位置为所述起点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为线框中的像素点时，所述终点类型为线框类型，所述终点位置为所述终点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为非线框中的像素点时，所述终点类型为坐标类型，所述终点位置为所述终点的坐标。

本申请实施例还公开了一种线框图的绘制装置，包括：

加载请求发送模块，用于在浏览器侧向服务器侧发送线框图页面的加载请求；所述加载请求中包括线框图标识；

线框图页面数据接收模块，用于接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；

线框图页面获得模块，用于对所述线框图页面数据进行渲染处理，获得线框图页面；

绘制指令接收模块，用于接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；

线框图绘制模块，用于在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条。

优选地，所述线框包括线框标识，所述线条包括线条标识，所述的装置还包括：

记录生成模块，用于生成线框记录和/或线条记录；所述线框记录为所述线框信息与所述线框标识的对应关系，所述线条记录为所述线条信息与所述线条标识的对应关系；

记录发送模块，用于将所述线框记录和/或所述线条记录发送至所述服务器侧；所述服务器侧用于保存所述线框记录和/或所述线条记录，与所述线框图标识的对应关系。

优选地，所述线框图标识为首次绘制线框图时，在浏览器侧向服务器侧发送线框图的绘制请求，接收服务器侧返回的，依据所述绘制请求分配的网页标识中包括的线框图标识。

优选地，当首次绘制线框图时，所述线框图页面数据包括空白的线框图；所述线框图页面获得模块包括：

生成子模块，用于在浏览器窗口中生成新的网页，获得空白的线框图页面。

优选地，当非首次绘制线框图时，所述线框图页面数据包括线框记录和/或线条记录。

优选地，所述线框图页面获得模块包括：

第一渲染子模块，用于在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框，获得线框图页面；

或者，

第二渲染子模块，用于在浏览器窗口中生成新的网页，在所述网页上按照所述线条记录渲染线条，获得线框图页面；

或者，

第三渲染子模块，用于在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框；

第四渲染子模块，用于按照所述线条记录渲染线条，获得线框图页面。

优选地，所述线框图页面数据包括的线框记录和/或线条记录为，在先当前浏览器侧或者其他浏览器侧绘制线框和/或线条时，生成的所述线框和/或所述线条对应的线框记录和/或线条记录。

优选地，所述线框图页面绘制线框和/或线条的绘制指令包括以下的至少一种：

新增线框和/或线条的操作指令、编辑已有的线框和/或线条的操作指令。

优选地，所述线框信息包括以下的至少一种：

位置信息、大小信息、颜色信息、内容信息。

优选地，所述线条信息包括以下的至少一种：

粗细信息、方向信息、颜色信息、起点信息、终点信息。

优选地，所述起点信息包括起点类型及对应的起点位置，所述终点信息包括终点类型及对应的终点位置；

其中，当线条的起点为线框中的像素点时，所述起点类型为线框类型，所述起点位置为所述起点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为线框中的像素点时，所述终点类型为线框类型，所述终点位置为所述终点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为非线框中的像素点时，所述终点类型为坐标类型，所述终点位置为所述终点的坐标。

本申请实施例还公开了一种线框图的绘制系统，包括浏览器和服务器；

其中，所述浏览器包括：

加载请求发送模块，用于在浏览器侧向服务器侧发送线框图页面的加载请求；所述加载请求中包括线框图标识；

线框图页面数据接收模块，用于接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；

线框图页面获得模块，用于对所述线框图页面数据进行渲染处理，获得线框图页面；

绘制指令接收模块，用于接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；

线框图绘制模块，用于在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条；

所述服务器包括：

加载请求接收模块，用于接收在浏览器侧发送的线框图页面的加载请求；

线框图页面数据查找模块，用于依据所述加载请求查找所述线框图标识对应的线框图页面数据；

线框图页面数据发送模块，用于向所述浏览器侧发送所述线框图页面数据。

优选地，所述线框包括线框标识，所述线条包括线条标识；

所述的浏览器还包括：

记录生成模块，用于生成线框记录和/或线条记录；所述线框记录为所述线框信息与所述线框标识的对应关系，所述线条记录为所述线条信息与所述线条标识的对应关系；

记录发送模块，用于将所述线框记录和/或所述线条记录发送至所述服务器侧；

所述的服务器还包括：

记录接收模块，用于接收所述浏览器侧发送的所述线框记录和/或所述线条记录；

记录保存模块，用于保存所述线框记录和/或所述线条记录，与所述线框图标识的对应关系。

与背景技术相比，本申请实施例包括以下优点：

本申请实施例在浏览器侧向服务器请求加载线框图页面，对服务器返回的线框图页面数据进行渲染，获得线框图页面，按照线框和/或线条的绘制指令中的线框信息和/或线条信息绘制出线框和/或线条，而浏览器是最常用的客户端程序之一，已广泛普及，采用已有的浏览器可供多人协助绘制线框图，一物多用，避免了单独部署一套全新的客户端，极大的降低了成本。

本申请实施例展现给用户的不是一个静态的图片，而静态的图片上的文字是不能支持复制的，同时也不能在图片上提供去其他页面的链接，而线框图是一个由HMTL元素组成的图片，触发线框图的元素可以展开查看具体的内容，并且线框图中的文字可以支持复制，同时对文字可以添加链接，大大提高了扩展性。

本申请实施例可在已画好的线框图当前页面直接切换成编辑状态进行绘制，例如新增、删除、修改、拖动、缩放已有的线框和/或线条，避免修改原始文件，步骤简单，提高了操作的简便性。

附图说明

图1是本申请的一种线框图的绘制方法实施例1的步骤流程图；

图2是本申请的一种线框图的显示示例图；

图3是本申请的一种线框图的绘制示例图；

图4是本申请的一种线框图的绘制方法实施例2的步骤流程图；

图5是本申请的一种线框图的绘制装置实施例1的结构框图；

图6是本申请的一种线框图的绘制装置实施例2的结构框图；

图7是本申请的一种线框图的绘制系统实施例1的结构框图；

图8是本申请的一种线框图的绘制系统实施例2的结构框图。

具体实施方式

为使本申请的上述目的、特征和优点能够更加明显易懂，下面结合附图和具体实施方式对本申请作进一步详细的说明。

参照图1，示出了本申请的一种线框图的绘制实施例1的步骤流程图，可以包括如下步骤：

步骤101，在浏览器侧向服务器侧发送线框图页面的加载请求；所述加载请求中可以包括线框图标识；

浏览器是指可以显示网页服务器或者文件系统的HTML（HyperTextMarkupLanguage，超文本标记语言）文本，并让用户与这些文件交互的一种应用程序。浏览器主要通过HTTP（Hypertexttransferprotocol，超文本传送协议）协议与网页服务器交互并获取网页，这些网页由网页标识指定，文件格式通常为HTML，并由MIME（MultipurposeInternetMailExtensions，多用途互联网邮件扩展）在HTTP协议中指明。一个网页中可以包括多个文档，每个文档都是分别从服务器获取的。

许多浏览器可以支持除了HTML之外的广泛的格式，例如JPEG、PNG、GIF等图像格式，并且能够扩展支持众多的插件（plug-ins）。另外，许多浏览器还可以支持其他的URL类型及其相应的协议，如FTP（FileTransferProtocol，文件传输协议）、Gopher、HTTPS（HTTP协议的加密版本）。

HTTP内容类型和URL协议规范允许网页设计者在网页中嵌入图像、动画、视频、声音、流媒体等。

需要说明的是，线框图可以为包括线条和/或线框的图像，线框图页面可以为加载有线框图的网页。

线框图页面的加载请求可以是指用户发出的加载某个线框图页面的指示。例如，用户可以通过点击某链接来打开一个线框图页面，或者在地址栏输入网址来打开一个线框图页面等等。当用户点击某链接的指示时，就相当于接收到了用户加载线框图页面的加载请求；同样，当在地址栏输入某网址并点击确定按钮或按下回车键时，也相当于接收到了用户加载线框图页面的加载请求。

当前网页的第一加载请求可以是指用户发出的加载某个网页的指示。例如，用户可以通过点击某链接来打开一个网页，或者在地址栏输入网址来打开一个网页等等。当用户点击某链接的指示时，就相当于接收到了用户加载网页的加载请求；同样，当在地址栏输入某网址并点击确定按钮或按下回车键时，也相当于接收到了用户加载网页的加载请求。

其中，加载请求的内容可以包括用户请求加载的线框图页面的网页标识。网页标识可以为能够代表一个唯一确定的网页的信息，例如统一资源标识符（UniformResourceIdentifier，URI），统一资源标识符又具体可以包括统一资源定位符（UniformResourceLocator，URL），或者统一资源名称（UniformResourceName，URN）等等。

而在该网页标识中可以包括用户请求加载的线框图的线框图标识。线框图标识可以为能够代表一个唯一确定的线框图的信息，例如名称、ID（Identity，身份标识号码）等等。

在具体实现中，所述线框图标识可以为首次绘制线框图时，在浏览器侧向服务器侧发送线框图的绘制请求，接收服务器侧返回的，依据所述绘制请求分配的网页标识中包括的线框图标识。

在首次绘制线框图时，服务器可以向浏览器分配一个特定的网页标识，该网页标识中可以包括一个特定的线框图标识。

例如，服务器分配的网页标识为http://xxx.com/pic.htm?pageId=228，其中，线框图标识pageId为228。

步骤102，接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；

在本申请实施例中，服务器中可以在网页数据库中保存有线框图页面数据以及线框图标识与线框图页面数据的对应关系。

服务器可以接收在浏览器侧发送的线框图页面的加载请求，依据所述加载请求查找所述线框图标识对应的线框图页面数据，以及，向所述浏览器侧发送所述线框图页面数据。

当首次绘制线框图时，由于当前或者其他用户没有在先进行过绘制，则所述线框图页面数据可以包括空白的线框图，即没有线框记录和/或线条记录。

当非首次绘制线框图时，由于当前或者其他用户在先进行过绘制，则所述线框图页面数据可以包括线框记录和/或线条记录。

其中，所述线框图页面数据包括的线框记录和/或线条记录可以为，在先当前浏览器侧或者其他浏览器侧绘制线框和/或线条时，生成的所述线框和/或所述线条对应的线框记录和/或线条记录。

应用本申请实施例，用户可以在不同的浏览器对同一个线框图进行绘制，并将如何绘制线框和/或线条的信息，生成线框记录和/或线条记录，存储在服务器中。

步骤103，对所述线框图页面数据进行渲染处理，获得线框图页面；

在本申请实施例中，浏览器可以按照渲染HTML文本的规范对所述线框图页面数据进行渲染处理。

以WebKit内核的浏览器为例，线框图页面在显示的时候会有一个解析器（Parser）去解析HTML文本，然后去生成渲染树（RenderTree），最终渲染出页面。

在本申请的一种优选实施例中，步骤103可以包括如下子步骤：

子步骤S11，在浏览器窗口中生成新的网页，获得空白的线框图页面。

在本实施例中，当非首次绘制线框图时，服务器返回的线框图页面数据为空白的线框图，则在浏览器的窗口中生成的为空白的网页。

在本申请的一种优选实施例中，步骤103可以包括如下子步骤：

子步骤S12，在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框，获得线框图页面；

或者，

子步骤S13，在浏览器窗口中生成新的网页，在所述网页上按照所述线条记录渲染线条，获得线框图页面；

或者，

子步骤S14，在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框；

子步骤S15，按照所述线条记录渲染线条，获得线框图页面。

在本实施例中，当非首次绘制线框图时，服务器返回的线框图页面数据包括线框记录和/或线条记录。

当包括线框记录时，按照该线框记录中如何绘制线框的信息渲染线框。

当包括线条记录时，按照该线条记录中如何绘制线条的信息渲染线条。

当同时包括线框记录和线条记录时，由于线条的起点和终点可能依赖于线框的位置，因此可以优先按照该线框记录中如何绘制线框的信息渲染线框，再按照该线条记录中如何绘制线条的信息渲染线条。

本申请实施例展现给用户的不是一个静态的图片，而静态的图片上的文字是不能支持复制的，同时也不能在图片上提供去其他页面的链接，而线框图是一个由HMTL元素组成的图片，触发线框图的元素可以展开查看具体的内容，并且线框图中的文字可以支持复制，同时对文字可以添加链接，大大提高了扩展性。

例如，如图2所示，标识A所指示的为线框，标识F所指示的为线条。在线框A的当前界面中显示的可以为线框名称，通过鼠标点击等方式触发线框A后，弹出一个扩展界面，在该扩展界面中，如标识D所示，可以展示线框A中的详细内容。其中，如标识C所示，用户可以通过鼠标选中线框A中的文字“coupon_sprdad”，进而可以直接复制，如标识E所示，在文字“查看”中添加链接，当用户点击文字“查看”时，可以直接在浏览器窗口中打开该链接对应的网页。

需要说明的是，展示线框的内容信息的扩展界面是由JavaScript（一种基于对象和事件驱动并具有相对安全性的客户端脚本语言）来完成，扩展界面中的内容信息可以是一开始就从服务器返回并保存到浏览器，也可以在点击的时候再向服务端发起请求，具体地，可以向服务器发送该线框的线框标识，例如ID，服务器查找到该线框标识对应的内容信息，并返回浏览器，浏览器则在该扩展界面中展示服务端返回的内容信息。

步骤104，接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；

在具体实现中，在查看状态下，线框图中的元素的位置、展开查看的内容等都不可以进行编辑。但是可以在触发线框图中设置一个编辑按钮，例如图2所示的线框图的右上角的“to编辑态”按钮，通过鼠标点击等方式触发该编辑按钮，可以通过JavaScript控制切换成编辑状态，此时，如图3所示，用户可以对线框图中的元素的位置、展开查看的内容等进行编辑。

在本申请实施例的一种优选示例中，所述线框图页面绘制线框和/或线条的绘制指令可以包括以下的至少一种：

新增线框和/或线条的操作指令、编辑已有的线框和/或线条的操作指令。

其中，编辑已有的线框和/或线条的操作指令可以包括拖动已有的线框和/或线条的操作指令、删除已有的线框和/或线条的操作指令、修改已有的线框和/或线条的操作指令、缩放已有的线框和/或线条的操作指令等等。

本申请实施例可在已画好的线框图当前页面直接切换成编辑状态进行绘制，例如新增、删除、修改、拖动、缩放已有的线框和/或线条，避免修改原始文件，步骤简单，提高了操作的简便性。

线框信息和/或线条信息可以为用户指示的如何绘制线框和/或线条的信息。

在本申请实施例的一种优选示例中，所述线框信息可以包括以下的至少一种：

位置信息、大小信息、颜色信息、内容信息。

其中，位置信息可以存储线框在线框图中的位置的信息；大小信息可以存储线框的大小的信息；颜色信息可以存储线框的颜色的信息；内容信息可以存储线框的内容的信息，例如标题、在扩展界面显示的详细内容等等。

例如，线框信息的示例可以如下：

tag_info：{width:100px;height:50px;color:red;left:500px;right:200px}

Content：{coupon_sprdad}

其中，位置信息为“left:500px;right:200px”，表示线框距离线框图左侧500像素，距离线框图右侧200像素，大小信息为“width:100px;height:50px”，表示线框宽100像素，高50像素，颜色信息为“color:red”，表示线框的颜色为红色，内容信息为“Content”，表示线框的内容为“coupon_sprdad”。

在本申请实施例的一种优选示例中，所述线条信息可以包括以下的至少一种：

粗细信息、方向信息、颜色信息、起点信息、终点信息。

其中，粗细信息可以存储线条的粗细的信息；方向信息可以存储线条的从起点到终点的方向的信息，可以以箭头标识；颜色信息可以存储线条的颜色的信息；起点信息可以存储线条的起点的信息；终点信息可以存储线条终点的信息。

在本申请实施例的一种优选示例中，所述起点信息可以包括起点类型及对应的起点位置，所述终点信息包括终点类型及对应的终点位置；

其中，当线条的起点为线框中的像素点时，所述起点类型为线框类型，所述起点位置为所述起点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为线框中的像素点时，所述终点类型为线框类型，所述终点位置为所述终点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为非线框中的像素点时，所述终点类型为坐标类型，所述终点位置为所述终点的坐标。

在具体实现中，可以通过判断起点/终点的位置是否在线框区域内，例如鼠标右键点击的位置在线框区域内，如果是，则线条的起点类型/终点类型为线框类型；如果不是，则线条的起点类型/终点类型为坐标类型。

需要说明的是，当起点/终点的起点类型/终点类型为线框类型时，该起点/终点对应的线框被拖动时，由于起点/终点为线框中的像素点，则该起点/终点的位置会随着该线框的拖动而改变，即拖动线框图中的线框，与之相连的线条会随之移动。

当然，上述线框信息和/或线条信息只是作为示例，在实施本申请实施例时，可以根据实际情况设置其他线框信息和/或线条信息，本申请实施例对此不加以限制。另外，除了上述线框信息和/或线条信息外，本领域技术人员还可以根据实际需要采用其它排布方式，本申请实施例对此也不加以限制。

步骤105，在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条。

在具体实现中，可以通过前端HTML和JavaScript的方式，按照位置信息、大小信息、颜色信息、内容信息画一个线框；例如，通过鼠标点击页面上的“添加线框”按钮，鼠标可选择线框区域，选择完毕后，通过前端的JavaScript的方式自动新增一个div标签（可以用于为HTML文档内大块（block-level）的内容提供结构和背景的元素），在界面上表现为弹出一个对话框，用户输入位置信息、大小信息、颜色信息、内容信息等信息完毕保存后，对话框消失，并根据输入的信息渲染出一个线框。

可以按照粗细信息、方向信息、颜色信息、起点信息、终点信息画一个线条；例如，通过鼠标点击页面上的“添加线条”按钮，通过鼠标右键点击确定起点和终点，当检测到鼠标在终点的释放事件时，按照粗细信息、方向信息、颜色信息连接起点和终点，生成一条线条。

本申请实施例在浏览器向服务器请求加载线框图页面，对服务器返回的线框图页面数据进行渲染，获得线框图页面，按照线框和/或线条的绘制指令中的线框信息和/或线条信息绘制出线框和/或线条，而浏览器是最常用的客户端程序之一，已广泛普及，采用已有的浏览器可供多人协助绘制线框图，一物多用，避免了单独部署一套全新的客户端，极大的降低了成本。

参照图4，示出了本申请的一种线框图的绘制实施例2的步骤流程图，可以包括如下步骤：

步骤401，在浏览器侧向服务器侧发送线框图页面的加载请求；所述加载请求中包括线框图标识；

步骤402，接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；

步骤403，对所述线框图页面数据进行渲染处理，获得线框图页面；

步骤404，接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；

步骤405，在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条；

步骤406，生成线框记录和/或线条记录；所述线框记录为所述线框信息与所述线框标识的对应关系，所述线条记录为所述线条信息与所述线条标识的对应关系；

步骤407，将所述线框记录和/或所述线条记录发送至所述服务器侧；所述服务器侧用于保存所述线框记录和/或所述线条记录，与所述线框图标识的对应关系。

在具体实现中，所述线框可以包括线框标识，所述线条可以包括线条标识；线框标识可以为能够代表一个唯一确定的线框的信息，例如名称、ID等等，线条标识可以为能够代表一个唯一确定的线条的信息，例如名称、ID等等。

在本申请实施例中，绘制线框/线条完成并保存后，可以将线框信息/线条信息与线框标识/线条标识关联，生成线框记录/线条记录。

在保存绘制好的线框/线条后，可以采用ajax（AsynchronousJavaScriptAndXML）方式，即异步JavaScript及XML（eXtensibleMarkupLanguage，可扩展标记语言），异步向服务器的数据库中插入线框记录/线条记录，同时包含关联的网页标识，异步的方式可以不用去重新刷新整个页面，进一步提高了操作的简便性。

需要说明的是，对于方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本申请实施例并不受所描述的动作顺序的限制，因为依据本申请实施例，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本申请实施例所必须的。

参照图5，示出了本申请一种线框图的绘制装置实施例1的结构框图，可以包括如下模块：

加载请求发送模块501，用于在浏览器侧向服务器侧发送线框图页面的加载请求；所述加载请求中包括线框图标识；

线框图页面数据接收模块502，用于接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；

线框图页面获得模块503，用于对所述线框图页面数据进行渲染处理，获得线框图页面；

绘制指令接收模块504，用于接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；

线框图绘制模块505，用于在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条。

在本申请的一种优选实施例中，所述线框图标识可以为首次绘制线框图时，在浏览器侧向服务器侧发送线框图的绘制请求，接收服务器侧返回的，依据所述绘制请求分配的网页标识中包括的线框图标识。

在本申请的一种优选实施例中，当首次绘制线框图时，所述线框图页面数据包括空白的线框图；所述线框图页面获得模块503可以包括如下子模块：

生成子模块，用于在浏览器窗口中生成新的网页，获得空白的线框图页面。

在本申请的一种优选实施例中，当非首次绘制线框图时，所述线框图页面数据可以包括线框记录和/或线条记录。

在本申请的一种优选实施例中，所述线框图页面获得模块503可以包括如下子模块：

第一渲染子模块，用于在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框，获得线框图页面；

或者，

第二渲染子模块，用于在浏览器窗口中生成新的网页，在所述网页上按照所述线条记录渲染线条，获得线框图页面；

或者，

第三渲染子模块，用于在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框；

第四渲染子模块，用于按照所述线条记录渲染线条，获得线框图页面。

在本申请的一种优选实施例中，所述线框图页面数据包括的线框记录和/或线条记录可以为，在先当前浏览器侧或者其他浏览器侧绘制线框和/或线条时，生成的所述线框和/或所述线条对应的线框记录和/或线条记录。

在本申请实施例的一种优选示例中，所述线框图页面绘制线框和/或线条的绘制指令可以包括以下的至少一种：

新增线框和/或线条的操作指令、编辑已有的线框和/或线条的操作指令。

在本申请实施例的一种优选示例中，所述线框信息可以包括以下的至少一种：

位置信息、大小信息、颜色信息、内容信息。

在本申请实施例的一种优选示例中，所述线条信息可以包括以下的至少一种：

粗细信息、方向信息、颜色信息、起点信息、终点信息。

在本申请实施例的一种优选示例中，所述起点信息可以包括起点类型及对应的起点位置，所述终点信息可以包括终点类型及对应的终点位置；

其中，当线条的起点为线框中的像素点时，所述起点类型为线框类型，所述起点位置为所述起点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为线框中的像素点时，所述终点类型为线框类型，所述终点位置为所述终点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为非线框中的像素点时，所述终点类型为坐标类型，所述终点位置为所述终点的坐标。

参照图6，示出了本申请一种线框图的绘制装置实施例2的结构框图，可以包括如下模块：

加载请求发送模块601，用于在浏览器侧向服务器侧发送线框图页面的加载请求；所述加载请求中包括线框图标识；

线框图页面数据接收模块602，用于接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；

线框图页面获得模块603，用于对所述线框图页面数据进行渲染处理，获得线框图页面；

绘制指令接收模块604，用于接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；

线框图绘制模块605，用于在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条；

记录生成模块606，用于生成线框记录和/或线条记录；所述线框记录为所述线框信息与所述线框标识的对应关系，所述线条记录为所述线条信息与所述线条标识的对应关系；

记录发送模块607，用于将所述线框记录和/或所述线条记录发送至所述服务器侧；所述服务器侧用于保存所述线框记录和/或所述线条记录，与所述线框图标识的对应关系。

参照图7，示出了本申请一种线框图的绘制系统实施例1的结构框图，该线框图的绘制系统可以包括浏览器710和服务器720；

浏览器710可以包括如下模块：

加载请求发送模块711，用于在浏览器侧向服务器侧发送线框图页面的加载请求；所述加载请求中包括线框图标识；

线框图页面数据接收模块712，用于接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；

线框图页面获得模块713，用于对所述线框图页面数据进行渲染处理，获得线框图页面；

绘制指令接收模块714，用于接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；

线框图绘制模块715，用于在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条；

服务器720可以包括如下模块：

加载请求接收模块721，用于接收在浏览器侧发送的线框图页面的加载请求；

线框图页面数据查找模块722，用于依据所述加载请求查找所述线框图标识对应的线框图页面数据；

线框图页面数据发送模块723，用于向所述浏览器侧发送所述线框图页面数据。

在本申请的一种优选实施例中，所述线框图标识可以为首次绘制线框图时，在浏览器侧向服务器侧发送线框图的绘制请求，接收服务器侧返回的，依据所述绘制请求分配的网页标识中包括的线框图标识。

在本申请的一种优选实施例中，当首次绘制线框图时，所述线框图页面数据包括空白的线框图；所述线框图页面获得模块713可以包括如下子模块：

生成子模块，用于在浏览器窗口中生成新的网页，获得空白的线框图页面。

在本申请的一种优选实施例中，当非首次绘制线框图时，所述线框图页面数据可以包括线框记录和/或线条记录。

在本申请的一种优选实施例中，所述线框图页面获得模块713可以包括如下子模块：

第一渲染子模块，用于在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框，获得线框图页面；

或者，

第二渲染子模块，用于在浏览器窗口中生成新的网页，在所述网页上按照所述线条记录渲染线条，获得线框图页面；

或者，

第三渲染子模块，用于在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框；

第四渲染子模块，用于按照所述线条记录渲染线条，获得线框图页面。

在本申请的一种优选实施例中，所述线框图页面数据包括的线框记录和/或线条记录可以为，在先当前浏览器侧或者其他浏览器侧绘制线框和/或线条时，生成的所述线框和/或所述线条对应的线框记录和/或线条记录。

在本申请实施例的一种优选示例中，所述线框图页面绘制线框和/或线条的绘制指令可以包括以下的至少一种：

新增线框和/或线条的操作指令、编辑已有的线框和/或线条的操作指令。

在本申请实施例的一种优选示例中，所述线框信息可以包括以下的至少一种：

位置信息、大小信息、颜色信息、内容信息。

在本申请实施例的一种优选示例中，所述线条信息可以包括以下的至少一种：

粗细信息、方向信息、颜色信息、起点信息、终点信息。

在本申请实施例的一种优选示例中，所述起点信息可以包括起点类型及对应的起点位置，所述终点信息可以包括终点类型及对应的终点位置；

其中，当线条的起点为线框中的像素点时，所述起点类型为线框类型，所述起点位置为所述起点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为线框中的像素点时，所述终点类型为线框类型，所述终点位置为所述终点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为非线框中的像素点时，所述终点类型为坐标类型，所述终点位置为所述终点的坐标。

参照图8，示出了本申请一种线框图的绘制系统实施例2的结构框图，该线框图的绘制系统可以包括浏览器810和服务器820；

浏览器810可以包括如下模块：

加载请求发送模块811，用于在浏览器侧向服务器侧发送线框图页面的加载请求；所述加载请求中包括线框图标识；

线框图页面数据接收模块812，用于接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；

线框图页面获得模块813，用于对所述线框图页面数据进行渲染处理，获得线框图页面；

绘制指令接收模块814，用于接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；

线框图绘制模块815，用于在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条；

记录生成模块816，用于生成线框记录和/或线条记录；所述线框记录为所述线框信息与所述线框标识的对应关系，所述线条记录为所述线条信息与所述线条标识的对应关系；

记录发送模块817，用于将所述线框记录和/或所述线条记录发送至所述服务器侧；

服务器820可以包括如下模块：

加载请求接收模块821，用于接收在浏览器侧发送的线框图页面的加载请求；

线框图页面数据查找模块822，用于依据所述加载请求查找所述线框图标识对应的线框图页面数据；

线框图页面数据发送模块823，用于向所述浏览器侧发送所述线框图页面数据；

记录接收模块824，用于接收所述浏览器侧发送的所述线框记录和/或所述线条记录；

记录保存模块825，用于保存所述线框记录和/或所述线条记录，与所述线框图标识的对应关系。

对于装置、系统实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域内的技术人员应明白，本申请实施例的实施例可提供为方法、装置、或计算机程序产品。因此，本申请实施例可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请实施例可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

在一个典型的配置中，所述计算机设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flashRAM)。内存是计算机可读介质的示例。计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非持续性的电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

本申请实施例是参照根据本申请实施例的方法、终端设备(系统)、和计算机程序产品的流程图和／或方框图来描述的。应理解可由计算机程序指令实现流程图和／或方框图中的每一流程和／或方框、以及流程图和／或方框图中的流程和／或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理终端设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理终端设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理终端设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理终端设备上，使得在计算机或其他可编程终端设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程终端设备上执行的指令提供用于实现在流程图一个流程或多个流程和／或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请实施例的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请实施例范围的所有变更和修改。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者终端设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者终端设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者终端设备中还存在另外的相同要素。

以上对本申请所提供的一种线框图的绘制方法、一种线框图的绘制装置和一种线框图的绘制系统，进行了详细介绍，本文中应用了具体个例对本申请的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本申请的方法及其核心思想；同时，对于本领域的一般技术人员，依据本申请的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本申请的限制。

Claims (24)

1.一种线框图的绘制方法，其特征在于，包括：

在浏览器侧向服务器侧发送线框图页面的加载请求；所述加载请求中包括线框图标识；

接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；

对所述线框图页面数据进行渲染处理，获得线框图页面；

接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；

在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条。

2.根据权利要求1所述的方法，其特征在于，所述线框包括线框标识，所述线条包括线条标识，所述的方法还包括：

生成线框记录和/或线条记录；所述线框记录为所述线框信息与所述线框标识的对应关系，所述线条记录为所述线条信息与所述线条标识的对应关系；

将所述线框记录和/或所述线条记录发送至所述服务器侧；所述服务器侧用于保存所述线框记录和/或所述线条记录，与所述线框图标识的对应关系。

3.根据权利要求1或2所述的方法，其特征在于，所述线框图标识为首次绘制线框图时，在浏览器侧向服务器侧发送线框图的绘制请求接收服务器侧返回的，依据所述绘制请求分配的网页标识中包括的线框图标识。

4.根据权利要求3所述的方法，其特征在于，当首次绘制线框图时，所述线框图页面数据包括空白的线框图；所述对所述线框图页面数据进行渲染处理，获得线框图页面的步骤包括：

在浏览器窗口中生成新的网页，获得空白的线框图页面。

5.根据权利要求1或2所述的方法，其特征在于，当非首次绘制线框图时，所述线框图页面数据包括线框记录和/或线条记录。

6.根据权利要求5所述的方法，其特征在于，所述对所述线框图页面数据进行渲染处理，获得线框图页面的步骤包括：

在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框，获得线框图页面；

或者，

在浏览器窗口中生成新的网页，在所述网页上按照所述线条记录渲染线条，获得线框图页面；

或者，

在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框，按照所述线条记录渲染线条，获得线框图页面。

7.根据权利要求5所述的方法，其特征在于，所述线框图页面数据包括的线框记录和/或线条记录为，在先当前浏览器侧或者其他浏览器侧绘制线框和/或线条时，生成的所述线框和/或所述线条对应的线框记录和/或线条记录。

8.根据权利要求1或2或4或6或7所述的方法，其特征在于，所述线框图页面绘制线框和/或线条的绘制指令包括以下的至少一种：

新增线框和/或线条的操作指令、编辑已有的线框和/或线条的操作指令。

9.根据权利要求1或2或4或6或7所述的方法，其特征在于，所述线框信息包括以下的至少一种：

位置信息、大小信息、颜色信息、内容信息。

10.根据权利要求1或2或4或6或7所述的方法，其特征在于，所述线条信息包括以下的至少一种：

粗细信息、方向信息、颜色信息、起点信息、终点信息。

11.根据权利要求10所述的方法，其特征在于，所述起点信息包括起点类型及对应的起点位置，所述终点信息包括终点类型及对应的终点位置；

其中，当线条的起点为线框中的像素点时，所述起点类型为线框类型，所述起点位置为所述起点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为线框中的像素点时，所述终点类型为线框类型，所述终点位置为所述终点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为非线框中的像素点时，所述终点类型为坐标类型，所述终点位置为所述终点的坐标。

12.一种线框图的绘制装置，其特征在于，包括：

加载请求发送模块，用于在浏览器侧向服务器侧发送线框图页面的加载请求；所述加载请求中包括线框图标识；

线框图页面数据接收模块，用于接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；

线框图页面获得模块，用于对所述线框图页面数据进行渲染处理，获得线框图页面；

绘制指令接收模块，用于接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；

线框图绘制模块，用于在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条。

13.根据权利要求12所述的装置，其特征在于，所述线框包括线框标识，所述线条包括线条标识，所述的装置还包括：

记录生成模块，用于生成线框记录和/或线条记录；所述线框记录为所述线框信息与所述线框标识的对应关系，所述线条记录为所述线条信息与所述线条标识的对应关系；

记录发送模块，用于将所述线框记录和/或所述线条记录发送至所述服务器侧；所述服务器侧用于保存所述线框记录和/或所述线条记录，与所述线框图标识的对应关系。

14.根据权利要求12或13所述的装置，其特征在于，所述线框图标识为首次绘制线框图时，在浏览器侧向服务器侧发送线框图的绘制请求，接收服务器侧返回的，依据所述绘制请求分配的网页标识中包括的线框图标识。

15.根据权利要求14所述的装置，其特征在于，当首次绘制线框图时，所述线框图页面数据包括空白的线框图；所述线框图页面获得模块包括：

生成子模块，用于在浏览器窗口中生成新的网页，获得空白的线框图页面。

16.根据权利要求12或13所述的装置，其特征在于，当非首次绘制线框图时，所述线框图页面数据包括线框记录和/或线条记录。

17.根据权利要求16所述的装置，其特征在于，所述线框图页面获得模块包括：

第一渲染子模块，用于在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框，获得线框图页面；

或者，

第二渲染子模块，用于在浏览器窗口中生成新的网页，在所述网页上按照所述线条记录渲染线条，获得线框图页面；

或者，

第三渲染子模块，用于在浏览器窗口中生成新的网页，在所述网页上按照所述线框记录渲染线框；

第四渲染子模块，用于按照所述线条记录渲染线条，获得线框图页面。

18.根据权利要求16所述的装置，其特征在于，所述线框图页面数据包括的线框记录和/或线条记录为，在先当前浏览器侧或者其他浏览器侧绘制线框和/或线条时，生成的所述线框和/或所述线条对应的线框记录和/或线条记录。

19.根据权利要求12或13或15或17或18所述的装置，其特征在于，所述线框图页面绘制线框和/或线条的绘制指令包括以下的至少一种：

新增线框和/或线条的操作指令、编辑已有的线框和/或线条的操作指令。

20.根据权利要求12或13或15或17或18所述的装置，其特征在于，所述线框信息包括以下的至少一种：

位置信息、大小信息、颜色信息、内容信息。

21.根据权利要求12或13或15或17或18所述的装置，其特征在于，所述线条信息包括以下的至少一种：

粗细信息、方向信息、颜色信息、起点信息、终点信息。

22.根据权利要求18所述的装置，其特征在于，所述起点信息包括起点类型及对应的起点位置，所述终点信息包括终点类型及对应的终点位置；

其中，当线条的起点为线框中的像素点时，所述起点类型为线框类型，所述起点位置为所述起点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为线框中的像素点时，所述终点类型为线框类型，所述终点位置为所述终点所在线框的线框标识；

当线条的起点为非线框中的像素点时，所述起点类型为坐标类型，所述起点位置为所述起点的坐标；

当线条的终点为非线框中的像素点时，所述终点类型为坐标类型，所述终点位置为所述终点的坐标。

23.一种线框图的绘制系统，其特征在于，包括浏览器和服务器；

其中，所述浏览器包括：

加载请求发送模块，用于在浏览器侧向服务器侧发送线框图页面的加载请求；所述加载请求中包括线框图标识；

线框图页面数据接收模块，用于接收所述服务器侧依据所述加载请求返回的，所述线框图标识对应的线框图页面数据；

线框图页面获得模块，用于对所述线框图页面数据进行渲染处理，获得线框图页面；

绘制指令接收模块，用于接收线框和/或线条的绘制指令；所述绘制指令中包括线框信息和/或线条信息；

线框图绘制模块，用于在所述线框图页面中按照所述线框信息和/或线条信息绘制出线框和/或线条；

所述服务器包括：

加载请求接收模块，用于接收在浏览器侧发送的线框图页面的加载请求；

线框图页面数据查找模块，用于依据所述加载请求查找所述线框图标识对应的线框图页面数据；

线框图页面数据发送模块，用于向所述浏览器侧发送所述线框图页面数据。

24.根据权利要求23所述的系统，其特征在于，所述线框包括线框标识，所述线条包括线条标识；

所述的浏览器还包括：

记录生成模块，用于生成线框记录和/或线条记录；所述线框记录为所述线框信息与所述线框标识的对应关系，所述线条记录为所述线条信息与所述线条标识的对应关系；

记录发送模块，用于将所述线框记录和/或所述线条记录发送至所述服务器侧；

所述的服务器还包括：

记录接收模块，用于接收所述浏览器侧发送的所述线框记录和/或所述线条记录；

记录保存模块，用于保存所述线框记录和/或所述线条记录，与所述线框图标识的对应关系。