CN115439578A - 一种基于Canvas的流程图绘制系统及方法 - Google Patents

Abstract

本申请公开了一种基于Canvas的流程图绘制系统及方法，可实现如下功能：响应于自定义图形的导入操作，将导入的自定义图形放置在Canvas画布上。用户为Canvas画布上的自定义图形添加目标功能属性，响应于该添加操作，自定义图形获取目标功能属性。目标功能属性对应有目标功能操作，用户可对添加有目标功能属性的自定义图形实施目标功能操作，则可按照目标功能操作编辑自定义图形。另外，还可将目标基础图形放置在Canvas画布上，对目标基础图形实施基础功能操作来编辑目标基础图形。用户为自定义图形和目标基础图形添加连接线，以获取绘制完成的流程图。如此，为导入的自定义图形添加目标功能属性，实现了对自定义图形的编辑操作，提高了用户绘制流程图的体验性。

Description

一种基于Canvas的流程图绘制系统及方法

技术领域

本申请涉及计算机技术领域，尤其涉及一种基于Canvas的流程图绘制系统及方法。

背景技术

目前，用户可使用流程图编辑软件绘制流程图。流程图编辑软件为用户提供常使用的基础图形，基于基础图形可实现流程图的绘制。

在流程图的绘制过程中，流程图编辑软件提供的基础图形能满足用户的大部分绘制需求。而当用户需使用特殊图形或专业图形等一系列自定义图形进行流程图绘制时，可将自定义图形导入流程图编辑软件中，基于导入的自定义图形和基础图形完成流程图的绘制。

但是，导入流程图编辑软件的自定义图形只具有图片属性，用户不能对自定义图形进行编辑，造成自定义图形和基础图形的适配性较差，用户的使用体验差。

发明内容

为了解决上述技术问题，本申请提供了一种基于Canvas的流程图绘制系统及方法，能够对导入的自定义图形进行编辑，实现了自定义图形和基础图形的适配。

为了实现上述目的，本申请提供的技术方案如下：

本申请提供一种基于Canvas的流程图绘制系统，所述系统包括：流程图编辑单元以及图形处理单元；所述流程图编辑单元包括流程图绘制模块、基础图形选择模块以及工具栏模块；所述图形处理单元包括自定义图形导入模块以及自定义图形属性处理模块；

所述流程图绘制模块，用于提供Canvas画布；

所述自定义图形导入模块，用于响应于自定义图形的导入操作，将导入的自定义图形放置在所述流程图绘制模块的Canvas画布上；

所述自定义图形属性处理模块，用于响应于对所述Canvas画布上的自定义图形的目标功能属性添加操作，为所述自定义图形添加目标功能属性；

所述基础图形选择模块，用于响应于对目标基础图形的选择操作，将所述目标基础图形放置在所述流程图绘制模块的Canvas画布上；

所述工具栏模块，用于提供针对所述自定义图形的目标功能操作、针对所述目标基础图形的基础功能操作以及添加连接线功能操作，响应于对所述自定义图形的目标功能操作，按照所述目标功能操作编辑所述自定义图形，响应于对所述目标基础图形的基础功能操作，按照所述基础功能操作编辑所述目标基础图形，响应于对所述自定义图形和所述目标基础图形的添加连接线操作，为所述自定义图形与所述目标基础图形添加连接线；所述目标功能操作与所述自定义图形被添加的目标功能属性相对应；

所述流程图编辑单元，用于获取由所述自定义图形、所述目标基础图形以及所述自定义图形与所述目标基础图形之间的连接线绘制而成的流程图。

可选地，当所述目标功能属性为锚点属性时，所述自定义图形属性处理模块，具体用于：

响应于对所述自定义图形的触发操作，选中所述自定义图形；

响应于对锚点属性功能的选择操作，确定为所述自定义图形添加的目标功能属性为所述锚点属性，将所述自定义图形的当前模式确定为选择锚点模式；

响应于对所述自定义图形中可编辑范围内的目标位置的触发操作，在所述目标位置添加锚点，以完成为所述自定义图形添加锚点属性。

可选地，所述自定义图形对应有自定义图形信息；所述自定义图形信息包括所述自定义图形上所述锚点的锚点属性信息；所述锚点属性信息包括所述锚点的锚点名称以及锚点位置信息；

所述锚点位置信息由所述自定义图形在所述Canvas画布上的位置信息以及所述自定义图形的中心位置与所述锚点的相对位置信息得到；所述自定义图形在所述Canvas画布上的位置信息为所述自定义图形的中心位置在所述Canvas画布上的位置信息。

可选地，所述自定义图形导入模块，还用于记录所述自定义图形在所述Canvas画布上的导入位置信息，当所述自定义图形在所述Canvas画布上拖动时，自动更新所述自定义图形在所述Canvas画布上的位置信息，根据所述自定义图形在所述Canvas画布上拖动时的位置信息绘制所述自定义图形的拖动路径，将所述拖动路径显示在所述Canvas画布上，并当所述自定义图形拖动结束时，取消所述拖动路径的显示。

可选地，当所述目标功能属性为锚点属性时，所述目标功能属性对应的目标功能操作为图形锚点操作。

可选地，当所述目标功能属性为图形缩放属性时，所述目标功能属性对应的目标功能操作为图形缩放操作。

可选地，当所述目标功能属性为文本框属性时，所述目标功能属性对应的目标功能操作为图形添加文本框操作。

可选地，所述系统还包括：流程图导出单元；

所述流程图编辑单元，还用于将绘制完成的流程图发送给所述流程图导出单元；

所述流程图导出单元，用于通过Base64编码，将所述绘制完成的流程图转换为目标格式文件输出。

可选地，所述系统还包括：装置组件封装单元；

所述装置组件封装单元，用于将所述流程图编辑单元、所述图形处理单元以及所述流程图导出单元封装为流程图绘制组件，并将所述流程图绘制组件注册为全局组件。

本申请还提供一种基于Canvas的流程图绘制方法，所述方法包括：

响应于自定义图形的导入操作，将导入的自定义图形放置在Canvas画布上；

响应于对所述Canvas画布上的自定义图形的目标功能属性添加操作，为所述自定义图形添加目标功能属性；

响应于对目标基础图形的选择操作，将所述目标基础图形放置在所述流程图绘制模块的Canvas画布上；

响应于对所述自定义图形的目标功能操作，按照所述目标功能操作编辑所述自定义图形；所述目标功能操作与所述自定义图形被添加的目标功能属性相对应；

响应于对所述目标基础图形的基础功能操作，按照所述基础功能操作编辑所述目标基础图形；

响应于对所述自定义图形和所述目标基础图形的添加连接线操作，为所述自定义图形与所述目标基础图形添加连接线；

获取由所述自定义图形、所述目标基础图形以及所述自定义图形与所述目标基础图形之间的连接线绘制而成的流程图。

通过上述技术方案可知，本申请具有以下有益效果：

本申请提供了一种基于Canvas的流程图绘制系统及方法，通过该系统可以实现如下功能：响应于自定义图形的导入操作，将导入的自定义图形放置在Canvas画布上。用户可为Canvas画布上的自定义图形添加目标功能属性，响应于目标功能属性的添加操作，自定义图形获取目标功能属性。目标功能属性对应有目标功能操作，用户可对添加有目标功能属性的自定义图形实施目标功能操作。响应于目标功能操作，按照目标功能操作编辑自定义图形。另外，还可将目标基础图形放置在Canvas画布上，并对目标基础图形实施基础功能操作，按照基础功能操作编辑目标基础图形。用户还可为自定义图形和目标基础图形添加连接线，将自定义图形和目标基础图形进行连接，以获取绘制完成的流程图。在本申请实施例中，可以为导入的自定义图形添加目标功能属性，以使用户可对添加了目标功能属性的自定义图形进行目标功能操作，以实现自定义图形的编辑。如此，提高了自定义图形和基础图形的适配性，提高了用户绘制流程图的体验性。

附图说明

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

图1为本申请实施例提供的一种基于Canvas的流程图绘制系统的结构示意图；

图2为本申请实施例提供的另一种基于Canvas的流程图绘制系统的结构示意图；

图3为本申请实施例提供的一种基于Canvas的流程图绘制方法的流程图。

具体实施方式

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

为了便于理解和解释本申请实施例提供的技术方案，先对本申请实施例中所涉及到的背景技术进行介绍。

目前，用户可使用流程图编辑软件绘制流程图。流程图编辑软件为用户提供常使用的基础图形，基于基础图形可实现流程图的绘制。

在流程图的绘制过程中，流程图编辑软件提供的基础图形能满足用户的大部分绘制需求。而当用户需使用特殊图形或专业图形等一系列自定义图形进行流程图绘制时，可将自定义图形导入流程图编辑软件中，基于导入的自定义图形和基础图形完成流程图的绘制。

但是，导入流程图编辑软件的自定义图形只具有图片属性，用户不能对自定义图形进行编辑，造成自定义图形和基础图形的适配性较差，用户的使用体验差。

基于此，本申请实施例提供了一种基于Canvas的流程图绘制系统及方法，通过该系统可以实现如下功能：响应于自定义图形的导入操作，将导入的自定义图形放置在Canvas画布上。用户可为Canvas画布上的自定义图形添加目标功能属性，响应于目标功能属性的添加操作，自定义图形获取目标功能属性。目标功能属性对应有目标功能操作，用户可对添加有目标功能属性的自定义图形实施目标功能操作。响应于目标功能操作，按照目标功能操作编辑自定义图形。另外，还可将目标基础图形放置在Canvas画布上，并对目标基础图形实施基础功能操作，按照基础功能操作编辑目标基础图形。用户还可为自定义图形和目标基础图形添加连接线，将自定义图形和目标基础图形进行连接，以获取绘制完成的流程图。在本申请实施例中，可以为导入的自定义图形添加目标功能属性，以使用户可对添加了目标功能属性的自定义图形进行目标功能操作，以实现自定义图形的编辑。如此，提高了自定义图形和基础图形的适配性，提高了用户绘制流程图的体验性。

为了便于理解本申请，下面结合附图对本申请实施例提供的一种基于Canvas的流程图绘制系统进行说明。

参见图1所示，该图为本申请实施例提供的一种基于Canvas的流程图绘制系统的结构示意图。如图1所示，该系统包括：流程图编辑单元101以及图形处理单元102。流程图编辑单元101提供流程图绘制基本功能，用于绘制流程图。图形处理单元102用于提供自定义图形并为自定义图形添加功能属性。

作为一种可选示例，流程图编辑单元101包括流程图绘制模块1011、基础图形选择模块1012以及工具栏模块1013。图形处理单元102包括自定义图形导入模块1021以及自定义图形属性处理模块1022。

作为一种可选示例，本申请实施例提供的单元和模块均可通过vue前端框架编写实现。其中，vue是一套用户构建用户界面的渐进式框架，vue被设计为自底向上逐层应用。vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

流程图绘制模块1011，用于提供Canvas画布，以供用户在Canvas画布上绘制流程图。可以理解的是，本申请实施例中所有流程图的绘制操作均在Canvas画布上进行。

其中，Canvas为HTML5中的绘图技术，可以提供空白绘图区域，使用APIs(比如Canvas2D或WebGL)来绘制图形。Canvas通过一套完整二维接口绘图功能来生成图形。Canvas接口可以完成以下功能：创建Canvas画布、线条绘制、图形变换、曲线绘制和文字图像渲染等。可以理解的是，在Canvas画布绘制图形是基于像素和算法实现的。在Canvas画布绘制图形，即为在Canvas画布上计算像素或坐标点的集合，通过描点的方式渲染图形。Canvas可以容纳所有的用户界面UI元素。一个场景中，可以允许多个Canvas对象的存在，还允许Canvas对象之间进行嵌套使用。其中，Canvas对象表示HTML画布元素。

用户可通过自定义图形导入模块1021将自定义图形导入流程图编辑单元101中。自定义图形导入模块1021，用于响应于自定义图形的导入操作，将导入的自定义图形放置在流程图绘制模块的Canvas画布上。

具体实施时，自定义图形导入到vue编写的流程图编辑单元后，通过Canvas读取自定义图形中各个像素的32位像素信息，并以描点的方式在Canvas画布上渲染自定义图形，以实现将自定义图形放置在流程图编辑单元中的Canvas画布上。此时，自定义图形导入模块1021还会记录自定义图形在Canvas画布上的位置信息和像素信息。其中，自定义图形在Canvas画布上的位置信息具体为自定义图形的中心位置在Canvas画布上的位置信息。

在一种可能的实现方式中，自定义图形导入模块1021，还用于记录自定义图形在Canvas画布上的导入位置信息，当自定义图形在Canvas画布上拖动时，自动更新自定义图形在Canvas画布上的位置信息，根据自定义图形在Canvas画布上拖动时的位置信息绘制自定义图形的拖动路径，将拖动路径显示在Canvas画布上，并当自定义图形拖动结束时，取消拖动路径的显示。

可以理解的是，在自定义图形被导入Canvas画布之前，为图片属性，例如为jpg格式的图片。在自定义图形导入Canvas画布之后，自定义图形的属性由图片属性更新为Node形式的节点属性。此时，可为Canvas画布上的自定义图形添加一些功能属性，以使后续可对Canvas画布上的自定义图形进行编辑。

自定义图形属性处理模块1022用于为自定义图形添加功能属性。功能属性包括锚点属性、图形缩放属性、文本框属性等。作为一种可选示例，自定义图形属性处理模块1022可向用户显示锚点属性控件、图形缩放属性控件、文本框属性控件。用户可通过触发控件的方式选择具体的功能属性。

若用户从多个功能属性中选择了目标功能属性，则自定义图形属性处理模块1022，用于响应于对Canvas画布上的自定义图形的目标功能属性添加操作，为自定义图形添加目标功能属性。

可以理解的是，自定义图形属性处理模块1022为导入的自定义图形添加目标功能属性之后，可对自定义图形执行与目标功能属性对应的目标功能操作，以实现对自定义图形的编辑。如此，提高了自定义图形与基础图形的适配性，可使自定义图形与基础图形进行搭配使用。

基础图形选择模块1012提供多种绘制流程图所需要的基础图形。用户可选择或拖动目标基础图形以使目标基础图形显示在Canvas画布上。即，基础图形选择模块1012，用于响应于对目标基础图形的选择操作，将目标基础图形放置在流程图绘制模块的Canvas画布上。

工具栏模块提供绘制流程图所需功能，包括移动画布、删除节点、删除连线等操作。其中，节点为Canvas画布中的图形，例如自定义图形或目标基础图形，可以删除Canvas画布中的自定义图形和/或目标基础图形。可基于工具栏模块中的连接线功能将自定义图形或目标基础图形之间通过连接线进行连接，则也可删除该连接线。

可以理解的是，工具栏模块中提供的一些功能可用于编辑自定义图形，一些功能不可用于编辑自定义图形，还需根据自定义图形被添加的功能属性进行确定。例如，当未给自定义图形添加锚点属性时，自定义图形上没有锚点时，则不能对自定义图形进行锚点连接。锚点连接即将不同图形上的锚点用连接线进行连接。其中，锚点为图形上的连接点，为便连入图形的相对位置，即图形与其相关边的交点位置。锚点是一个二维数组，每一项表示一个连接点的位置，在一个图形中，连接点在坐标轴上的位置范围都是[0,1]。

具体地，工具栏模块1013，用于提供针对自定义图形的目标功能操作、针对目标基础图形的基础功能操作以及添加连接线功能操作。基础功能操作为工具栏模块为基础图形提供的一些功能，例如，删除基础图形、缩放等。

目标功能操作与自定义图形被添加的目标功能属性相对应。示例地，当目标功能属性为锚点属性时，目标功能属性对应的目标功能操作为图形锚点操作。例如，图形锚点操作为锚点连接操作、锚点定位操作等。示例地，当目标功能属性为图形缩放属性时，目标功能属性对应的目标功能操作为图形缩放操作，则可对自定义图形本身进行缩放，而不是对自定义图形所在图片进行缩放。示例地，当目标功能属性为文本框属性时，目标功能属性对应的目标功能操作为图形添加文本框操作，则为自定义图形赋予了文本属性，可在自定义图形内添加文本。如此可知，通过为自定义图形添加功能属性，使得导入的自定义图形与系统中的基础图形有类似的功能，可对自定义图形进行编辑，使得自定义图形的编辑体验型好且编辑效率高。

则，用户可对自定义图形实施目标功能操作，对目标基础图形实施基础功能操作，还会对自定义图形与目标基础图形之间添加连接线。

基于此，工具栏模块1013，还用于响应于对自定义图形的目标功能操作，按照目标功能操作编辑自定义图形，响应于对目标基础图形的基础功能操作，按照基础功能操作编辑目标基础图形，响应于对自定义图形和目标基础图形的添加连接线操作，为自定义图形与目标基础图形添加连接线。

流程图编辑单元101，用于获取由自定义图形、目标基础图形以及自定义图形与目标基础图形之间的连接线绘制而成的流程图。

可以理解的是，本申请实施例不限定自定义图形的数量，也不限定目标基础图形的数量，可根据实际需要进行确定。

在一种可能的实现方式中，当为自定义图形添加的目标功能属性为锚点属性时，自定义图形属性处理模块，具体用于实现A1-A3：

A1：响应于对自定义图形的触发操作，选中自定义图形。

用户可以触发自定义图形，响应于对自定义图形的触发操作，选中自定义图形。其中，触发操作可为点击操作。用户点击自定义图形后，自定义图形的状态改变为hover状态，Canvas画布上显示自定义图形已被选中。

A2：响应于对锚点属性功能的选择操作，确定为自定义图形添加的目标功能属性为锚点属性，将自定义图形的当前模式确定为选择锚点模式。

当自定义图形被选中后，用户可为自定义图形选择添加锚点属性。响应于对锚点属性功能的选择操作，确定为自定义图形添加的目标功能属性为锚点属性，将自定义图形的当前模式确定为选择锚点模式。此时，用户可在自定义图形上添加锚点。另外，自定义图形的位置固定，不能移动自定义图形。

A3：响应于对自定义图形中可编辑范围内的目标位置的触发操作，在目标位置添加锚点，以完成为自定义图形添加锚点属性。

用户只能对自定义图形中可编辑范围内的位置进行触发，以添加锚点。例如，自定义图形的可编辑范围为自定义图形中线条上的各个像素点组成的集合。当用户触发目标位置时，响应于该触发操作，在目标位置添加锚点，以完成为自定义图形添加锚点属性。

具体实施时，在自定义图形为选择锚点模式时，系统实时监听鼠标node:click事件。当用户点击目标位置时，监听鼠标node:click事件获取鼠标点击的目标位置的位置信息，即添加的锚点的锚点位置信息。

作为一种可选示例，锚点位置信息由自定义图形在Canvas画布上的位置信息以及自定义图形的中心位置与锚点的相对位置信息得到。其中，自定义图形在Canvas画布上的位置信息为自定义图形的中心位置在Canvas画布上的位置信息。即，获知自定义图形在Canvas画布上的位置信息以及自定义图形的中心位置与锚点的相对位置信息之后，便可得到添加的锚点的锚点位置信息。

作为一种可选示例，在获知锚点的锚点位置信息之后，使用node:addAnchor方法为自定义图形添加该锚点，并在自定义节点信息中添加锚点属性信息。

可以理解的是，自定义图形对应有自定义图形信息。当自定义图形上添加锚点之后，在自定义图形的自定义图形信息中添加锚点的锚点属性信息。则此时，自定义图形信息包括自定义图形上锚点的锚点属性信息。作为一种可选示例，锚点属性信息包括锚点的锚点名称以及锚点位置信息。另外，锚点属性信息还包括锚点形状、锚点颜色等信息。

可以理解的是，用户可为同一个自定义图形添加多个锚点。当用户为自定义图形添加完毕锚点后，点击自定义图形外任意画布位置，画布会识别canvas:drop事件，以取消添加锚点功能，此时画布上显示的自定义图形为未选中状态。添加锚点后的自定义图形具有一般基础图形的锚点特性，例如，可通过监听鼠标点击锚点范围内anchor:click事件使用锚点的连线、定位等属性功能。

基于上述内容可知，本申请实施例提供的基于Canvas的流程图绘制系统集中封装了对自定义图形操作所需的属性功能，如为自定义图形添加锚点属性、添加文本框属性、添加图形缩放属性等。在对自定义图形赋予功能属性时，无需更改其他文件，只需操作本系统暴露在界面上的功能(例如各种控件)即可为自定义图形添加功能属性。如此，使得用户在绘制流程图时，不只局限于使用流程图绘制系统提供的基础图形，还可对导入的自定义图形进行定制化属性处理。通过对自定义图形的定制化操作，更好的满足用户对使用流程图进行表述内容的需求，极大提高了流程图绘制自由度，提高了流程图的绘制效率。另外，本流程图绘制系统的功能区域分割明显，功能可用性高，用户只需提供需要使用的图形而无需关心内部代码细节，也无需查看繁复的使用说明即可上手使用，且在流程图绘制过程中无冗余操作，使用方便。

参见图2，图2为本申请实施例提供的另一种基于Canvas的流程图绘制系统的结构示意图。

在一种可能的实现方式中，如图2所示，本申请实施例提供的基于Canvas的流程图绘制系统还包括：流程图导出单元103。作为一种可选示例，流程图导出单元103包括流程图导出模块。

流程图编辑单元101，还用于将绘制完成的流程图发送给流程图导出单元。

流程图导出单元103，用于通过Base64编码，将绘制完成的流程图转换为目标格式文件输出。

可以理解的是，流程图编辑单元101将绘制完成的流程图发送给流程图导出单元103，以使流程图导出单元103将绘制完成的流程图转换为目标格式文件输出。其中，Base64为常见的用于传输8Bit字节码的编码方式之一，是一种基于64个可打印字符来表示二进制数据的方法。Base64编码是从二进制到字符的过程，可用于在Http环境下传递较长的标识信息。采用Base64编码具有不可读性，需要解码后方可阅读。

作为一种可选示例，目标格式文件可为*.jpg、*.pdf、*.png等格式的文件。具体实施时，可通过image.download方法选择导出*.jpg、*.pdf、*.png等格式的文件，还支持调整导出图片的清晰度。

在一种可能的实现方式中，如图2所示，本申请实施例提供的基于Canvas的流程图绘制系统还包括：装置组件封装单元104。

装置组件封装单元，用于将流程图编辑单元、图形处理单元以及流程图导出单元封装为流程图绘制组件，并将流程图绘制组件注册为全局组件。

作为一种可选示例，装置组件封装单元104包含组件封装模块和组件注册模块。由组件封装模块将流程图编辑单元、图形处理单元以及流程图导出单元封装为流程图绘制组件，并通过组件注册模块将流程图绘制组件注册为全局组件。

可以理解的是，组件是对数据和方法的简单封装。组件可以扩展html元素，封装可重用的代码。组件可以让用户使用独立可复用的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树。

还可以理解的是，基于vue框架将流程图绘制组件注册为全局组件之后，当其他前端开发者使用时，执行npm install命令即可下载组件，无需注册引用便可直接使用。如此，杜绝了代码冗余，提高了装置的可用性。

基于上述方法实施例提供的一种基于Canvas的流程图绘制系统，本申请实施例还提供了一种基于Canvas的流程图绘制方法，下面将结合附图对基于Canvas的流程图绘制方法进行说明。

参见图3所示，该图为本申请实施例提供的一种基于Canvas的流程图绘制方法的流程图。如图3所示，该方法可以包括S301-S307：

S301：响应于自定义图形的导入操作，将导入的自定义图形放置在Canvas画布上。

S302：响应于对Canvas画布上的自定义图形的目标功能属性添加操作，为自定义图形添加目标功能属性。

S303：响应于对目标基础图形的选择操作，将目标基础图形放置在流程图绘制模块的Canvas画布上。

S304：响应于对自定义图形的目标功能操作，按照目标功能操作编辑自定义图形；目标功能操作与自定义图形被添加的目标功能属性相对应。

S305：响应于对目标基础图形的基础功能操作，按照基础功能操作编辑目标基础图形。

S306：响应于对自定义图形和目标基础图形的添加连接线操作，为自定义图形与目标基础图形添加连接线。

S307：获取由自定义图形、目标基础图形以及自定义图形与目标基础图形之间的连接线绘制而成的流程图。

可以理解的是，本申请实施例不限定S301-S302与S303之间的执行顺序，也可先将目标基础图形放置在Canvas画布上。同样，也不限定S304与S305之间的执行顺序，也可先对目标基础图形进行编辑。

在一种可能的实现方式中，当所述目标功能属性为锚点属性时，所述S302，包括：

响应于对所述自定义图形的触发操作，选中所述自定义图形；

响应于对锚点属性功能的选择操作，确定为所述自定义图形添加的目标功能属性为所述锚点属性，将所述自定义图形的当前模式确定为选择锚点模式；

响应于对所述自定义图形中可编辑范围内的目标位置的触发操作，在所述目标位置添加锚点，以完成为所述自定义图形添加锚点属性。

可以理解的是，本申请实施例提供的基于Canvas的流程图绘制方法是基于上述实施例提供的基于Canvas的流程图绘制系统实现的，技术详情可参见上述实施例，这里不再赘述。

另外，本申请实施例还提供了一种电子设备，包括：

一个或多个处理器；

存储装置，其上存储有一个或多个程序，

当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如上述所述的基于Canvas的流程图绘制方法。

另外，本申请实施例还提供了一种计算机可读介质，其上存储有计算机程序，其中，所述计算机程序被处理器执行时实现如上述所述的基于Canvas的流程图绘制方法。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到上述实施例方法中的全部或部分步骤可借助软件加必需的通用硬件平台的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者诸如媒体网关等网络通信设备，等等)执行本申请各个实施例或者实施例的某些部分所述的方法。

需要说明的是，本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。对于实施例公开的方法而言，由于其与实施例公开的系统相对应，所以描述的比较简单，相关之处参见系统部分说明即可。

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

对所公开的实施例的上述说明，使本领域专业技术人员能够实现或使用本申请。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本申请的精神或范围的情况下，在其它实施例中实现。因此，本申请将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种基于Canvas的流程图绘制系统，其特征在于，所述系统包括：流程图编辑单元以及图形处理单元；所述流程图编辑单元包括流程图绘制模块、基础图形选择模块以及工具栏模块；所述图形处理单元包括自定义图形导入模块以及自定义图形属性处理模块；

所述流程图绘制模块，用于提供Canvas画布；

所述自定义图形导入模块，用于响应于自定义图形的导入操作，将导入的自定义图形放置在所述流程图绘制模块的Canvas画布上；

所述自定义图形属性处理模块，用于响应于对所述Canvas画布上的自定义图形的目标功能属性添加操作，为所述自定义图形添加目标功能属性；

所述基础图形选择模块，用于响应于对目标基础图形的选择操作，将所述目标基础图形放置在所述流程图绘制模块的Canvas画布上；

所述工具栏模块，用于提供针对所述自定义图形的目标功能操作、针对所述目标基础图形的基础功能操作以及添加连接线功能操作，响应于对所述自定义图形的目标功能操作，按照所述目标功能操作编辑所述自定义图形，响应于对所述目标基础图形的基础功能操作，按照所述基础功能操作编辑所述目标基础图形，响应于对所述自定义图形和所述目标基础图形的添加连接线操作，为所述自定义图形与所述目标基础图形添加连接线；所述目标功能操作与所述自定义图形被添加的目标功能属性相对应；

所述流程图编辑单元，用于获取由所述自定义图形、所述目标基础图形以及所述自定义图形与所述目标基础图形之间的连接线绘制而成的流程图。

2.根据权利要求1所述的系统，其特征在于，当所述目标功能属性为锚点属性时，所述自定义图形属性处理模块，具体用于：

响应于对所述自定义图形的触发操作，选中所述自定义图形；

响应于对锚点属性功能的选择操作，确定为所述自定义图形添加的目标功能属性为所述锚点属性，将所述自定义图形的当前模式确定为选择锚点模式；

响应于对所述自定义图形中可编辑范围内的目标位置的触发操作，在所述目标位置添加锚点，以完成为所述自定义图形添加锚点属性。

3.根据权利要求2所述的系统，其特征在于，所述自定义图形对应有自定义图形信息；所述自定义图形信息包括所述自定义图形上所述锚点的锚点属性信息；所述锚点属性信息包括所述锚点的锚点名称以及锚点位置信息；

所述锚点位置信息由所述自定义图形在所述Canvas画布上的位置信息以及所述自定义图形的中心位置与所述锚点的相对位置信息得到；所述自定义图形在所述Canvas画布上的位置信息为所述自定义图形的中心位置在所述Canvas画布上的位置信息。

4.根据权利要求1所述的系统，其特征在于，所述自定义图形导入模块，还用于记录所述自定义图形在所述Canvas画布上的导入位置信息，当所述自定义图形在所述Canvas画布上拖动时，自动更新所述自定义图形在所述Canvas画布上的位置信息，根据所述自定义图形在所述Canvas画布上拖动时的位置信息绘制所述自定义图形的拖动路径，将所述拖动路径显示在所述Canvas画布上，并当所述自定义图形拖动结束时，取消所述拖动路径的显示。

5.根据权利要求1或2所述的系统，其特征在于，当所述目标功能属性为锚点属性时，所述目标功能属性对应的目标功能操作为图形锚点操作。

6.根据权利要求1所述的系统，其特征在于，当所述目标功能属性为图形缩放属性时，所述目标功能属性对应的目标功能操作为图形缩放操作。

7.根据权利要求1所述的系统，其特征在于，当所述目标功能属性为文本框属性时，所述目标功能属性对应的目标功能操作为图形添加文本框操作。

8.根据权利要求1所述的系统，其特征在于，所述系统还包括：流程图导出单元；

所述流程图编辑单元，还用于将绘制完成的流程图发送给所述流程图导出单元；

所述流程图导出单元，用于通过Base64编码，将所述绘制完成的流程图转换为目标格式文件输出。

9.根据权利要求1所述的系统，其特征在于，所述系统还包括：装置组件封装单元；

所述装置组件封装单元，用于将所述流程图编辑单元、所述图形处理单元以及所述流程图导出单元封装为流程图绘制组件，并将所述流程图绘制组件注册为全局组件。

10.一种基于Canvas的流程图绘制方法，其特征在于，所述方法包括：

响应于自定义图形的导入操作，将导入的自定义图形放置在Canvas画布上；

响应于对所述Canvas画布上的自定义图形的目标功能属性添加操作，为所述自定义图形添加目标功能属性；

响应于对目标基础图形的选择操作，将所述目标基础图形放置在所述流程图绘制模块的Canvas画布上；

响应于对所述自定义图形的目标功能操作，按照所述目标功能操作编辑所述自定义图形；所述目标功能操作与所述自定义图形被添加的目标功能属性相对应；

响应于对所述目标基础图形的基础功能操作，按照所述基础功能操作编辑所述目标基础图形；

响应于对所述自定义图形和所述目标基础图形的添加连接线操作，为所述自定义图形与所述目标基础图形添加连接线；

获取由所述自定义图形、所述目标基础图形以及所述自定义图形与所述目标基础图形之间的连接线绘制而成的流程图。

Images