CN114003226A - 一种分层分布式图形设计系统 - Google Patents

Abstract

本发明公开了一种分层分布式图形设计系统，涉及图形设计技术领域。包括分层式图元模块，用于建立并根据分层语法绘制图形元素，生成图元文件；人机交互模块，用于将图形元素与处理对象进行对接，并录入对象函数实现人机交互；分布式存储模块，用于将图元文件采用分布式存储方式进行存储；图元风格模块，用于设定图元风格，生成并导入风格文件至图元文件中，对图元文件中的各个图形元素进行风格调整；数学函数模块，用于录入数学符号并引入公式编辑器，以实现函数绘图。本发明大大简化了图形交互界面设计难度。

Description

一种分层分布式图形设计系统

技术领域

本发明涉及图形设计技术领域，具体而言，涉及一种分层分布式图形设计系统。

背景技术

当前的图形交互界面设计大多使用面向对象程序库，比如Java的Swing库、Delphi的VCL库、C#的WPF库等等，每种图形库提供多种图形控件类，类之间有继承关系，程序员直接使用这些封装好的类、创建控件对象，设计图形界面。Delphi、Visual C#.Net/WPF、QTCreater等开发环境还提供了可视化设计工具，程序设计者通过鼠标拖拽控件的方法设计图形界面。

操作系统提供给程序员的使用接口则是一堆函数和数据结构；Windows提供给程序员使用的函数和数据结构，被称为Windows API，创建窗口的API是CreateWindow/CreateWindowEX，一个Windows窗口(带有标题栏，右上角有最大化、最小化、关闭按钮)必然调用了该函数。其他各种控件都对应一API，该API相当复杂，参数甚至超过10个，每个参数的可能取值更是五花八门，难以掌握。

Linux上，图形系统是客户-服务器结构，图形系统单独作为一个服务进程运行，这个进程被称为X Server(译成“X服务器”)，程序员编写图形界面程序需要调用X Lib(类似于Windows API)和X Server通信，然后由X Sever绘制图形；这种调用很像程序员调用MySQL C Lib和MySQL服务器通信，通过网络传输数据，由MySQL Server存取数据记录。XLib和Windows API都是C语言函数库和数据结构。跨平台的C语言图形库GTK最终会调用Windows API或者X Lib来绘制窗口和各种图形控件。

无论是过程式图形编程接口Windows API、X Lib、GTK还是面向对象图形库QT、C#WPF、Java Swing都相当复杂，图形交互界面设计难度较大，用户使用体验感不好。

发明内容

为了克服上述问题或者至少部分地解决上述问题，本发明实施例提供一种分层分布式图形设计系统，大大简化了图形交互界面设计难度。

本发明的实施例是这样实现的：

本发明实施例提供一种分层分布式图形设计系统，包括分层式图元模块、人机交互模块、分布式存储模块、图元风格模块以及数学函数模块，其中：

分层式图元模块，用于建立并根据分层语法绘制图形元素，生成图元文件；

人机交互模块，用于将图形元素与处理对象进行对接，并录入对象函数实现人机交互；

分布式存储模块，用于将图元文件采用分布式存储方式进行存储；

图元风格模块，用于设定图元风格，生成并导入风格文件至图元文件中，对图元文件中的各个图形元素进行风格调整；

数学函数模块，用于录入数学符号并引入公式编辑器，以实现函数绘图。

为了解决现有技术中图形交互界面设计难度较大的技术问题，本系统采用分层语法并结合分布式存储的方法对图形元素进行设计，可直接与用户的程序设计系统进行对接，有效简化了设计难度，提高了图形交互界面设计效率。采用层式图元设计，每行开始的数字表示该图形元素的层次。系统中的封闭性图元可以嵌套使用。支持像素定位和小数定位；支持条件(IF)和循环(LOOP)指令、支持列表、字典类型、支持面向对象编程；采用分布式存储方式对图元文件进行存储，方便后续调用。还可以自定义设计图元风格，对图元文件中的各个图形元素进行风格调整；进一步提高设计效果。且本系统还支持公式编辑并录入数学符号，可轻松绘制出数学公式，满足多种绘制需求。还可以通过调用函数进行图形绘制，简单方便快捷。

在本发明的一些实施例中，上述分层式图元模块包括注释子模块、语法限定子模块和图元设计子模块，其中：

语法限定子模块，用于录入并存储程序设计语言的注释数据；

语法限定子模块，用于设定分层语法；

图元设计子模块，用于根据程序设计语言的注释数据和分层语法绘制图形元素，生成图元文件。

在本发明的一些实施例中，上述分层式图元模块包括变量子模块，用于设定绘制变量类型。

在本发明的一些实施例中，上述分层式图元模块包括指令子模块，用于对接条件指令和循环指令，通过指令绘制图形元素。

在本发明的一些实施例中，上述图形元素包括封闭式图元和开放性图元。

在本发明的一些实施例中，上述人机交互模块包括键盘交互子模块和鼠标交互子模块，其中：

键盘交互子模块，用于将封闭式图元与键盘对象进行对接，并录入键盘调用函数实现人机交互；

鼠标交互子模块，用于封闭式图元与鼠标对象进行对接，并录入鼠标调用函数实现人机交互。

在本发明的一些实施例中，该分层分布式图形设计系统还包括定位模块，用于基于像素和小数对绘制窗口的矩形区域进行定位。

在本发明的一些实施例中，该分层分布式图形设计系统还包括文字处理模块，用于设置标签或属性对文字进行处理，实现文字处理功能。

在本发明的一些实施例中，上述分层语法是指每个图元占一行代码，每行起始位置为数字，每行数字表示该图元的层次。

在本发明的一些实施例中，上述分布式存储方式包括本地存储和网络服务器存储。

本发明实施例至少具有如下优点或有益效果：

本发明实施例提供一种分层分布式图形设计系统，解决了现有技术中图形交互界面设计难度较大的技术问题，本系统采用分层语法并结合分布式存储的方法对图形元素进行设计，可直接与用户的程序设计系统进行对接，有效简化了设计难度，提高了图形交互界面设计效率。采用层式图元设计，每行开始的数字表示该图形元素的层次。系统中的封闭性图元可以嵌套使用。支持像素定位和小数定位；支持条件(IF)和循环(LOOP)指令、支持列表、字典类型、支持面向对象编程；采用分布式存储方式对图元文件进行存储，方便后续调用。还可以自定义设计图元风格，对图元文件中的各个图形元素进行风格调整；进一步提高设计效果。且本系统还支持公式编辑并录入数学符号，可轻松绘制出数学公式，满足多种绘制需求。还可以通过调用函数进行图形绘制，简单方便快捷。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明实施例一种分层分布式图形设计系统的原理框图；

图2为本发明实施例一种分层分布式图形设计系统的图元绘制窗口效果图；

图3为本发明实施例一种分层分布式图形设计系统的组合使用设计图；

图4为本发明实施例一种分层分布式图形设计系统的N次幂绘制示意图。

图标：100、分层式图元模块；110、注释子模块；120、语法限定子模块；130、图元设计子模块；140、变量子模块；150、指令子模块；200、人机交互模块；210、键盘交互子模块；220、鼠标交互子模块；300、分布式存储模块；400、图元风格模块；500、数学函数模块；600、定位模块；700、文字处理模块。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步定义和解释。

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

实施例

如图1所示，第一方面，本发明实施例提供一种分层分布式图形设计系统，包括分层式图元模块100、人机交互模块200、分布式存储模块300、图元风格模块400以及数学函数模块500，其中：

分层式图元模块100，用于建立并根据分层语法绘制图形元素，生成图元文件；上述分层语法是指每个图元占一行代码，每行起始位置为数字，每行数字表示该图元的层次。

先绘制一个基础图元，如下：

@GUI

1 WINDOW id＝"a"

；分号开头的是注释

2 RECTANGLE x＝0.0 y＝0.0 width＝0.5 height＝0.5 sleep＝0fill＝red

3 RECTANGLE x＝0.2 y＝0.2 width＝0.3 height＝0.3 sleep＝0 fill＝red

4 TEXT caption＝"My id is zhang xiao ping..."ml＝off mouse＝mkeyboard＝k

2 RECT x＝0.4 y＝0.4 width＝0.6 height＝0.6 sleep＝0 image＝"D:\test1.bmp"

3 TEXT caption＝c ml＝on

2 ELIPSE x＝0.5 y＝0.5 width＝0.5 height＝0.5

3 ELIPSE x＝0.5 y＝0.5 width＝0.5 height＝0.5

2 SQUARE x＝0.2 y＝0.6 width＝0.3

2 CIRCLE x＝0.2 y＝0.6 r＝0.3

3 LINE x1＝0.2 y1＝0.6 x2＝0.4 y2＝0.2

2 TRIANGLE x1＝0.2 y1＝0.5 x2＝0.4 y2＝0.6 x3＝0.5 y3＝0.8

2 BEZIER x1＝0.2 y1＝0.5 x2＝0.4 y2＝0.6 x3＝0.5 y3＝0.8

End

最终的窗口效果如图2所示。每个图元占一行代码，不能拆成多行；x＝0.2，“＝”左右不能加空格、tab。

上述图形元素包括封闭式图元和开放性图元。封闭式图元内部可以被填充、可以添加子图元；开放性图元不行。封闭性图元，如果不指定x,y,width,height，则其默认值为0,0,1,1，意为占满上层矩形区；sleep属性表示画完该图元N微秒后绘制下个图元；alpha表示该图元的透明度，window的auto属性为“on”，表示当用户用鼠标拖拽改变窗口大小时，窗口内的图元按照新窗口大小重新计算并绘制。

封闭性图元：

WINDOW绘制一个标准的Windows窗口，带标题栏、最大化、最小化、关闭按钮；RECTANGLE绘制带边线的矩形区域；RECT不带边线的矩形区域，主要用于用于定位、显示图像；ROUNDRECT圆角矩形；ELIPSE绘制椭圆区域；SQUARE绘制正方形区域；CIRCLE绘制圆形；TRIANGLE绘制三角形；

开放性图元：TEXT绘制多行、单行文本；color＝red文本颜色；size＝5文本大小；position指向当前键盘输入字符的位置，如果输入一个可见字符，在当前位置添加该字符；如果输入控制字符，删除、后退等，由C++处理该字符串，系统需要计算position指向的文本加入一个标记，比如画一个指向箭头；-1意为当前文本区不可编辑。ml＝off默认，表示单行显示，遇到\n或者\r\n，忽略，不换行。Ml＝on表示开启多行显示，遇到\n或者\r\n，会换行显示。Ab＝on多行文本模式下，当一行的字符数很多时，自动换行显示；off则表示无限文本向右扩展(但是超出矩形范围的不会显示)，直到遇到换行符。LINE绘制直线；ARC弧线；BEZIER贝塞尔曲线。

本系统通过组合使用以上平面几何图元，代替传统的面向过程、面向对象图形设计中的菜单、单选框、多选框、文本框、多行文本、面板等各种图形控件。注意：N+1层图元可能会覆盖N层图元；同一层图元，依次按行绘制。

组合使用例子：

组合使用REGTANGLE和TEXT就可以得到绘制软件中常见的菜单栏(MENU)：

@GUI

1 WINDOW id＝"menutest"

2 RECTANGLE id＝"r1"x＝0.0 y＝0.0 width＝0.1 height＝0.1 sleep＝0fill＝red

3 TEXT caption＝"文件"

2 RECTANGLE id＝"r2"x＝0.0 y＝0.1 width＝0.2 height＝0.1 sleep＝0fill＝red

3 TEXT caption＝"工具"

2 RECTANGLE id＝"r3"x＝0.0 y＝0.2 width＝0.3 height＝0.1 sleep＝0fill＝red

3 TEXT caption＝"视图"

2 RECTANGLE id＝"r4"x＝0.0 y＝0.3 width＝0.4 height＝0.1 sleep＝0fill＝red

3 TEXT caption＝"This is A Rect"

End

以上设计最终的效果如图3所示。

按照上述分层语法格式，编程思路更清晰、更容易；要实现分析GUI源代码，绘制各个图元(不包括程序设计语言中的变量、声明、函数等)，仅需1000多行代码即可，代码规模小了20倍以上，大大减少了代码编程量，提高了效率。

进一步地，上述分层式图元模块100包括注释子模块110、语法限定子模块120和图元设计子模块130，其中：语法限定子模块120，用于录入并存储程序设计语言的注释数据；语法限定子模块120，用于设定分层语法；图元设计子模块130，用于根据程序设计语言的注释数据和分层语法绘制图形元素，生成图元文件。

几乎所有的程序设计语言都有注释，而且多数都有单行注释和块注释两种方式；块注释通常可以嵌套使用。逐步注释掉一些代码然后查看程序的运行情况是非常好用的调试方法。几乎所有的程序设计语言都能注释，也都能打印，但不是所有的程序设计语言都有调试工具。而且，学习调试工具可能也需要更多的脑力精力。因此采用注释的方式可有效减少后续的编程工作，直观清晰。分号开头是单行注释，以@ZHUSHI开始的是块注释；块注释，可以嵌套使用；以END结束。

例如：

@GUI

1 WINDOW auto＝on

2 RECTANGLE x＝0.0 y＝0.0 width＝0.5 height＝0.5

END

以上代码，将在Windows桌面上绘制一个窗口，该窗口内，绘制一个矩形。

进一步地，上述分层式图元模块100包括变量子模块140，用于设定绘制变量类型。支持整型、浮点、字符串、列表、字典、mouse和keyboard类型的变量。

进一步地，上述分层式图元模块100包括指令子模块150，用于对接条件指令和循环指令，通过指令绘制图形元素。

本系统还支持条件指令和循环指令，通过循环指令和列表变量简化代码。

人机交互模块200，用于将图形元素与处理对象进行对接，并录入对象函数实现人机交互；

进一步地，上述人机交互模块200包括键盘交互子模块210和鼠标交互子模块220，其中：键盘交互子模块210，用于将封闭式图元与键盘对象进行对接，并录入键盘调用函数实现人机交互；鼠标交互子模块220，用于封闭式图元与鼠标对象进行对接，并录入鼠标调用函数实现人机交互。

在本发明的一些实施例中，封闭性图形元素可以指定键盘、鼠标处理对象。

一、鼠标对象

@GUI

1 WINDOW id＝"a"

2 RECTANGLE id＝"JuXing1"x＝0.0 y＝0.0 widht＝0.8 height＝1.0 mouse＝m1

2 RECTANGLE id＝"JuXing2"x＝0.0 y＝0.8 width＝1.0 height＝1.0 mouse＝m2

3 RECTANGLE x＝0.0 y＝0.0 width＝1.0 height＝0.1

4 TEXT id＝“Text1”caption＝"OPEN"

3 RECTANGLE x＝0.1 y＝0.0 width＝1.0 height＝0.2

4 TEXT caption＝"Test"

END

；子图元处理函数会覆盖父图元的处理函数

@m1.click

a＝1b＝a

；查改

$JuXing1.x＝0.2

；增删

；为@gui添加一行节点这里将在指定节点之后添加一个节点，该函数不做图元层次检查，可以在第一层图元后添加第三层图元。也就是说，即使PUSH成功了，也不表示窗口描述就是正确的。

；系统在绘制图元时，会做检查，如果检查到树形结构中，第一层图元节点后面紧接着有个第三层子节点，则报错。

#PUSH JuXing2 2RECTANGLE x＝0.1 y＝0.0 width＝1.0 height＝0.2

#DELETE JuXing1

；窗口数据结构改变，需要重新绘制。

#REDRAW

END

还可以进行多选，程序设计如下：

程序设计者通过矩形区域填充颜色判断该矩形区域是否被选中，比如：当用户点击矩形区域内，背景填充为红色，表示选中该选项；变成蓝色表示未选中。

还可以进行单选，以下设计代码实现类似单选框的功能：

以上，是横向的单选，红色的矩形表示选中，蓝色表示未选中。用户可以调整REGTANGLE的各项值，让单选框竖起来。

mouse对象的函数如下，和javascrtipt里的鼠标函数尽量保持一致：

click：单击；Rclick：右击；dblclick：双击；mousedown：鼠标按下；mouseup：鼠标抬起；mouseover：鼠标悬浮；mouseout：鼠标离开，进入子图元也会调用该函数。mousemove：鼠标移动；mouseenter：鼠标进入；mouseleave：鼠标离开，进入子图元不会调用该函数，离开整个区域才调用。

键盘对象：

2 RECTANGLE keyboard＝k

以上矩形将使用对象k处理键盘事件，k是一个键盘对象，设计者实现对象k的各个键盘响应函数；同样，子图元的键盘处理对象会覆盖上一层的键盘处理对象。

显示输入文本

@GUI

1 WINDOW id＝"文本编辑"

2 RECTANGLE x＝0.0 y＝0.0 width＝0.8 height＝1.0 keyboard＝k

3 TEXT id＝"文本区"caption＝””position＝1

END

@k.press

(CALL Flush_TEXT$文本区)

#REDRAW

END

CALL调用一个C++或者Java函数；用户输入可能是字母、符号，也可能是del、backspace等控制字符，程序设计者需要在Flush_TEXT里处理不同的控制字符、在相应的位置添加键盘输入字符。

还支持滑动条定位：

TEXT开启多行文本模式时，字符串可能很多，超出矩形区域；超出的部分，不会显示。因此，我们需要增加一个矩形，用于控制哪些文本应该显示出来。在面向对象库中，该控件通常被称为“滚动条“或”滑动条”。

我们需要三个REGTANGLE，第三个REGTANGLE用于定位；当用户点击定位矩形时，系统会判断鼠标点击点分割矩形横向或者纵向的比例，从而显示应该显示的字符串：

@GUI

1 WINDOW id＝"a"

2 REGTANGLE id＝”JuXing1”

3 REGTANGLE x＝0.0 y＝0.0 height＝1.0 width＝0.8

4 TEXT id＝“文本区”caption＝c

；下面是定位矩形

3REGTANGLE fill＝blue mouse＝s id＝”Slide”x＝0 y＝0.8 height＝1.0width＝1.0

END

@S.click

N＝(CALL GET_POSITION)

；GET_POSITION是一个C++/Java函数，由用户实现，用于取得鼠标点击位置占据矩形高度或者宽度的比例。得到的N可能是1/2或者2/3，任何一个小于等于1的比例。

d＝(CALL GET_N c N)

；GET_N也是C++函数，由用户实现，按比例N取得字符串C的子串。这两个C++函数可以合并成一个函数，调用后直接返回应该显示的字符串。

$文本区.caption＝d

END

以上，就简单实现了一个和滑动条功能类似的定位矩形。

还可以支持标签页。主流的浏览器都实现了多标签页浏览，用户可以点击不同的标签页，在不同的页面之间切换。我们的系统实现标签页的方法如下：

注意，PUSH_BACK和PUSH的区别：PUSH_BACK在第一个参数指定节点的最后一个子节点之后添加节点。

分布式存储模块300，用于将图元文件采用分布式存储方式进行存储；上述分布式存储方式包括本地存储和网络服务器存储。

一、使用设计文件

2REGTANGLE id＝”JuXing1”x＝0.1 y＝＝0.1 height＝0.4 width＝0.4 ref＝FILE://D:/book.gui

2REGTANGLE id＝”JuXing2”x＝0.1 y＝＝0.1 height＝0.4 width＝0.4 ref＝GUI://www.163.com/book.gui

当指定ref时，表示该图元是一个链接，可以点击跳转到另一个窗口，类似html里的<A>标签。以上，FILE表示本地文件，GUI表示远程服务器文件；当用户点击点击JuXing1、JuXing2时，将显示book.gui窗口。

注意：当使用ref属性时，mouse属性无效。

二、仅使用设计文件中的图元

也可以使用远程设计文件中的若干图元：

2 REGTANGLE id＝”JuXing1”x＝0.1 y＝＝0.1 height＝0.4 width＝0.4

2 GE ref＝GUI://www.163.com/book.gui id＝"JuXing1"

这里将绘制book.gui中的名为JuXing1的图元及其子图元。

三、GET和POST

HTTP协议中，最常用的可能是GET和POST，前者用于向http服务器请求数据，后者用于提交用户填写的表单数据。同样，我们的系统也可以使用GET和POST方法取得或者提交数据。GET方法用于实现ref属性获取GUI设计文件，也就是上文提到的：

2 REGTANGLE id＝”JuXing2”x＝0.1 y＝＝0.1 height＝0.4 width＝0.4ref＝GUI://www.163.com/book.gui

2 GE ref＝GUI://www.163.com/book.gui id＝"JuXing1"

这两种情况，都向GUI服务器发送GET指令，其指令内容分别是：

GET GUI://www.163.com/book.gui

GET GE GUI://www.163.com/book.gui JuXing1

服务器会传送book.gui给客户端，客户端绘制该窗口设计文件。

Html中的POST方法用在form标签中，用于向服务器提交表单数据：

<form name＝"input"action＝"html_form_action.php"method＝"get">

Username:<input type＝"text"name＝"user">

<input type＝"submit"value＝"Submit">

</form>

页面会把用户填写的数据提交给服务器上得action_page.php程序处理。

本系统使用如下：

2 REGTANGLE id＝”JuXing1”x＝0.1 y＝＝0.1 height＝0.4 width＝0.4 ref＝"GUI://www.163.com/action_page1.php"method＝"post"

3INPUTtype＝”Textvalue＝”zhangfei”id＝”name”ref＝"GUI://www.163.com/action_page2.php"method＝"post"

3 INPUT type＝”Text”value＝18 id＝”age”

3 INPUT type＝”submit”value＝”提交数据”

；提交本层所有INPUT数据

同样，子图元对应的服务器处理程序将覆盖上层图元：当点击“提交数据按钮时，$name的数据交给action_page2.php处理；其他INPUT则由action1_page1.php获得数据并处理。

图元风格模块400，用于设定图元风格，生成并导入风格文件至图元文件中，对图元文件中的各个图形元素进行风格调整；

可以自定义图元的一些风格，写法如下：

@TEXT

background:#ffffff；/*背景颜色*/

color:red；/*字体颜色*/

END

同时，需要在gui设计中引用该文件：

#INCLUDE Style.css

数学函数模块500，用于录入数学符号并引入公式编辑器，以实现函数绘图。

例如：

N次幂：

@GUI

2 RECTANGLE id＝”幂函数”

3 RECTANGLE id＝＝”底数”width＝0.6 mouse＝m keyboard＝k

4 TEXT caption＝”X”

3 RECTANGLE x＝0.6 width＝0.4 height＝0.4

4 TEXT caption＝”3”

END

以上代码段，将显示Xⁿ---X的n次幂，最终效果如图4所示。

函数绘图：

以上所有的程序，在传统的以行为单位的文本编辑软件(记事本)里即可完成，以下代码，则需要在上一节描述的支持公式编辑的数学软件中完成。

直角坐标：

；指定直角坐标系，1个单位为10像素

COORDINATE 1unit＝10pixs

我们可以同时画多个函数：

COORDINATE 1unit＝10pixs y＝2x y＝x+5

y＝sinθ

我们可以更改，系统的显示矩形大小：

RECTANGLE width＝0.5 height＝0.5

注意，本数学系统是按行交互的，我们并不需要指定行号。当用户输入以上公式，并点击”计算”按钮时，系统将计算、绘图。

代数方程组：

SOLVE x+y＝12

这里会画出两个方程的函数图像，并求解，也就是两个求出两个函数图像的交点坐标。

极坐标：POLAR 1unit＝10pixsρ＝1

按照惯例，用希腊字母(ρθ)来代表极坐标，ρ是到原点的距离，θ是和原点的连线与极轴的夹角。

本系统可实现如下两种函数调用：

(fun args args2...)--调用本系统用户编写的fun函数

(CALL fun args args2...)--调用C++Java的fun函数

关键词、函数前的符号@#

用于强调一个代码块的开始，以END结束；C/C++的宏指令#define、#ifdef；Perl的变量；bash的函数参数，使用$1$2$#，都这样用。在本系统中能够，@代表一个代码块或者函数、#代表指令、$代表GUI的一个节点。

为了解决现有技术中图形交互界面设计难度较大的技术问题，本系统采用分层语法并结合分布式存储的方法对图形元素进行设计，可直接与用户的程序设计系统进行对接，有效简化了设计难度，提高了图形交互界面设计效率。采用层式图元设计，每行开始的数字表示该图形元素的层次。系统中的封闭性图元可以嵌套使用。支持像素定位和小数定位；支持条件(IF)和循环(LOOP)指令、支持列表、字典类型、支持面向对象编程；采用分布式存储方式对图元文件进行存储，方便后续调用。还可以自定义设计图元风格，对图元文件中的各个图形元素进行风格调整；进一步提高设计效果。且本系统还支持公式编辑并录入数学符号，可轻松绘制出数学公式，满足多种绘制需求。还可以通过调用函数进行图形绘制，简单方便快捷。

在本发明的一些实施例中，该分层分布式图形设计系统还包括定位模块600，用于基于像素和小数对绘制窗口的矩形区域进行定位。

面向对象库大都靠像素定位，我们的系统增加了小数定位(百分比定位)--无需指定具体像素值，只需要指定距离上一层矩形区域左上角、右下角的长宽比例即可定位。

在本发明的一些实施例中，该分层分布式图形设计系统还包括文字处理模块700，用于设置标签或属性对文字进行处理，实现文字处理功能。

用户可以按照自己的需要添加功能，比如：TEXT显示的文本相对单调，不能和Word和html相比，本系统可以增各种标签或者属性，以支持丰富的文字处理功能。

以上仅为本发明的优选实施例而已，并不用于限制本发明，对于本领域的技术人员来说，本发明可以有各种更改和变化。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其它的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化囊括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。

Claims (10)

1.一种分层分布式图形设计系统，其特征在于，包括分层式图元模块、人机交互模块、分布式存储模块、图元风格模块以及数学函数模块，其中：

分层式图元模块，用于建立并根据分层语法绘制图形元素，生成图元文件；

人机交互模块，用于将图形元素与处理对象进行对接，并录入对象函数实现人机交互；

分布式存储模块，用于将图元文件采用分布式存储方式进行存储；

图元风格模块，用于设定图元风格，生成并导入风格文件至图元文件中，对图元文件中的各个图形元素进行风格调整；

数学函数模块，用于录入数学符号并引入公式编辑器，以实现函数绘图。

2.根据权利要求1所述的一种分层分布式图形设计系统，其特征在于，所述分层式图元模块包括注释子模块、语法限定子模块和图元设计子模块，其中：

语法限定子模块，用于录入并存储程序设计语言的注释数据；

语法限定子模块，用于设定分层语法；

图元设计子模块，用于根据程序设计语言的注释数据和分层语法绘制图形元素，生成图元文件。

3.根据权利要求1所述的一种分层分布式图形设计系统，其特征在于，所述分层式图元模块包括变量子模块，用于设定绘制变量类型。

4.根据权利要求1所述的一种分层分布式图形设计系统，其特征在于，所述分层式图元模块包括指令子模块，用于对接条件指令和循环指令，通过指令绘制图形元素。

5.根据权利要求1所述的一种分层分布式图形设计系统，其特征在于，所述图形元素包括封闭式图元和开放性图元。

6.根据权利要求5所述的一种分层分布式图形设计系统，其特征在于，所述人机交互模块包括键盘交互子模块和鼠标交互子模块，其中：

键盘交互子模块，用于将封闭式图元与键盘对象进行对接，并录入键盘调用函数实现人机交互；

鼠标交互子模块，用于封闭式图元与鼠标对象进行对接，并录入鼠标调用函数实现人机交互。

7.根据权利要求1所述的一种分层分布式图形设计系统，其特征在于，还包括定位模块，用于基于像素和小数对绘制窗口的矩形区域进行定位。

8.根据权利要求1所述的一种分层分布式图形设计系统，其特征在于，还包括文字处理模块，用于设置标签或属性对文字进行处理，实现文字处理功能。

9.根据权利要求1所述的一种分层分布式图形设计系统，其特征在于，所述分层语法是指每个图元占一行代码，每行起始位置为数字，每行数字表示该图元的层次。

10.根据权利要求1所述的一种分层分布式图形设计系统，其特征在于，所述分布式存储方式包括本地存储和网络服务器存储。

Images