一种在线绘制图形元素的方法及装置与流程

本发明实施例涉及计算机技术领域，具体涉及一种在线绘制图形元素的方法及装置。

背景技术：

目前流程图、uml(unifiedmodelinglanguage，统一建模语言)、组织结构图、ui(userinterface，用户界面)原型图、网络拓扑图、bpmn(businessprocessmodelingnotation，业务流程建模与标注)、思维导图、evc(企业价值链图)、epc(事件过程链图)、魏朱商业模式图等图形在绘制时，通常需要下载并安装绘制图形的工具，安装工具后，打开工具绘制图形。

由于工具安装在本地且占用较大的本地资源，工具的启动通常较慢，且工具的操作通常比较复杂，需要较强的工具使用技巧，因此用户使用不便。

技术实现要素：

为了解决现有技术存在的问题，本发明的至少一个实施例提供了一种在线绘制图形元素的方法及装置。

第一方面，本发明实施例提出一种在线绘制图形元素的方法，所述方法包括：

加载在线绘制图形元素的网页页面，所述网页页面中展示有至少一个图形元素；

解析所述网页页面预设的图形元素配置文件，所述图形元素配置文件中包括：多个图形元素的标识、每个所述图形元素的绘制轨迹以及属性；

检测图形元素的选择操作；

确定所述选择操作对应的图形元素的标识；

基于所述选择操作对应的图形元素的标识以及所述图形元素配置文件，在所述网页页面中绘制图形元素。

在一些实施例中，所述网页页面包括：绘制图形元素的第一区域以及展示图形元素的第二区域，所述第二区域中展示有至少一个图形元素；

相应地，所述检测图形元素的选择操作，包括：检测所述第二区域中图形元素的选择操作；

相应地，在所述网页页面中绘制图形元素，包括：在所述第一区域中绘制图形元素。

在一些实施例中，所述方法还包括：

检测到鼠标指针位于所述网页页面中展示的图形元素的位置后，确定该位置的图形元素的标识；

基于该位置的图形元素的标识以及所述图形元素配置文件，确定该位置的图形元素的绘制轨迹以及属性；

基于该位置的图形元素的绘制轨迹以及属性，在所述网页页面中展示窗口，所述窗口内放大显示该位置的图形元素。

在一些实施例中，所述方法还包括：

检测所述选择操作对应的图形元素的拖拽操作；

相应地，在所述网页页面中绘制图形元素，包括：在所述拖拽操作的停止位置绘制图形元素。

在一些实施例中，所述方法还包括：

将所述选择操作发送给后台服务器以及将绘制的图形元素存储到所述网页页面对应的本地存储空间中。

第二方面，本发明实施例还提出一种在线绘制图形元素的装置，所述装置包括：

加载单元，用于加载在线绘制图形元素的网页页面，所述网页页面中展示有至少一个图形元素；

解析单元，用于解析所述网页页面预设的图形元素配置文件，所述图形元素配置文件中包括：多个图形元素的标识、每个所述图形元素的绘制轨迹以及属性；

检测单元，用于检测图形元素的选择操作；

第一确定单元，用于确定所述选择操作对应的图形元素的标识；

绘制单元，用于基于所述选择操作对应的图形元素的标识以及所述图形元素配置文件，在所述网页页面中绘制图形元素。

在一些实施例中，所述网页页面包括：绘制图形元素的第一区域以及展示图形元素的第二区域，所述第二区域中展示有至少一个图形元素；

所述检测单元，用于检测所述第二区域中图形元素的选择操作；

所述绘制单元，用于基于所述选择操作对应的图形元素的标识以及所述图形元素配置文件，在所述第一区域中绘制图形元素。

在一些实施例中，所述装置还包括：

第二确定单元，用于检测到鼠标指针位于所述网页页面中展示的图形元素的位置后，确定该位置的图形元素的标识；

第三确定单元，用于基于该位置的图形元素的标识以及所述图形元素配置文件，确定该位置的图形元素的绘制轨迹以及属性；

展示单元，用于基于该位置的图形元素的绘制轨迹以及属性，在所述网页页面中展示窗口，所述窗口内放大显示该位置的图形元素。

在一些实施例中，所述检测单元，还用于检测所述选择操作对应的图形元素的拖拽操作；

所述绘制单元，用于基于所述选择操作对应的图形元素的标识以及所述图形元素配置文件，在所述拖拽操作的停止位置绘制图形元素。

在一些实施例中，所述装置还包括：

发送单元，用于将所述选择操作发送给后台服务器；

存储单元，用于将绘制的图形元素存储到所述网页页面对应的本地存储空间中。

可见，本发明实施例的至少一个实施例中，通过在网页页面中绘制图形元素，无需安装工具，绘制的图形元素可通过网络存储到后台服务器中，减少本地软硬件资源的消耗。另外，通过预设图形元素配置文件，用户只需要进行图形元素的选择操作，即可自动在网页页面中绘制图形元素，减少用户的操作复杂度，提高用户体验。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种在线绘制图形元素的方法流程图；

图2为本发明实施例提供的一种在线绘制图形元素的装置框图；

图3为本发明实施例提供的一种加载在线绘制图形元素的网页页面示意图；

图4为本发明实施例提供一种图形元素被选中的状态示意图；

图5为被选中的图形元素进行移动操作前的初始位置；

图6为被选中的图形元素进行移动操作后的停止位置。

具体实施方式

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

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。

第一方面，如图1所示，本实施例公开一种在线绘制图形元素的方法，所述方法可包括以下步骤101至105：

101、加载在线绘制图形元素的网页页面，所述网页页面中展示有至少一个图形元素。图3为实施例提供的一种加载在线绘制图形元素的网页页面示意图。

102、解析网页页面预设的图形元素配置文件，所述图形元素配置文件中包括：多个图形元素的标识、每个图形元素的绘制轨迹以及属性。

103、检测图形元素的选择操作。图4为实施例提供的一种图形元素被选中的状态示意图。

104、确定选择操作对应的图形元素的标识。

105、基于选择操作对应的图形元素的标识以及图形元素配置文件，在网页页面中绘制图形元素。

本实施例中，该方法可应用于任意电子设备中，在一些实施例中，电子设备可以包括诸如智能手机、笔记本电脑、平板电脑、车载设备等移动终端以及诸如智能电视、台式计算机、服务器等固定终端。

本实施例中，用户可以打开电子设备中安装的浏览器，通过在浏览器中输入用于绘制图形元素的网址后，浏览器可打开在线绘制图形元素的网页页面。浏览器可以理解为该方法的执行主体。

本实施例中，在线绘制图形元素的网页页面中展示有至少一个图形元素。不同图形具有不同的图形元素，同一图形的各图形元素的集合构成该图形的图形元素库。在线绘制图形元素的网页页面可展示部分图形的图形元素库，用户可点击网页页面提供的“更多图形”按钮来选择其他图形的图形元素库。

本实施例中，预设的图形元素配置文件例如为js(javascript)配置文件。js配置文件中预先设置图形元素的标识(id，identification)、图形元素的绘制轨迹以及图形元素的属性。图形元素的属性包括但不限于：样式属性、位置属性和文本属性，其中，样式可理解为菜单栏所列出的一系列操作，样式也可理解为工具栏所示出的功能，当然，工具栏除了集成样式，还可集成样式之外的其他功能。图形元素的属性具体可以包括但不限于：宽、高、颜色、坐标、锚点数量及位置、是否可被移动、是否可被连接线连接以及是否被锁定中的一个或多个。图形元素被锁定后无法再进行编辑。

本实施例中，浏览器加载在线绘制图形元素的网页页面时，会动态引用js配置文件，进而解析js配置文件。浏览器可将js配置文件存储到该网页页面对应的本地存储空间中。

本实施例中，用户可以通过键盘、触摸屏等输入设备输入图形元素的选择操作。图形元素的选择操作例如为点击或者长按。

本实施例中，选择操作对应的图形元素也即用户选择的图形元素。浏览器可确定用户选择的图形元素的标识。

本实施例中，基于选择操作对应的图形元素的标识以及图形元素配置文件，在网页页面中绘制图形元素，具体包括以下步骤一和步骤二：

步骤一、基于选择操作对应的图形元素的标识以及图形元素配置文件，确定选择操作对应的图形元素的绘制轨迹以及属性。

步骤二、基于选择操作对应的图形元素的绘制轨迹以及属性，在网页页面中绘制图形元素。

本实施例中，在网页页面中绘制的图形元素处于被选中的状态，且网页页面中会显示图形元素的各锚点。用户可通过点击图形元素，变更被选择的图形元素。

本实施例中，由于是在网页页面中绘制图形元素，因此，绘制的图形元素可通过网络存储到后台服务器中。当用户关闭网页页面后，绘制的图形元素没有存储在本地，不占用本地资源。当用户再次打开绘制图形元素的网页页面时，可从后台服务器中下载绘制的图形元素进行后续编辑。

在一些实施例中，绘制的图形元素也可存储在本地，实现本地远程双存储，本地存储后，当用户再次打开绘制图形元素的网页页面时，可以快速打开本地存储的图形元素。

图5示出了被选中的图形元素进行移动操作前的初始位置，移动操作例如为长按拖动，图6示出了被选中的图形元素进行移动操作后的停止位置。

可见，本实施例公开的在线绘制图形元素的方法，通过在网页页面中绘制图形元素，无需安装工具，绘制的图形元素可通过网络存储到后台服务器中，减少本地软硬件资源的消耗。另外，通过预设图形元素配置文件，用户只需要进行图形元素的选择操作，即可自动在网页页面中绘制图形元素，减少用户的操作复杂度，提高用户体验。

在一些实施例中，在线绘制图形元素的网页页面可包括但不限于：绘制图形元素的第一区域以及展示图形元素的第二区域。其中，第二区域中展示有至少一个图形元素。

本实施例中，检测图形元素的选择操作具体为：检测第二区域中图形元素的选择操作。在网页页面中绘制图形元素具体为：在第一区域中绘制图形元素。

本实施例中，通过将网页页面划分不同的功能区域，使得用户能够直观了解可绘制的图形元素以及绘制图形元素的“画布”，提升用户的体验。

在一些实施例中，在线绘制图形元素的方法还可包括以下步骤一至步骤三：

步骤一、检测到鼠标指针位于网页页面中展示的图形元素的位置后，确定该位置的图形元素的标识。

步骤二、基于该位置的图形元素的标识以及图形元素配置文件，确定该位置的图形元素的绘制轨迹以及属性。

步骤三、基于该位置的图形元素的绘制轨迹以及属性，在网页页面中展示窗口，所述窗口内放大显示该位置的图形元素。

本实施例中，可预先设置网页页面中展示的不同图形元素的位置与标识之间的对应关系。当检测到鼠标指针位于某个图形元素的位置后，即可基于该对应关系，确定该图形元素的标识。

本实施例中，网页页面中展示的图形元素的位置可以是该图形元素所占用的区域，也即位置不是某个坐标点，而是若干坐标点构成的区域。鼠标指针位于图形元素的位置可以理解为鼠标指针处于该图形元素所占用的区域中。

本实施例中，鼠标指针处于图形元素所占用的区域中可以为鼠标指针悬浮于图形元素上。

本实施例中，确定图形元素的标识后，即可从图形元素配置文件中确定该图形元素对应的配置信息，包括该图形元素的绘制轨迹以及属性。

本实施例中，确定图形元素的绘制轨迹以及属性后，可在网页页面绘制图形元素的第一区域展示窗口，窗口内放大显示图形元素。可见，网页页面展示图形元素的第二区域中展示的图形元素可使用占用区域较少的缩略图，使得有限的第二区域展示更多的图形元素。同时，窗口内放大显示图形元素，便于用户直观看到被选择的图形元素的细节设计，提高用户体验。

本实施例中，窗口可以为动态窗口的位置可随鼠标指针的位置进行改变。例如，当鼠标指针横向移动时，动态窗口的位置不变；当鼠标指针纵向移动时，动态窗口的位置也纵向移动。动态窗口的设计更符合用户的视觉习惯。

在一些实施例中，在线绘制图形元素的方法还可包括步骤：检测选择操作对应的图形元素的拖拽操作。

本实施例中，在网页页面中绘制图形元素具体为：在拖拽操作的停止位置绘制图形元素。

本实施例中，拖拽操作例如为长按鼠标左键并拖动鼠标，若检测到拖拽操作并且鼠标指针移动到“画布”(画布即绘制图形元素的第一区域)上，则被拖拽的图形元素会被绘制到“画布”中。

本实施例中，被绘制到“画布”中的图形元素被设置为选中状态，该图形元素周围会出现配置文件中预置的锚点及旋转控件，当鼠标指针位于旋转控件上，会显示旋转方向的指示信息，用户拖动鼠标即可旋转图形元素。

在一些实施例中，在线绘制图形元素的方法还可包括步骤：将选择操作发送给后台服务器以及将绘制的图形元素存储到网页页面对应的本地存储空间中。

本实施例中，绘制图形元素的网页页面可提供新建绘图文件的按钮，用户点击该按钮可在绘制图形元素的网页页面中新建绘图文件。

本实施例中，新建的绘图文件作为一个变量被存到当前的内存中，每当用户拖拽一个图形元素到“画布”后，该绘图文件中生成对应的图形元素，也即绘图文件对应的变量中会增加绘制的图形元素的信息。

本实施例中，用户对绘图文件的任何编辑均会对绘图文件对应的变量进行编辑。绘图文件对应的变量会被存储到网页页面对应的本地存储(localstorage)空间中。

本实施例中，包括选择操作在内的任意操作指令也会被存储到本地存储空间中，同时也会被发送到后台服务器，后台服务器存储接收到的任意操作指令。后台服务器会根据接收到的操作指令在后台服务器中动态增加或者编辑源内容，并且在后台服务器的数据库进行实时存储，把最终存储的结果也会放到后台服务器的缓存中，方便下次引用时，直接从缓存中读取，而非从数据库中读取。

如图2所示，本发明实施例提出一种在线绘制图形元素的装置，该装置可包括以下单元：加载单元21、解析单元22、检测单元23第一确定单元24以及绘制单元25。各单元具体说明如下：

加载单元21，用于加载在线绘制图形元素的网页页面，所述网页页面中展示有至少一个图形元素；

解析单元22，用于解析所述网页页面预设的图形元素配置文件，所述图形元素配置文件中包括：多个图形元素的标识、每个所述图形元素的绘制轨迹以及属性；

检测单元23，用于检测图形元素的选择操作；

第一确定单元24，用于确定所述选择操作对应的图形元素的标识；

绘制单元25，用于基于所述选择操作对应的图形元素的标识以及所述图形元素配置文件，在所述网页页面中绘制图形元素。

在一些实施例中，所述网页页面包括：绘制图形元素的第一区域以及展示图形元素的第二区域，所述第二区域中展示有至少一个图形元素；

所述检测单元23，用于检测所述第二区域中图形元素的选择操作；

所述绘制单元25，用于基于所述选择操作对应的图形元素的标识以及所述图形元素配置文件，在所述第一区域中绘制图形元素。

在一些实施例中，所述装置还可包括以下单元：

第二确定单元，用于检测到鼠标指针位于所述网页页面中展示的图形元素的位置后，确定该位置的图形元素的标识；

第三确定单元，用于基于该位置的图形元素的标识以及所述图形元素配置文件，确定该位置的图形元素的绘制轨迹以及属性；

展示单元，用于基于该位置的图形元素的绘制轨迹以及属性，在所述网页页面中展示窗口，所述窗口内放大显示该位置的图形元素。

在一些实施例中，所述检测单元23，还用于检测所述选择操作对应的图形元素的拖拽操作；

所述绘制单元25，用于基于所述选择操作对应的图形元素的标识以及所述图形元素配置文件，在所述拖拽操作的停止位置绘制图形元素。

在一些实施例中，所述装置还可包括以下单元：

发送单元，用于将所述选择操作发送给后台服务器；

存储单元，用于将绘制的图形元素存储到所述网页页面对应的本地存储空间中。

以上实施例公开的在线绘制图形元素的装置能够实现以上各实施例公开的在线绘制图形元素的方法的流程，为避免重复，在此不再赘述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。

虽然结合附图描述了本发明的实施方式，但是本领域技术人员可以在不脱离本发明的精神和范围的情况下做出各种修改和变型，这样的修改和变型均落入由所附权利要求所限定的范围之内。