CN1445691A - 一种在电子公告板上绘制、发送包含图形贴子的方法 - Google Patents

Abstract

本发明公开了一种在电子公告板上绘制、发送包含图形贴子的方法，该方法使用可缩放矢量图形SVG语言作为图形贴子的描述方式，采用网络程序模块首次使用加载技术，通过文档对象模型DOM接口在SVG文档和脚本程序之间进行交互，使用户可直接在web网页上绘制包含图形图像元素的贴子，并提交到服务器端加以保存。本发明打破了在BBS上只能写字或者贴图而不宜直接画图的技术偏见，使用户方便地在BBS上编辑、刊载、浏览、回复包含图形图像元素的贴子，拓宽了用户在BBS上的表达手段，提高了BBS系统的功能和效率，有利于BBS与未来的新兴的多媒体元素相结合。

Description

一种在电子公告板上绘制、发送包含图形贴子的方法

技术领域：

本发明涉及计算机网络技术，即因特网Internet技术，更具体涉及因特网的电子公告板技术。

背景技术：

电子公告板系统(BBS，Bulletin Board System)作为因特网(Internet)七大服务之一，是一个信息的集散地，在商业信息的发布、教学和科研问题的讨论、高新技术的探索、艺术文化的共赏、网友之间的交流等领域发挥着重要的作用。

现有的BBS可以发布纯文本贴子、基于字符拼凑的图案、以及基于超链接的贴图。其中，基于超链接贴图的BBS技术目前在BBS上图像交流的常用技术。该BBS技术允许用户在贴子正文中插入一些特殊的文字符号，例如图片标记<img>，这种文字符号在web浏览器上通过web浏览器向指定的统一资源定位URL请求文件，并将此文件的内容替换到文字符号所在的位置上，从而使该文件的内容插入到贴子当中。这种贴子是文本内容和图片文件的临时组合，其不足之处在于：

1、这种BBS的贴图功能操作不便，用户需在web浏览器之外打开绘图软件。有许多情况，难以使用这样的绘图软件，例如，网吧不允许用户随便安装软件，用户计算机的配置较低等。

2、要使用这种BBS的贴图功能，用户要将图片文件上传到网络空间以供链接，网络空间提供商通常要收取费用，而免费的网络空间则可能被收回从而造成图片链接的丢失。

3、这种BBS的贴图功能，贴子正文和图片文件是分别保存的，只有用户浏览贴子时被临时链接到一起显示，不便于贴子的整体保存和长期收藏。

4、使用这种BBS的贴图功能，图片文件需占用很大的空间，浪费了网络空间、影响了传输速度。

5、使用这种BBS的贴图功能，不能对所贴图片进行精确地定位、缩放或旋转，别人浏览时，所贴图片和周遭文字的布局关系不一定是发贴人所发的原贴。

6、使用这种BBS的贴图功能，用户针对旧贴中的图片进行回复时，只能重绘图片上传，不能在原有的图片上直接回复，妨碍了交流的针对性和继承性。

综上所述，目前网络上BBS的图形化，存在操作不便、限制条件多、以及许多原有的绘图功能无法实现等问题，限制了虚拟社区的表达能力，也限制了电子公告板系统重要职能的发挥。

发明内容：

本发明的目的是，提供一种在电子公告板上绘制、发送包含图形贴子的方法，该方法使用可缩放矢量图形SVG语言作为图形贴子的描述方式，采用网络程序模块首次使用加载技术，通过文档对象模型DOM接口在SVG文档和脚本程序之间进行交互，使用户可直接在web网页上绘制包含图形、图像元素的贴子，并提交到服务器端加以保存，其优点在于，使用户方便地在BBS上编辑、刊载、浏览、回复包含图形图像元素的贴子，拓宽了用户在BBS上的表达手段，提高了BBS系统的功能和效率，并节省了安装成本、内存空间和网络空间，实现了父贴和子贴间的层叠显示，便于图形贴子的交流、修改、及其整体保存和收藏。

为了达到上述目的，本发明的技术方案包括如下步骤：

a、服务器响应用户绘制、发送包含图形贴子的请求，发送一个包含主控脚本程序、图形贴子编辑区域的web网页到用户终端的web浏览器的步骤；

b、主控脚本程序判断与用户所选择的绘图工具对应的绘图脚本程序模块是否已经保存到用户终端的存储器中的步骤；

c、如果与用户所选择的绘图工具对应的绘图脚本程序模块没有保存到用户终端的存储器中，主控脚本程序向服务器请求发送该绘图脚本程序模块到用户终端的web浏览器，并保存到用户终端的存储器中，并投入到web网页中运行的步骤；

d、如果与用户所选择的绘图工具对应的绘图脚本程序模块已经保存到用户终端的存储器中，主控脚本程序取出该绘图脚本程序模块并投入到web网页中运行的步骤；

e、绘图脚本程序模块接收用户在web网页中的图形贴子编辑区域即SVG文档显示区域上的绘图消息，通过文档对象模型DOM接口修改该SVG文档数据，在图形贴子编辑区域即SVG文档显示区域反映绘图结果的步骤；

f、将用户提交的图形贴子，用SVG格式保存到服务器端的步骤。

上述的图形贴子，是用可缩放矢量标记语言SVG描述的、由用户通过绘画手段所表达的包含图形、图像元素的消息。

上述的图形贴子编辑区域，是通过在web网页中嵌入SVG文档从而被安装在web浏览器中的SVG插件显示在web网页中的SVG文档显示区域。

与现有BBS相比，本发明具有以下优点：

1、用户要在BBS上绘图时不再需要打开web浏览器以外的绘图软件，只需较少空间便可使用绘图贴图功能，节省了用户端的安装成本和内存开销，简化了在BBS上的绘图操作；

2、用户不再需要将图片单独上传到网络空间，节省了网络空间；

3、贴子的格式使用SVG这一国际矢量图形标准，便于贴子的外围编辑加工，便于将贴子转化成其它格式的制品，也便于将贴子装订成pdf电子书籍；

4、用户在贴子上所绘制的图形和粘贴的图片，均被编码到SVG文档中，成为一个整体，便于贴子的整体保存和收藏；

5、绘制的图形使用文本式矢量描述，数据量远远小于点阵图像，还可在服务器端对贴子的数据进行SVGZ压缩保存，压缩率通常为70％-80％，大大减小了贴子的数据量，提高了上传和下载的速度；

6、用户可以对贴子中的图形和图像进行精确地定位、缩放和旋转，实现了“所见即所得”地撰写贴子；

7、用户可以在旧贴的图形和图像上直接修改和回复，实现了父贴和它的所有子贴层叠显示的功能，这种回复方式快捷、针对性强、也更直观和灵活。

8、由于采用了网络程序模块首次使用加载技术，又由于这种网络程序模块使用脚本编写，节省了BBS用户不必要的安装成本、内存开销和传输时间，也便于BBS运营者修改或者添加程序模块。

本发明打破了在BBS上只能写字或者贴图而不宜直接画图的技术偏见，使用户方便地在BBS上编辑、刊载、浏览、回复包含图形图像元素的贴子，拓宽了用户在BBS上的表达手段，提高了BBS系统的功能和效率，有利于BBS与未来的新兴的多媒体元素相结合。

本发明的技术方案，已在非公开的实验网络上开发成功，收到了很好的预期效果。

附图说明：

图1(a)和图1(b)是本发明网页的一个例子：其中图1(a)是发表新贴子时的情形；图1(b)是浏览和回复旧贴子时的情形。

图2(a)是本发明建立在用户终端存储器中的绘图功能网页管理表的一个例子；图2(b)是本发明的一个绘图脚本程序模块的代码片断。

图3是本发明绘图脚本程序模块首次使用加载的流程图。

图4是本发明发表新贴子的流程图。

图5是本发明浏览和回复旧贴子的流程图。

图6是本发明的系统结构示意图。

具体实施方式：

以下结合附图，对本发明作进一步的描述。

本发明所述的一种在电子公告板上绘制、发送包含图形贴子的方法是在以web为基础的环境下由web服务器支持的系统，该环境是通过通讯网络，最好是通过互联网(Internet)把多个用户的计算机与网站管理员的web服务器链接在一起的网络环境。用户计算机有一个web浏览器，该web浏览器通过互联网与web服务器相连，并用CGI(通用网关接口)与web服务器通讯。而且该web服务器可发送已准备好的网页，以响应该web浏览器的请求。

其中，web服务器是安装了服务器软件的计算机，该服务器软件能响应诸如web浏览器那样的web客户的请求。而web浏览器指的是能读web网页的软件，该web网页就是作为标准web文档的HTML文档，并且通过通用网关接口(CGI)与web服务器通讯。在本发明中，为了显示描述图形贴子内容的SVG文档，web浏览器应该安装SVG插件。此外，web服务器参考的数据库是正在进行记录的媒体，它们系统地存储有关的数据，以便容易地添加、修改、删除和检索。

应用于本发明的SVG(Scalable Vector Graphics)是由环球网联盟W3C提出的一种开放标准的文本式矢量图形描述语言。使用SVG可以描述出各种各样的高质量矢量图形，包括图像处理中常见的许多功能，例如图形、文字、动画、色彩、滤镜效果等等。关键是：SVG完全用普通文本来描述。且SVG是基于XML(Extensible Markup Language)的语言、支持文档对象模型DOM，所以可扩展性强，并能够描述复杂的图像。本发明的图形贴子就是使用SVG语言描述、通过安装在web浏览器中的SVG插件显示在web网页中的。

本实施例中的web网页100和web网页150使用多框架frame结构，即，在同一个web网页中包含若干个框架，每一个框架又包含一个web网页。所述的SVG文档、主控脚本程序和绘图脚本程序模块，就是分别随着不同的web网页发送到同一个web网页的不同框架中的，以免互相干扰。

首先，解释本说明书中所使用到的一些名词。

【图形贴子】使用SVG语言加以描述、由用户通过绘画手段所表达的包含图形图像元素的、用于刊载在电子公告板上的消息。它不仅可以包含严格意义上的矢量图形元素，还可以包含点阵图像元素。在本发明中，它使用SVG语言描述用户编辑的包含图形图像的消息，存储为一一个服务器端的SVG文件，通过安装在web浏览器中的SVG插件显示在web网页上。

【SVG文档显示区域112、160】在一个web网页中显示SVG文档的区域，即显示图形贴子的区域。在本发明中，它是通过在web网页中嵌入SVG文档从而被安装在web浏览器中的SVG插件显示在web网页中的SVG文档显示区域。

【主控脚本程序614】一个从服务器发送到用户终端的web浏览器620并运行在内部存储器612中的短小程序。它使用网页脚本语言编写，起到核心控制的作用，至少用于调度绘图脚本程序模块，因而称它为主控脚本程序。它既完成控制和调度绘图脚本程序模块的功能，又维护着一些公用变量，例如当前绘图颜色，以供各个绘图脚本程序模块使用。在本实施例中，它采用Javascript语言编写。

【主控网页662】预先写入了主控脚本程序614的web网页，用于载运主控脚本程序614。根据本发明，在服务器端储备着一个主控网页662，它被服务器发送到web网页100中的主控框架106。由于主控脚本程序614被包含在主控网页662中，因此主控脚本程序614也随之被载运到了web网页100中的主控框架106。

【绘图脚本程序模块】一个从服务器发送到用户终端的web浏览器620的短小程序，采用网页脚本语言编写，用于在网页中的SVG显示区域上绘制图形。它完成某个特定功能，例如绘制矩形或粘贴图片。在本实施例中，一个绘图脚本程序模块就是一个采用Javascript语言编写的绘图脚本程序。

【绘图功能网页H1-Hn】预先写入了绘图脚本程序模块的web网页，用于载运绘图脚本程序模块。根据本发明，在服务器端储备着很多这样的绘图功能网页H1-Hn，每个绘图功能网页都包含用于完成某个特定功能的绘图脚本程序模块，在本实施例中，所说的绘图脚本程序模块就是Javascript脚本程序。由于这样的绘图功能网页很多，且势必还将不断增添，因此不宜一次性地全部下载到用户端。另外，考虑到用户在绘图过程中未必会用到每一个功能，所以无须下载所有的绘图功能网页，避免不必要的资源浪费。只有当用户第一次使用某个绘图功能时，才从服务器端下载相应的绘图功能网页。

【绘图功能网页管理表200】一个记录绘图功能网页的数据结构，用于绘图功能网页暨绘图脚本程序模块的首次使用加载。在本实施例中，它包含一个pageNames数组202，以及一个pageContents数组204。前者用于登记已经装载过的绘图功能网页名；后者用于保存绘图功能网页的内容。当用户在工具栏104中选择某个绘图工具时，如果主控脚本程序614在绘图功能网页管理表200中找到了与之对应的绘图功能网页，则将该绘图功能网页投入运行；反之，如果主控脚本程序614在绘图功能网页管理表200中没有找到该绘图功能网页，就从服务器端下载该绘图功能网页，下载后就将它登记在绘图功能网页管理表200中，再将该绘图功能网页投入运行，这样一来，当用户下一次再选择这个绘图功能时，就不需要再从服务器端下载与该绘图功能相对应的绘图功能网页了。这就是本发明所谓的“绘图脚本程序模块首次使用加载”。

参照图6说明本发明所述的可绘图的电子公告系统的结构，它包括：

web服务器650。该web服务器650是安装了诸如Apache服务器软件的计算机，该服务器软件能响应诸如web浏览器620那样的web客户的请求，并可发送已准备好的web网页，以响应该web浏览器620的请求；

编辑网页生成单元652。它是一个储备在服务器端、被web服务器650调用的CGI程序，它接收来自web浏览器620发表新贴的请求，生成并且发送一个用于编辑图形贴子的web网页100到用户终端的web浏览器620。这个程序可以选择PHP、Perl、ASP或JSP语言编写，在本实施例中使用的是JSP语言。

贴子加载单元656。它是一个储备在服务器端、被web服务器650调用的CGI程序。它接收web浏览器620提交到服务器的图形贴子和相关信息，保存该图形贴子和相关信息，生成并发送一个确认网页到用户终端的web浏览器620。这个程序可以选择PHP、Perl、ASP或JSP语言编写，在本实施例中使用的是JSP语言。

目录网页生成单元660。它是一个储备在服务器端、被web服务器650调用的CGI程序。它参照数据库，生成并发送一个包含贴子目录的web网页到用户终端的web浏览器620。其中的贴子目录罗列着贴子的主题，每一个主题实现为一个以该贴子的ID号为参数的指向浏览网页生成单元658的超链接。当用户利用鼠标点击该主题时，web浏览器620向服务器端的浏览网页生成单元658请求该ID号的贴子。此外，该web网页还包含一个“发表新贴”的超链接，当用户利用鼠标点击它时，web浏览器620向服务器端的编辑网页生成单元652请求一个用于编辑图形贴子的web网页100。这个程序可以选择PHP、Perl、ASP或JSP语言编写，在本实施例中使用的是JSP语言。

浏览网页生成单元658。它是一个储备在服务器端、被web服务器650调用的CGI程序。它接收来自web浏览器620的浏览图形贴子的请求，根据用户请求的贴子ID号，从数据库670中取出该贴子的相关信息，生成并发送一个包含相应SVG文档和相关信息，以及主控脚本程序和工具栏的web网页150到用户终端的web浏览器620。该web网页150一方面包含了用户想要浏览的图形贴子，另一方面包含了用于回复该图形贴子的主控脚本程序和工具栏，以备用户回复该图形贴子。这个程序可以选择PHP、Perl、ASP或JSP语言编写，在本实施例中使用的是JSP语言。

图片编码单元654。它是一个储备在服务器端、被web服务器650调用的CGI程序。它接收web浏览器620提交的图片文件数据，并使用Base64将其编码，然后生成一个包含脚本程序的web网页，并将编码数据赋给脚本程序中的一个字符串变量，发送该web网页到用户终端的web浏览器620。这个程序可以选择PHP、Perl、ASP或JSP语言编写，在本实施例中使用的是JSP语言。

主控网页662。它是一个储备在服务器端的web网页，用于载运主控脚本程序614。该web网页包含一个主控脚本程序614，这个主控脚本程序614使用javascript脚本语言编写。服务器发送该主控网页662到web浏览器620中的主控框架106，实际上就是借主控网页662载运主控脚本程序614到用户终端的web浏览器620。

上述使用javascript语言编写的主控脚本程序614至少应该包含以下几个函数：

onclick函数。通过在主控网页662中预先设置<body onclick＝“onclick()”>，使得该函数在主控网页662装载完毕时即被调用。它完成一些初始化的工作，例如初始化绘图功能网页管理表200中的pageNames数组202和pageContents数组204；此外，该函数还要使用HTML中的embeds[0]从而获得贴子框架110中的SVG文档对象，此后就通过该SVG文档对象对SVG文档进行操作。需要注意的是，这个方法也是本发明中其它脚本程序获得贴子框架110中的SVG文档对象的方法；

Iamhere函数。该函数接收一个从服务器端发送到web浏览器620的绘图功能网页的document对象(文档对象)，通过该document对象取得该绘图功能网页的文件名和内容，并记录在绘图功能网页管理表200中，最后调用writepagecontent函数；

writepagecontent函数。该函数从绘图功能网页管理表200中取出指定绘图功能网页的内容，并将它写入属性框架114中；

getpagecontent函数。该函数在绘图功能网页管理表200中查找指定的绘图功能网页名：如果查找到了，就调用writepagecontent函数将该绘图功能网页的内容写入到属性框架114中；否则重设传输框架108的location属性，迫使web浏览器向服务器请求这个绘图功能网页到传输框架108；

setopacity函数。该函数遍历SVG文档中所有的<g>元素。由于对同一个SVG文档的每一次回复的内容都被包含在新添加到SVG文档最后的<g>元素中，所以如果某一个被遍历到的<g>元素不是最后一个<g>元素，则表明该<g>元素所包含的内容是父贴的内容，因此将该<g>元素的opacity(透明度)属性值修改成小于1的值，最好是0.2。这样一来，通过减小父贴的opacity属性值，以使父贴的内容显得比较黯淡；

工具栏网页104。它是一个储备在服务器端的web网页。它包含一个供用户选择各种绘图功能的工具栏。在本实施例中，这个工具栏实现为一个HTML的表格(<table>)，表格中的每一个表项(<td>)显示一个说明绘图功能的单词，例如用于绘制矩形的表项上就写有“画矩”120字样。此外，针对每一个表项还预先写入了onclick函数，每当用户利用鼠标点击某个表项时，该表项的onclick函数被调用，该函数以与之相关的绘图功能网页名作为参数调用主控脚本程序614的getpagecontent函数，以此请求主控脚本程序614将该绘图功能网页的内容写入到属性框架114，以备用户使用该绘图功能。

若干个绘图功能网页H1-Hn。它是若干个储备在服务器端的web网页，用于载运绘图脚本程序模块。本发明在服务器端储备着很多这样的绘图功能网页，每个绘图功能网页都包含用于完成某个特定功能的绘图脚本程序模块，在本实施例中，所说的绘图脚本程序模块就是使用Javascript脚本语言编写的、用于绘图的脚本程序，即绘图脚本程序。由于这样的绘图功能网页很多，且势必还将不断增添，因此不宜一次性地全部下载到用户端。另外，考虑到用户在绘图过程中未必会用到每一个功能，所以无须下载所有的绘图功能网页，避免不必要的资源浪费。只有当用户第一次使用某个绘图功能时，才从服务器端下载相应的绘图功能网页。

绘图功能网页所包含的绘图脚本程序至少应该包含以下几个函数：

onclick函数252。通过在绘图功能网页中预先设置<bodyonclick＝”_onclick()”>，使得该函数在绘图功能网页装载完毕时即被调用。它以所在网页的document对象为参数调用主控脚本程序614中的Iamhere函数，以此告诉主控脚本程序，使主控脚本程序614记录下该绘图功能网页的名称和内容；

onmouseevent函数。当用户利用鼠标在SVG文档显示区域112、160上绘图时，SVG文档中预先写入的脚本程序通过SVG插件接收到鼠标事件，并以该鼠标事件对象evt作为参数调用此onmouseevent函数。各种绘图功能的网页具有各自的onmouseevent函数，onmouseevent函数根据所要实现的功能对鼠标事件做出相应的动作。

在本实施例中，还要对每个绘图功能网页的<html>元素设置id＝“html”属性值和filename属性值。以使主控脚本程序614取得该绘图功能网页的文件名和内容。

数据库670。用于记录图形贴子的相关信息，例如ID号，引用ID号，发贴人，主题等。

硬盘680。用于存储SVG文件即图形贴子文件。本发明中，用户撰写的每一个图形贴子，在服务器端都使用SVG文件加以保存。每个SVG文件以.svg为扩展名。在本实施例中，为了便于参照数据库，将SVG文件的名称与贴子的ID号结合起来，例如，在数据库中ID号为3的图形贴子的SVG文件就是t3.svg。特别地，ID号为0的图形贴子是一个空白贴子文件682，名称为t0.svg，它是由系统预先设置的一个“根贴”，而不是由用户撰写的用户贴子文件Y1-Ym。用户贴子文件Y1-Ym是指由用户在用户终端的web浏览器620中撰写并保存到服务器端的SVG文件即图形贴子文件。

而在用户终端，需要一个web浏览器620和一个内部存储器612。前者指的是能读web网页的软件，该web网页就是作为标准web文档的HTML文档，并且通过通用网关接口(CGI)与web服务器通讯。需要强调的是，为了显示描述图形贴子的SVG文档，web浏览器应该安装SVG插件；而后者用于提供程序的执行环境。

参照图1、图2、图3、图4和图6具体地说明在用户发表新贴子的过程中，本发明的步骤。

用户通过web浏览器620访问BBS，web服务器650调用目录网页生成单元660发送一个包含贴子目录和“发表新贴”超链接的web网页到web浏览器620，以供用户选择浏览某一个贴子还是“发表新贴”。

当用户在402步中利用鼠标点击“发表新贴”的超链接后，web浏览器620向服务器端的编辑网页生成单元652发出发表新贴的请求，在404步中编辑网页生成单元652发送一个web网页100到web浏览器620用于撰写图形贴子。该web网页100包括5个框架：一个工具框架102用于装载工具栏网页104；一个贴子框架110用于装载包含一个空白SVG文档的贴子网页；一个主控框架106用于装载包含主控脚本程序614的主控网页662；一个传输框架108用于首次装载绘图功能网页；还有一个属性框架114用于写入绘图功能网页，以接收和处理用户在SVG文档显示区域112上的绘图操作。

其中的主控框架106和传输框架108宽度或高度设置为0，从而隐藏起来。

其中的贴子网页包含一个空白的SVG文档。包含的方法是使用HTML中的<embed src＝“t0.svg”>标签，该标签能指示web浏览器向服务器请求t0.svg文件，即空白贴子文件682。在取得t0.svg文件之后，web浏览器调用预先安装的SVG插件在web网页上显示该SVG文件。

其中的空白SVG文档，指的是尚未包含任何图形图像元素的t0.svg文件。该t0.svg文件包含一个预先写入的<g>元素，用于包含用户将要绘制的内容；同时，该文件还包含一段预先写入的javascript脚本程序，用于接收用户的鼠标事件，并将该鼠标事件传递给属性框架114中的绘图脚本程序进行综合处理。

当主控网页662在主控框架106中装载完毕后，预先写入主控网页662的onclick函数被调用，该函数定义两个长度为0的数组变量PageNames数组202和PageContents数组204：前者用于登记已经装载过的绘图功能网页名，例如pageNames[0]＝“rect.htm”；后者用于保存绘图功能网页的内容。在本实施例中，所谓的“将绘图脚本程序模块保存在用户终端的内部存储器中”，即指将包含绘图脚本程序的绘图功能网页的内容保存在pageContents数组204中；此外，该函数还要使用HTML中的embeds[0]从而获得贴子框架110中的SVG文档对象，此后就通过该SVG文档对象对SVG文档进行操作。

至此，编辑新图形贴子的初始化工作执行完毕。

然后，在406步中等待用户选择工具栏中的工具。

当用户点击工具栏104中的一个表项，选择绘图工具时，该表项的onclick函数以一个与该表项相对应的绘图功能网页名作为参数调用主控框架106中主控脚本程序614的getpagecontent函数。在302步中，getpagecontent函数在pageNames数组202中逐一查找该绘图功能网页名。

如果getpagecontent函数在pageNames数组202中查找到所需的绘图功能网页名，那么就执行304步，从pageContents数组204中的相同位置取出该绘图功能网页的内容，并在接下来的306步中，通过调用writepagecontent函数将该网页内容写入到属性框架114。

如果getpagecontent函数在pageNames数组202中没有查找到所需的绘图功能网页名，表明该绘图功能网页尚未装载到用户终端的web浏览器，则从服务器端下载，执行以下步骤：

1、308步，getpagecontent函数通过将传输框架108的location属性值设置为该绘图功能网页名，从而迫使web浏览器620向服务器请求该绘图功能网页；

2、310步，服务器响应请求，发送指定的绘图功能网页到传输框架108。

3、312步，随着绘图功能网页在传输框架108中装载完毕，预先写入到该绘图功能网页的onload函数252被调用，以所在网页的document对象为参数调用主控脚本程序614的Iamhere函数，以此告诉主控脚本程序614；

4、314步，Iamhere函数通过document.getElementById(“html”).getAttribute(“filename”)接口取得该绘图功能网页的文件名；

5、316步，Iamhere函数通过document.getElementById(“html”).innerHTML接口取得该绘图功能网页的内容；

6、318步，Iamhere函数添加该绘图功能网页的文件名到pageNames数组202；

7、320步，Iamhere函数添加该绘图功能网页的内容到pageContents数组204；

8、306步，Iamhere函数通过调用writepagecontent函数将绘图功能网页的内容写入到属性框架114。

由此完成了一个绘图功能网页暨绘图脚本程序模块的首次使用加载过程，并将其投入工作，用于接收和处理用户在SVG文档显示区域112上的绘图操作，等待用户在SVG文档显示区域112上进行绘图操作。

当用户利用鼠标在SVG文档显示区域112上进行绘图操作时，预先写入到SVG文档中的脚本程序接收到鼠标事件，并将该鼠标事件传递给属性框架114中的绘图脚本程序，绘图脚本程序根据该鼠标事件，通过文档对象模型(DOM)接口修改该SVG文档的数据，从而在SVG文档显示区域112上反映出绘图结果。

不失一般性，现在以用户在450步中选择画矩120工具从而绘制一个矩形作为具体例子，来说明在用户绘制一个矩形的过程中本发明的步骤：

当用户利用鼠标点击工具栏中的“画矩”120表项时，该表项的onclick函数被调用，它以“rect.htm”为参数调用主控框架106中主控脚本程序614的getpagecontent函数，请求主控脚本程序将rect.htm的内容写入到属性框架114以备用户绘制矩形。主控脚本程序614的getpagecontent函数接收到参数“rect.htm”后，在pageNames数组202中逐一查找该绘图功能网页名“rect.htm”。

如果getpagecontent函数在pageNames数组202中查找到所需的绘图功能网页名“rect.htm”，那么就执行304步，从pageContents数组204中的相同位置取出rect.htm的内容，并在接下来的306步中，通过调用writepagecontent函数将该网页内容写入到属性框架114。

如果getpagecontent函数在pageNames数组202中没有查找到“rect.htm”，表明该绘图功能网页尚未装载到用户终端的web浏览器，这就意味着该绘图功能首次被用户使用，从服务器端下载，执行以下步骤：

1、308步，getpagecontent函数通过将传输框架108的location属性值设置为“rect.htm”，从而迫使web浏览器向服务器请求rect.htm网页到传输框架108；

2、310步，服务器响应请求，发送rect.htm网页250到传输框架108。

3、312步，随着rect.htm网页250在传输框架108中装载完毕，预先写入到rect.htm网页250的_onload函数252被调用，它以document对象为参数调用主控脚本程序614的Iamhere函数，以此告诉主控脚本程序614；

4、314步，Iamhere函数通过document.getElementById(“html”).getAttribute(“filename”)接口取得该绘图功能网页的文件名，即“rect.htm”；

5、316步，Iamhere函数通过document.getElementById(“html”).innerHTML接口取得该网页的内容；

6、318步，Iamhere函数添加该网页的文件名“rect.htm”到pageNames数组202；

7、320步，Iamhere函数添加该网页的内容到pageContents数组204；

8、306步，Iamhere函数通过调用writepagecontent函数将该rect.htm网页250的内容写入到属性框架114。

由此完成了画矩绘图功能网页即rect.htm网页250的首次使用加载过程，并投入工作。然后进入下一步452，等待用户在SVG文档显示区域112上绘制矩形。

在454步中，当用户在SVG文档显示区域112上按下鼠标时，预先写入到SVG文档中的脚本程序接收到mousedown鼠标事件，并以该鼠标事件对象evt作为参数调用位于属性框架114中预先写入到rect.htm网页250内的onmouseevent函数，在456步中，onmouseevent函数记录下鼠标按下时的坐标(X1，Y1)作为变量X1和变量Y1的值；在458步中，当用户抬起鼠标时，绘图脚本程序中的onmouseevent函数同样地接收到mouseup鼠标事件，在460步中，记录下鼠标抬起时的坐标(X2，Y2)作为变量X2和变量Y2的值，并且在462步中通过文档对象模型(DOM)接口添加一个<rect>元素到SVG文档中的最后一个<g>元素，然后在464步中，通过文档对象模型(DOM)接口设置该<rect>元素的x，y，width，height属性值分别为X1，Y1，X2-X1，Y2-Y1。最后返回406步，等待用户的下一次操作。

此时，由于SVG文档的内容被绘图脚本程序修改了，而SVG文档的内容通过SVG插件显示在SVG显示区域112上，于是SVG文档显示区域112上就显示出一个符合用户要求的矩形122。

如果用户在410步中选择贴图工具118粘贴一张图片，那么应首先执行上述同样的步骤，将用于贴图的绘图功能网页162写入到属性框架114，再执行以下步骤：

1、412步，用户利用鼠标在SVG文档显示区域160上绘制一个矩形，用于确定图片文件将要粘贴的位置和大小，其步骤与上文所述的绘制矩形的步骤相同；

2、414步，用户在属性框架114中选择一个本地图片文件名166；

3、416步，当用户选择提交164时，绘图功能网页162通过FILE表单元素提交图片文件数据到服务器端的图片编码单元654，并指定将响应网页发送到传输框架108；

4、418步，图片编码单元654对图片数据进行Base64编码；

5、420步，图片编码单元654生成一个包含脚本程序的web网页，将编码数据加上前缀之后赋给脚本程序中的一个字符串变量，发送该web网页到web浏览器620中的传输框架108；

6、422步，当该web网页在传输框架108中装载完毕之后，预先写入的onclick函数被调用，它添加一个<image>元素到SVG文档中的最后一个<g>元素；

7、424步，onclick函数设置该<image>元素的xlink：href属性值为上述字符串变量的值；

8、426步，onclick函数再设置该<image>元素的x，y，width，height属性值分别为上述412步中所绘矩形对象的x，y，width，height属性值；

这样，一个由用户精确定位、缩放的图片168就显示在SVG文档显示区域160上。

这种贴图方法把图片的数据完整地编码到了贴子当中，使图片数据和文本数据保存在同一文件中。

当用户在490步中利用鼠标点击提交116表项时，预先写入该表项的onclick函数被调用，执行以下步骤：

1、491步，弹出一个对话框，提示用户输入一个主题，这个主题就是贴子的主题，在目录网页生成单元660罗列贴子主题时用；

2、492步，利用printNode函数接口将贴子框架110中的SVG文档即图形贴子的内容输出到一个字符串；

3、494步，将上述字符串和贴子的相关信息，例如主题和发贴人姓名，作为表单元素值提交到服务器端的贴子加载单元656；

4、496步，贴子加载单元656添加贴子的相关信息到数据库670，获得一个新的ID号，这个ID号是数据库表单的流水号，再将上述字符串写成硬盘680上的一个SVG文件，这个SVG文件的名称是“t”加上ID号，扩展名是.svg；

5、498步，贴子加载单元656发送一个确认页面到用户终端的web浏览器620，表明此次发贴完毕。

由此完成了提交过程，用户撰写的图形贴子被保存到了服务器端，等待其他用户的浏览和回复。

至此，发表新图形贴子结束。

下面，参照图5说明在用户浏览和回复图形贴子的过程中，执行如下步骤：

在用户通过web浏览器620访问BBS时，当用户选择浏览贴子时，web浏览器620向服务器端的浏览网页生成单元658请求该ID号的贴子，执行以下步骤：

1、502步，web浏览器620向服务器端的浏览网页生成单元658请求该ID号的贴子；

2、504步，浏览网页生成单元658根据用户请求的贴子ID号，从数据库670内相应ID号的记录中取出该贴子的相关信息，并生成一个包含SVG文档和相关信息、主控脚本程序、工具栏、一个“回复”151按钮和一个“淡化引用”152按钮的web网页150；

其中，web网页150也是一个多框架网页，其框架结构和上述的web网页100相同；

其中，在web网页150中包含图形贴子即SVG文档的方法是在web网页中使用<embed>标签。比如说，为了包含ID号为3的贴子的SVG文档，需要在web网页中加入<embed src＝“t3.svg”>标签，该标签指示web浏览器向服务器请求t3.svg文件，在取得t3.svg文件之后，web浏览器调用预先安装的SVG插件在web网页中显示该SVG文件的内容，于是用户便能浏览到它；

其中，“回复”151按钮的onclick函数是一小段预先写入的javascript脚本程序，该程序在SVG文档末尾添加一个新的<g>元素，用来包含用户将要绘制的新内容，即子贴的内容；

其中，“淡化引用”152按钮的onclick函数是一小段预先写入的javascript脚本程序，该程序通过文档对象模型(DOM)接口减小父贴的opacity属性值，以使父贴的内容显得比较黯淡，从而使父贴和子贴的层次分明；

1、浏览网页生成单元658发送该web页面到用户终端的web浏览器；

2、SVG文档即图形贴子的内容则通过安装在web浏览器中的SVG插件显示在web网页上。

由此，用户便可看到图形贴子的内容。

接下来进入506步，等待用户选择。

当用户在浏览贴子期间，在530步中选择“回复”151时，执行以下步骤：

1、532步，“回复”151按钮的onclick函数被调用，它在SVG文档末尾添加一个新的<g>元素，用来包含用户将要绘制的新内容，即子贴的内容；

2、转到406步，重复当用户发表新贴时本发明的步骤。

回复贴子是在原贴子的SVG文档中添加<g>元素，用于分隔父贴和子贴的内容，使贴子的层次更加明晰。

另外，当用户在浏览贴子期间，在520步中点击“淡化引用”152按钮时，该按钮的onclick函数被调用，它调用主控脚本程序614的setopacity函数。setopacity函数执行522步，遍历SVG文档中所有的<g>元素，如果某一个被遍历到的<g>元素不是最后一个<g>元素，则表明该<g>元素所包含的内容是父贴的内容，因此将该<g>元素的透明度(opacity)属性值修改成小于1的值，最好是0.2。

以上步骤通过减小父贴的opacity属性值，以使父贴的内容显得比较黯淡，而子贴的内容仍然照常显示。用户在观看一个图形贴子时，能在视觉上分清父贴和子贴的区别，从而更好地理解整个贴子的内容和层次。

Claims (6)

1、一种在电子公告板上绘制、发送包含图形贴子的方法，其特征在于，该方法包括下列步骤：

a、服务器响应用户绘制、发送包含图形贴子的请求，发送一个包含主控脚本程序、图形贴子编辑区域的web网页到用户终端的web浏览器的步骤；

b、主控脚本程序判断与用户所选择的绘图工具对应的绘图脚本程序模块是否已经保存到用户终端存储器中的步骤；

c、如果与用户所选择的绘图工具对应的绘图脚本程序模块没有保存到用户终端的存储器中，主控脚本程序向服务器请求发送该绘图脚本程序模块到用户终端的web浏览器，并保存到用户终端的存储器中，并投入到web网页中运行的步骤；

d、如果与用户所选择的绘图工具对应的绘图脚本程序模块已经保存到用户终端的存储器中，主控脚本程序取出该绘图脚本程序模块并投入到web网页中运行的步骤；

e、绘图脚本程序模块接收用户在web网页中的图形贴子编辑区域即SVG文档显示区域上的绘图消息，通过文档对象模型DOM接口修改该SVG文档数据，在图形贴子编辑区域即SVG文档显示区域反映绘图结果的步骤；

f、将用户提交的图形贴子，用SVG格式保存到服务器端的步骤。

2、根据权利要求1所述的一种在电子公告板上绘制、发送包含图形贴子的方法，其特征在于，所述的图形贴子，是用可缩放矢量标记语言SVG描述的、由用户通过绘画手段所表达的包含图形图像元素的、用于刊载在电子公告板上的消息。

3、根据权利要求1所述的一种在电子公告板上绘制、发送包含图形贴子的方法，其特征在于，所述的图形贴子编辑区域，是通过在web网页中嵌入SVG文档从而被安装在web浏览器中的SVG插件显示在web网页上的SVG文档显示区域。

4、根据权利要求1所述的一种在电子公告板上绘制、发送包含图形贴子的方法，其特征在于，所述的主控脚本程序用网页脚本语言编写，至少用于调度绘图脚本程序模块。

5、根据权利要求4所述的一种在电子公告板上绘制、发送包含图形贴子的方法，其特征在于，所述的主控脚本程序，采用Javascript语言编写。

6、根据权利要求1所述的一种在电子公告板上绘制、发送包含图形贴子的方法，其特征在于，所述的绘图脚本程序模块采用网页脚本语言编写，用于在网页中的SVG显示区域上绘制图形。

Images