CN109766530B - 图表边框的生成方法、装置、存储介质和电子设备 - Google Patents

Abstract

本公开涉及一种图表边框的生成方法、装置、存储介质和电子设备，涉及信息技术领域，该方法包括：将获得的包含第一边框的样式图片作为预设的边缘检测算法的输入，以获取边缘检测算法输出的第一边框，根据第一边框，生成第一资源文件，第一资源文件包括第一边框的属性特征，当获取到边框生成指令后，根据边框生成指令中包含的目标图表的位置信息，和第一资源文件在当前界面上生成目标图表的第二边框，第二边框为具有第一边框的样式，且与目标图表的尺寸匹配的边框。能够在无需用户手动调整的前提下，根据用户需求的边框样式，自动生成与图表大小匹配的边框，便于操作，显示清晰。

Description

图表边框的生成方法、装置、存储介质和电子设备

技术领域

本公开涉及信息技术领域，具体地，涉及一种图表边框的生成方法、装置、存储介质和电子设备。

背景技术

随着互联网、云计算等信息技术的迅猛发展，相应带来的数据量也是呈现爆发式的增长。在对大量的数据进行分析和挖掘的过程中，可视化的图表由于能够直观、有效地分析数据中的特征，成为了监测、展示数据的常用手段。在图表的展示过程中，为了提高图表的表现力、满足用户的观感需求，通常会为图表增加边框。在现有技术中，需要用户手动利用专用图像处理工具来设计边框，操作复杂不易实现，并且随着图表尺寸的变化，容易造成边框扭曲失真，或者边框位置与图表不匹配的问题。

发明内容

本公开的目的是提供一种图表边框的生成方法、装置、存储介质和电子设备，用以解决现有技术中边框设计复杂、无法适应图表尺寸变化的问题。

为了实现上述目的，根据本公开实施例的第一方面，提供一种图表边框的生成方法，所述方法包括：

将获得的包含第一边框的样式图片作为预设的边缘检测算法的输入，以获取所述边缘检测算法输出的第一边框；

根据所述第一边框，生成第一资源文件，所述第一资源文件包括所述第一边框的属性特征；

当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框，所述第二边框为具有所述第一边框的样式，且与所述目标图表的尺寸匹配的边框。

可选的，所述将获得的包含第一边框的样式图片作为预设的边缘检测算法的输入，以获取所述边缘检测算法输出的第一边框，包括：

按照所述样式图片包含的剔除标记，去除所述样式图片中所述剔除标记所指示的图像内容，以获取中间图片；

将所述中间图片作为Canny边缘检测算法的输入，以获取所述Canny边缘检测算法输出的所述第一边框。

可选的，所述根据所述第一边框，生成第一资源文件，包括：

获取所述第一边框的顶角信息，所述顶角信息包括所述第一边框的多个顶角中每个顶角在所述样式图片中的坐标信息、所述每个顶角的面积和所述每个顶角在所述第一边框中的比例；

获取所述第一边框的边线信息，所述边线信息包括所述第一边框的多条边线中每条边线的长度和每条边线在所述样式图片中的坐标信息；

获取所述第一边框的描述信息，所述描述信息包括所述第一边框的面积、颜色和效果中的至少一种；

根据所述顶角信息、所述边线信息和所述描述信息，生成所述第一资源文件。

可选的，所述当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框，包括：

当接收到所述边框生成指令后，根据所述目标图表在所述当前界面中的坐标信息，确定所述目标图表的长和宽；

根据所述目标图表的长和宽和所述第一资源文件，在所述当前界面上生成所述第二边框，所述第二边框的外边缘的长和宽，分别与所述目标图表的长和宽匹配。

可选的，在所述当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框之后，所述方法还包括：

根据所述目标图表的属性，确定所述目标图表的重心，以及能够包含所述目标图表中所有有效信息的最小区域的顶点，所述属性包括所述目标图表的类型和所述目标图表包含的所述有效信息对应的坐标，所述有效信息包括所述目标图表中的图案，和/或文字；

控制所述第二边框的中心与所述目标图表的重心重合；

控制所述第二边框的内边缘与所述最小区域的顶点之间的距离满足预设条件。

可选的，在所述当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框之后，所述方法还包括：

当所述当前界面上存在其他边框时，获取所述其他边框的坐标，所述其他边框为所述当前界面上的任一边框；

根据所述其他边框的坐标与所述第二边框的坐标，控制所述第二边框与所述其他边框在横坐标方向或纵坐标方向上对齐。

可选的，所述将获得的包含第一边框的样式图片作为预设的边缘检测算法的输入，以获取所述边缘检测算法输出的第一边框，包括：

将多个样式图片依次作为所述边缘检测算法的输入，以获取所述边缘检测算法输出的多个边框，所述包含第一边框的样式图片为所述多个样式图片中的任一图片；

所述当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框，包括：

当获取到边框生成指令后，获取所述边框生成指令中包含的所述目标图表的位置信息；

当获取到在所述多个边框中选择所述第一边框的选择指令后，根据所述目标图表的位置信息，和所述第一资源文件在所述当前界面上生成所述目标图表的所述第二边框。

根据本公开实施例的第二方面，提供一种图表边框的生成装置，所述装置包括：

获取模块，用于将获得的包含第一边框的样式图片作为预设的边缘检测算法的输入，以获取所述边缘检测算法输出的第一边框；

资源生成模块，用于根据所述第一边框，生成第一资源文件，所述第一资源文件包括所述第一边框的属性特征；

边框生成模块，用于当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框，所述第二边框为具有所述第一边框的样式，且与所述目标图表的尺寸匹配的边框。

可选的，所述获取模块包括：

剔除子模块，用于按照所述样式图片包含的剔除标记，去除所述样式图片中所述剔除标记所指示的图像内容，以获取中间图片；

获取子模块，用于将所述中间图片作为Canny边缘检测算法的输入，以获取所述Canny边缘检测算法输出的所述第一边框。

可选的，所述资源生成模块包括：

顶角获取子模块，用于获取所述第一边框的顶角信息，所述顶角信息包括所述第一边框的多个顶角中每个顶角在所述样式图片中的坐标信息、所述每个顶角的面积和所述每个顶角在所述第一边框中的比例；

边线获取子模块，用于获取所述第一边框的边线信息，所述边线信息包括所述第一边框的多条边线中每条边线的长度和每条边线在所述样式图片中的坐标信息；

描述获取子模块，用于获取所述第一边框的描述信息，所述描述信息包括所述第一边框的面积、颜色和效果中的至少一种；

资源生成子模块，用于根据所述顶角信息、所述边线信息和所述描述信息，生成所述第一资源文件。

可选的，所述边框生成模块包括：

确定子模块，用于当接收到所述边框生成指令后，根据所述目标图表在所述当前界面中的坐标信息，确定所述目标图表的长和宽；

第一生成子模块，用于根据所述目标图表的长和宽和所述第一资源文件，在所述当前界面上生成所述第二边框，所述第二边框的外边缘的长和宽，分别与所述目标图表的长和宽匹配。

可选的，所述装置还包括：

确定模块，用于在所述当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框之后，根据所述目标图表的属性，确定所述目标图表的重心，以及能够包含所述目标图表中所有有效信息的最小区域的顶点，所述属性包括所述目标图表的类型和所述目标图表包含的所述有效信息对应的坐标，所述有效信息包括所述目标图表中的图案，和/或文字；

控制模块，用于控制所述第二边框的中心与所述目标图表的重心重合；

所述控制模块，还用于控制所述第二边框的内边缘与所述最小区域的顶点之间的距离满足预设条件。

可选的，所述装置还包括：

边框获取模块，用于在所述当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框之后，当所述当前界面上存在其他边框时，获取所述其他边框的坐标，所述其他边框为所述当前界面上的任一边框；

对齐模块，用于根据所述其他边框的坐标与所述第二边框的坐标，控制所述第二边框与所述其他边框在横坐标方向或纵坐标方向上对齐。

可选的，所述获取模块，用于将多个样式图片依次作为所述边缘检测算法的输入，以获取所述边缘检测算法输出的多个边框，所述包含第一边框的样式图片为所述多个样式图片中的任一图片；

所述边框生成模块包括：

指令获取子模块，用于当获取到边框生成指令后，获取所述边框生成指令中包含的所述目标图表的位置信息；

第二生成子模块，用于当获取到在所述多个边框中选择所述第一边框的选择指令后，根据所述目标图表的位置信息，和所述第一资源文件在所述当前界面上生成所述目标图表的所述第二边框。

根据本公开实施例的第三方面，提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现第一方面提供的图表边框的生成方法的步骤。

根据本公开实施例的第四方面，提供一种电子设备，包括：

存储器，其上存储有计算机程序；

处理器，用于执行所述存储器中的所述计算机程序，以实现第一方面提供的图表边框的生成方法的步骤。

通过上述技术方案，本公开首先获取包含了第一边框的样式图片，将样式图片作为预设的边缘检测算法的输入，以获取边缘检测算法输出的第一边框，再根据第一边框生成包括了第一边框的属性特征的第一资源文件，当获取到边框生成指令后，根据边框生成指令中包含的目标图表的位置信息和第一资源文件，在当前界面上生成与目标图表的尺寸匹配，且与第一边框的样式相同的第二边框。能够在无需用户手动调整的前提下，根据用户需求的边框样式，自动生成与图表大小匹配的边框，便于操作，显示清晰，提高了用户体验。

本公开的其他特征和优点将在随后的具体实施方式部分予以详细说明。

附图说明

附图是用来提供对本公开的进一步理解，并且构成说明书的一部分，与下面的具体实施方式一起用于解释本公开，但并不构成对本公开的限制。在附图中：

图1是根据一示例性实施例示出的一种图表边框的生成方法的流程图；

图2是根据一示例性实施例示出的另一种图表边框的生成方法的流程图；

图3a是根据一示例性实施例示出的另一种图表边框的生成方法的流程图；

图3b是根据图3a所示的图表边框的生成方法中第一边框的示意图；

图4是根据一示例性实施例示出的另一种图表边框的生成方法的流程图；

图5a是根据一示例性实施例示出的另一种图表边框的生成方法的流程图；

图5b是根据图5a所示的图表边框的生成方法中目标图表的示意图；

图6是根据一示例性实施例示出的另一种图表边框的生成方法的流程图；

图7是根据一示例性实施例示出的另一种图表边框的生成方法的流程图；

图8是根据一示例性实施例示出的一种图表边框的生成装置的框图；

图9是根据一示例性实施例示出的另一种图表边框的生成装置的框图；

图10是根据一示例性实施例示出的另一种图表边框的生成装置的框图；

图11是根据一示例性实施例示出的另一种图表边框的生成装置的框图；

图12是根据一示例性实施例示出的另一种图表边框的生成装置的框图；

图13是根据一示例性实施例示出的另一种图表边框的生成装置的框图；

图14是根据一示例性实施例示出的另一种图表边框的生成装置的框图；

图15是根据一示例性实施例示出的一种电子设备的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

在介绍本公开提供的图表边框的生成方法、装置、存储介质和电子设备之前，首先对本公开中各个实施例所涉及的应用场景进行介绍，该应用场景为图表的可视化场景，例如基于web技术实现的仪表盘，仪表盘中可以显示一个或多个图表，每个图表对应一个WebWidget(中文：微件)作为容器，图表中可以展现各种用户需求的数据。在本实施例中，仪表盘的显示可以在终端或服务器上实现，其中，服务器可以是本地服务器，也可以是云端服务器，终端例如可以是智能手机、平板电脑、智能电视、智能手表、PDA(英文：PersonalDigitalAssistant，中文：个人数字助理)、便携计算机等移动终端，也可以是台式计算机等固定终端。

图1是根据一示例性实施例示出的一种图表边框的生成方法的流程图，如图1所示，该方法包括：

步骤101，将获得的包含第一边框的样式图片作为预设的边缘检测算法的输入，以获取边缘检测算法输出的第一边框。

举例来说，当用户需要为图表添加某种边框时，可以直接将包含有该种边框样式的样式图片发送给服务器或终端，由服务器或终端利用预设的边缘检测算法来提取样式图中包含的边框，而无需使用专用图像处理工具来设计边框，便于用户操作。以第一边框为例，首先获取包含了第一边框的样式图片，将样式图片作为边缘算法的输入，以获取边缘检测算法输出的第一边框，即识别样式图片中包含的第一边框的边界信息。

步骤102，根据第一边框，生成第一资源文件，第一资源文件包括第一边框的属性特征。

示例的，在识别出样式图片中的第一边框之后，根据第一边框的属性特征，生成第一资源文件。第一资源文件可以是独立的文件，在用户需要使用第一边框时被调用。其中，属性特征可以理解为能够完整描述第一边框的特征，即根据属性特征，能够绘制出第一边框。例如属性特征可以包括：第一边框在样式图片中所占的面积、第一边框在样式图片中的坐标信息，第一边框的图像元素(例如：顶角样式、边线样式等)对应的坐标信息和面积等。

步骤103，当获取到边框生成指令后，根据边框生成指令中包含的目标图表的位置信息，和第一资源文件在当前界面上生成目标图表的第二边框，第二边框为具有第一边框的样式，且与目标图表的尺寸匹配的边框。

举例来说，当前界面上可以显示有多个图表，用户可以在目标图表在当前界面上的显示区域内进行指定操作(例如：单击、双击、长按等)，或者可以将当前界面上显示的第一边框对应的图标拖拽到目标图表在当前界面上的显示区域内，来触发边框生成指令，边框生成指令内包括了目标图表的位置信息(例如：目标图表的在当前界面上的位置)。获取到边框生成指令后，根据目标图表的位置信息，和第一资源文件，在当前界面上生成与目标图表的尺寸匹配的第二边框，其中，第二边框与第一边框的样式相同。第二边框与目标图表的尺寸匹配，可以理解为，第二边框的长和宽，分别和目标图表的长和宽匹配，即第二边框的长减去目标图表的长的差值等于预设的第一距离，第二边框的宽减去目标图表的宽的差值等于预设的第二距离，目标图表能够完整地被第二边框所包围。

需要说明的是，本公开所提供的实施例中，第二边框和目标图表可以设置在不同的两个图层中，以避免第二边框和目标图表在显示过程中出现交互干扰。

综上所述，本公开首先获取包含了第一边框的样式图片，将样式图片作为预设的边缘检测算法的输入，以获取边缘检测算法输出的第一边框，再根据第一边框生成包括了第一边框的属性特征的第一资源文件，当获取到边框生成指令后，根据边框生成指令中包含的目标图表的位置信息和第一资源文件，在当前界面上生成与目标图表的尺寸匹配，且与第一边框的样式相同的第二边框。能够在无需用户手动调整的前提下，根据用户需求的边框样式，自动生成与图表大小匹配的边框，便于操作，显示清晰，提高了用户体验。

图2是根据一示例性实施例示出的另一种图表边框的生成方法的流程图，如图2所示，步骤101包括：

步骤1011，按照样式图片包含的剔除标记，去除样式图片中剔除标记所指示的图像内容，以获取中间图片。

步骤1012，将中间图片作为Canny(坎尼)边缘检测算法的输入，以获取Canny边缘检测算法输出的第一边框。

示例的，样式图片中包含的边框可能与用户的需求的边框存在一定的差异，因此用户可以预先在样式图片中添加一个或多个剔除标记，每个剔除标记都指示预设像素数量(例如：8*8的像素块)的图像内容。获取到样式图片后，首先将样式图片中剔除标记所指示的图像内容去除，以得到中间图片。再将中间图片作为Canny边缘检测算法的输入，对中间图片进行高斯滤波来平滑图像，以去除噪声，再根据平滑后的中间图片的强度梯度，应用非最大抑制(英文：Non-maximum Suppression)技术来消除边误检，最后根据双阈值算法来确定中间图片中的边界，以输出中间图片包含的第一边框。

图3a是根据一示例性实施例示出的另一种图表边框的生成方法的流程图，如图3a所示，步骤102包括：

步骤1021，获取第一边框的顶角信息，顶角信息包括第一边框的多个顶角中每个顶角在样式图片中的坐标信息、每个顶角的面积和每个顶角在第一边框中的比例。

步骤1022，获取第一边框的边线信息，边线信息包括第一边框的多条边线中每条边线的长度和每条边线在样式图片中的坐标信息。

步骤1023，获取第一边框的描述信息，描述信息包括第一边框的面积、颜色和效果中的至少一种。

步骤1024，根据顶角信息、边线信息和描述信息，生成第一资源文件。

举例来说，第一资源文件的获取，可以通过对第一边框进行分割来实现。例如，将第一边框分割为四个顶角和四个边线，共八份图像块，之后根据分割出的八份图像块，获取第一边框的顶角信息和边线信息。对于第一边框所指示的边框样式，顶角在边框中的比例是固定的，而边线在边框中的比例是可变的，因此可以将第一边框中的四个顶角分割为四个图像块，可以将第一边框中的四个边线分割为多个图像块，例如可以将每条边线再进一步分割为八个图像块，那么四个边线可以分为三十二个图像块。如图3b所示的第一边框，可以将第一边框分割为a、b、c、d、e、f、g、h共八个图像块，分别获取八个图像块中包含的第一边框的顶角信息和边线信息。其中，顶角信息包括第一边框的多个顶角中每个顶角在样式图片中的坐标信息、每个顶角的面积和每个顶角在第一边框中的比例。边线信息包括第一边框的多条边线中每条边线的长度和每条边线在样式图片中的坐标信息。再识别第一边框中的描述信息，描述信息包括第一边框的面积、颜色和效果(例如：闪烁，透明度等)中的至少一种。最后根据顶角信息、边线信息和描述信息，生成第一资源文件。

图4是根据一示例性实施例示出的另一种图表边框的生成方法的流程图，如图4所示，步骤103可以通过以下步骤来实现：

步骤1031，当接收到边框生成指令后，根据目标图表在当前界面中的坐标信息，确定目标图表的长和宽。

步骤1032，根据目标图表的长和宽和第一资源文件，在当前界面上生成第二边框，第二边框的外边缘的长和宽，分别与目标图表的长和宽匹配。

示例的，当前界面上可以显示有多个图表，用户可以通过触发边框生成指令在多个图表中选择目标图表。获取到边框生成指令后，根据目标图表的在当前界面中的坐标信息，确定目标图表的长和宽。根据目标图表的长和宽和第一资源文件，在当前界面上生成第二边框，

其中，第二边框可以分为内边缘和外边缘，外边缘能够指示第二边框的外边界，内边缘能够指示第二边框的内边界。第二边框的外边缘的长和宽，分别与目标图表的长和宽匹配，使得目标图表能够完整地被第二边框所包围。第二边框的外边缘的长和宽，分别与目标图表的长和宽匹配，可以理解为，第二边框的外边缘的长减去目标图表的长的差值等于预设的第一距离，第二边框的外边缘的宽减去目标图表的宽的差值等于预设的第二距离，以使第二边框的外边缘与目标图表之间仍存在一定的空间。

图5a是根据一示例性实施例示出的另一种图表边框的生成方法的流程图，如图5a所示，在步骤103之后，方法还包括：

步骤104，根据目标图表的属性，确定目标图表的重心，以及能够包含目标图表中所有有效信息的最小区域的顶点，属性包括目标图表的类型和目标图表包含的有效信息对应的坐标，有效信息包括目标图表中的图案，和/或文字。

举例来说，根据目标图表的属性，确定目标图表的重心，以及能够包含目标图表中所有有效信息的最小区域的顶点。其中，属性可以包括目标图表的类型(例如：柱状图、饼图、线图等)和目标图表包含的有效信息对应的坐标，有效信息可以包括目标图表中的图案(例如：图表中以图案方式展示的数据)，和/或文字(例如：图示、图例、图表名等)。以目标图表为图5b所示来举例，目标图表的类型为：饼图，再根据目标图表中有效信息对应的坐标，确定目标图表的重心为A点，之后确定能够包含目标图表中所有有效信息的最小区域在纵坐标和横坐标两个维度上的四个顶点：B点、C点、D点和E点。

步骤105，控制第二边框的中心与目标图表的重心重合。

步骤106，控制第二边框的内边缘与最小区域的顶点之间的距离满足预设条件。

示例的，在确定目标图表的重心和最小区域的顶点之后，控制第二边框的中心与目标图表的重心重合，以使目标图表能够位于第二边框的中间位置。在不改变第二边框的外边缘的条件下，再控制第二边框的内边缘与最小区域的顶点之间的距离满足预设条件。预设条件例如可以包括：控制第二边框的内边缘在纵坐标和横坐标两个维度上，分别与B点、C点、D点和E点的距离为预设的距离。

图6是根据一示例性实施例示出的另一种图表边框的生成方法的流程图，如图6所示，在步骤103之后，该方法还可以包括：

步骤107，当当前界面上存在其他边框时，获取其他边框的坐标，其他边框为当前界面上的任一边框。

步骤108，根据其他边框的坐标与第二边框的坐标，控制第二边框与其他边框在横坐标方向或纵坐标方向上对齐。

举例来说，当前界面上可以显示有多个图表，每个图表都可以按照步骤101至步骤103来生成相应的边框。在生成第二边框之后，当存在除第二边框之外的其他边框时，可以调整第二边框与其他边框在横坐标方向或纵坐标方向上对齐。首先，获取其他边框的坐标，再根据其他边框的坐标和第二边框的坐标，确定第二边框应当与其他边框在横坐标方向或纵坐标方向上对齐。例如：当第二边框的中心和其他边框的中心，在横坐标方向上的差值大于在纵坐标方向上的差值，那么可以控制第二边框的外边缘与其他边框的外边缘在纵坐标方向上对齐，当第二边框的中心和其他边框的中心，在横坐标方向上的差值小于在纵坐标方向上的差值，那么可以控制第二边框的外边缘与其他边框的外边缘在横坐标方向上对齐。

图7是根据一示例性实施例示出的另一种图表边框的生成方法的流程图，如图7所示，步骤101通过以下方式来实现：

将多个样式图片依次作为边缘检测算法的输入，以获取边缘检测算法输出的多个边框，包含第一边框的样式图片为多个样式图片中的任一图片。

步骤103可以包括以下步骤：

步骤1033，当获取到边框生成指令后，获取边框生成指令中包含的目标图表的位置信息。

步骤1034，当获取到在多个边框中选择第一边框的选择指令后，根据目标图表的位置信息，和第一资源文件在当前界面上生成目标图表的第二边框。

举例来说，在实现图表可视化的过程中，用户可能会需要多种边框，因此步骤101中，可以获取多个样式图片，每个样式图片中包含了一种边框，将多个样式图片作为边缘检测算法的输入，以获取边缘检测算法输出的多个边框，以供用户选择。其中，将包含了第一边框的样式图片作为边缘检测算法的输入，边缘检测算法输出的即为第一边框。相应的，在步骤102中，可以对多个边框进行分割，以获取包含了多个边框的属性特征的多个资源文件。在步骤103中，在获取到边框生成指令后，根据边框生成指令确定目标图表的位置信息，再根据获取到的选择指令，确定用户在多个边框中选择了第一边框，最后根据目标图表的位置信息，和第一边框对应的第一资源文件在当前界面上生成目标图表的第二边框。

综上所述，本公开首先获取包含了第一边框的样式图片，将样式图片作为预设的边缘检测算法的输入，以获取边缘检测算法输出的第一边框，再根据第一边框生成包括了第一边框的属性特征的第一资源文件，当获取到边框生成指令后，根据边框生成指令中包含的目标图表的位置信息和第一资源文件，在当前界面上生成与目标图表的尺寸匹配，且与第一边框的样式相同的第二边框。能够在无需用户手动调整的前提下，根据用户需求的边框样式，自动生成与图表大小匹配的边框，便于操作，显示清晰，提高了用户体验。

图8是根据一示例性实施例示出的一种图表边框的生成装置的框图，如图8所示，该装置200包括：

获取模块201，用于将获得的包含第一边框的样式图片作为预设的边缘检测算法的输入，以获取边缘检测算法输出的第一边框。

资源生成模块202，用于根据第一边框，生成第一资源文件，第一资源文件包括第一边框的属性特征。

边框生成模块203，用于当获取到边框生成指令后，根据边框生成指令中包含的目标图表的位置信息，和第一资源文件在当前界面上生成目标图表的第二边框，第二边框为具有第一边框的样式，且与目标图表的尺寸匹配的边框。

图9是根据一示例性实施例示出的另一种图表边框的生成装置的框图，如图9所示，获取模块201包括：

剔除子模块2011，用于按照样式图片包含的剔除标记，去除样式图片中剔除标记所指示的图像内容，以获取中间图片。

获取子模块2012，用于将中间图片作为Canny边缘检测算法的输入，以获取Canny边缘检测算法输出的第一边框。

图10是根据一示例性实施例示出的另一种图表边框的生成装置的框图，如图10所示，资源生成模块202包括：

顶角获取子模块2021，用于获取第一边框的顶角信息，顶角信息包括第一边框的多个顶角中每个顶角在样式图片中的坐标信息、每个顶角的面积和每个顶角在第一边框中的比例。

边线获取子模块2022，用于获取第一边框的边线信息，边线信息包括第一边框的多条边线中每条边线的长度和每条边线在样式图片中的坐标信息。

描述获取子模块2023，用于获取第一边框的描述信息，描述信息包括第一边框的面积、颜色和效果中的至少一种。

资源生成子模块2024，用于根据顶角信息、边线信息和描述信息，生成第一资源文件。

图11是根据一示例性实施例示出的另一种图表边框的生成装置的框图，如图11所示，边框生成模块203包括：

确定子模块2031，用于当接收到边框生成指令后，根据目标图表在当前界面中的坐标信息，确定目标图表的长和宽。

第一生成子模块2032，用于根据目标图表的长和宽和第一资源文件，在当前界面上生成第二边框，第二边框的外边缘的长和宽，分别与目标图表的长和宽匹配。

图12是根据一示例性实施例示出的另一种图表边框的生成装置的框图，如图12所示，该装置200还包括：

确定模块204，用于在当获取到边框生成指令后，根据边框生成指令中包含的目标图表的位置信息，和第一资源文件在当前界面上生成目标图表的第二边框之后，根据目标图表的属性，确定目标图表的重心，以及能够包含目标图表中所有有效信息的最小区域的顶点，属性包括目标图表的类型和目标图表包含的有效信息对应的坐标，有效信息包括目标图表中的图案，和/或文字。

控制模块205，用于控制第二边框的中心与目标图表的重心重合。

控制模块205，还用于控制第二边框的内边缘与最小区域的顶点之间的距离满足预设条件。

图13是根据一示例性实施例示出的另一种图表边框的生成装置的框图，如图13所示，该装置200还包括：

边框获取模块206，用于在当获取到边框生成指令后，根据边框生成指令中包含的目标图表的位置信息，和第一资源文件在当前界面上生成目标图表的第二边框之后，当当前界面上存在其他边框时，获取其他边框的坐标，其他边框为当前界面上的任一边框。

对齐模块207，用于根据其他边框的坐标与第二边框的坐标，控制第二边框与其他边框在横坐标方向或纵坐标方向上对齐。

图14是根据一示例性实施例示出的另一种图表边框的生成装置的框图，如图14所示，获取模块201，用于将多个样式图片依次作为边缘检测算法的输入，以获取边缘检测算法输出的多个边框，包含第一边框的样式图片为多个样式图片中的任一图片。

边框生成模块203包括：

指令获取子模块2033，用于当获取到边框生成指令后，获取边框生成指令中包含的目标图表的位置信息。

第二生成子模块2034，用于当获取到在多个边框中选择第一边框的选择指令后，根据目标图表的位置信息，和第一资源文件在当前界面上生成目标图表的第二边框。

关于上述实施例中的装置，其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处将不做详细阐述说明。

综上所述，本公开首先获取包含了第一边框的样式图片，将样式图片作为预设的边缘检测算法的输入，以获取边缘检测算法输出的第一边框，再根据第一边框生成包括了第一边框的属性特征的第一资源文件，当获取到边框生成指令后，根据边框生成指令中包含的目标图表的位置信息和第一资源文件，在当前界面上生成与目标图表的尺寸匹配，且与第一边框的样式相同的第二边框。能够在无需用户手动调整的前提下，根据用户需求的边框样式，自动生成与图表大小匹配的边框，便于操作，显示清晰，提高了用户体验。

图15是根据一示例性实施例示出的一种电子设备300的框图。如图15所示，该电子设备300可以包括：处理器301，存储器302。该电子设备300还可以包括多媒体组件303，输入/输出(I/O)接口304，以及通信组件305中的一者或多者。

其中，处理器301用于控制该电子设备300的整体操作，以完成上述的图表边框的生成方法中的全部或部分步骤。存储器302用于存储各种类型的数据以支持在该电子设备300的操作，这些数据例如可以包括用于在该电子设备300上操作的任何应用程序或方法的指令，以及应用程序相关的数据，例如联系人数据、收发的消息、图片、音频、视频等等。该存储器302可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如静态随机存取存储器(Static Random Access Memory，简称SRAM)，电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，简称EEPROM)，可擦除可编程只读存储器(Erasable Programmable Read-Only Memory，简称EPROM)，可编程只读存储器(Programmable Read-Only Memory，简称PROM)，只读存储器(Read-Only Memory，简称ROM)，磁存储器，快闪存储器，磁盘或光盘。多媒体组件303可以包括屏幕和音频组件。其中屏幕例如可以是触摸屏，音频组件用于输出和/或输入音频信号。例如，音频组件可以包括一个麦克风，麦克风用于接收外部音频信号。所接收的音频信号可以被进一步存储在存储器302或通过通信组件305发送。音频组件还包括至少一个扬声器，用于输出音频信号。I/O接口304为处理器301和其他接口模块之间提供接口，上述其他接口模块可以是键盘，鼠标，按钮等。这些按钮可以是虚拟按钮或者实体按钮。通信组件305用于该电子设备300与其他设备之间进行有线或无线通信。无线通信，例如Wi-Fi，蓝牙，近场通信(Near FieldCommunication，简称NFC)，2G、3G或4G，或它们中的一种或几种的组合，因此相应的该通信组件305可以包括：Wi-Fi模块，蓝牙模块，NFC模块。

在一示例性实施例中，电子设备300可以被一个或多个应用专用集成电路(Application Specific Integrated Circuit，简称ASIC)、数字信号处理器(DigitalSignal Processor，简称DSP)、数字信号处理设备(Digital Signal Processing Device，简称DSPD)、可编程逻辑器件(Programmable Logic Device，简称PLD)、现场可编程门阵列(Field Programmable Gate Array，简称FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述的图表边框的生成方法。

在另一示例性实施例中，还提供了一种包括程序指令的计算机可读存储介质，该程序指令被处理器执行时实现上述的图表边框的生成方法的步骤。例如，该计算机可读存储介质可以为上述包括程序指令的存储器302，上述程序指令可由电子设备300的处理器301执行以完成上述的图表边框的生成方法。

综上所述，本公开首先获取包含了第一边框的样式图片，将样式图片作为预设的边缘检测算法的输入，以获取边缘检测算法输出的第一边框，再根据第一边框生成包括了第一边框的属性特征的第一资源文件，当获取到边框生成指令后，根据边框生成指令中包含的目标图表的位置信息和第一资源文件，在当前界面上生成与目标图表的尺寸匹配，且与第一边框的样式相同的第二边框。能够在无需用户手动调整的前提下，根据用户需求的边框样式，自动生成与图表大小匹配的边框，便于操作，显示清晰，提高了用户体验。

以上结合附图详细描述了本公开的优选实施方式，但是，本公开并不限于上述实施方式中的具体细节，在本公开的技术构思范围内，本领域技术人员在考虑说明书及实践本公开后，容易想到本公开的其它实施方案，均属于本公开的保护范围。

另外需要说明的是，在上述具体实施方式中所描述的各个具体技术特征，在不矛盾的情况下，可以通过任何合适的方式进行组合。同时本公开的各种不同的实施方式之间也可以进行任意组合，只要其不违背本公开的思想，其同样应当视为本公开所公开的内容。本公开并不局限于上面已经描述出的精确结构，本公开的范围仅由所附的权利要求来限制。

Claims (16)

1.一种图表边框的生成方法，其特征在于，所述方法包括：

将获得的包含第一边框的样式图片作为预设的边缘检测算法的输入，以获取所述边缘检测算法输出的第一边框；

根据所述第一边框的属性特征，生成第一资源文件，所述第一资源文件包括所述第一边框的属性特征；所述属性特征包括第一边框在样式图片中所占的面积、第一边框在样式图片中的坐标信息以及第一边框的图像元素对应的坐标信息和面积，所述图像元素包括所述第一边框的顶角样式、边线样式；

当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框，所述第二边框为具有所述第一边框的样式，且与所述目标图表的尺寸匹配的边框；其中，所述第二边框包括内边缘和外边缘，所述外边缘的长减去目标图表的长的差值等于预设的第一距离，所述外边缘的宽减去目标图表的宽的差值等于预设的第二距离。

2.根据权利要求1所述的方法，其特征在于，所述将获得的包含第一边框的样式图片作为预设的边缘检测算法的输入，以获取所述边缘检测算法输出的第一边框，包括：

按照所述样式图片包含的剔除标记，去除所述样式图片中所述剔除标记所指示的图像内容，以获取中间图片；

将所述中间图片作为Canny边缘检测算法的输入，以获取所述Canny边缘检测算法输出的所述第一边框。

3.根据权利要求1所述的方法，其特征在于，所述根据所述第一边框的属性特征，生成第一资源文件，包括：

获取所述第一边框的顶角信息，所述顶角信息包括所述第一边框的多个顶角中每个顶角在所述样式图片中的坐标信息、所述每个顶角的面积和所述每个顶角在所述第一边框中的比例；

获取所述第一边框的边线信息，所述边线信息包括所述第一边框的多条边线中每条边线的长度和每条边线在所述样式图片中的坐标信息；

获取所述第一边框的描述信息，所述描述信息包括所述第一边框的面积、颜色和效果中的至少一种；

根据所述顶角信息、所述边线信息和所述描述信息，生成所述第一资源文件。

4.根据权利要求1所述的方法，其特征在于，所述当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框，包括：

当接收到所述边框生成指令后，根据所述目标图表在所述当前界面中的坐标信息，确定所述目标图表的长和宽；

根据所述目标图表的长和宽和所述第一资源文件，在所述当前界面上生成所述第二边框，所述第二边框的外边缘的长和宽，分别与所述目标图表的长和宽匹配。

5.根据权利要求3所述的方法，其特征在于，在所述当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框之后，所述方法还包括：

根据所述目标图表的属性，确定所述目标图表的重心，以及能够包含所述目标图表中所有有效信息的最小区域的顶点，所述属性包括所述目标图表的类型和所述目标图表包含的所述有效信息对应的坐标，所述有效信息包括所述目标图表中的图案，和/或文字；

控制所述第二边框的中心与所述目标图表的重心重合；

控制所述第二边框的内边缘与所述最小区域的顶点之间的距离满足预设条件。

6.根据权利要求1所述的方法，其特征在于，在所述当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框之后，所述方法还包括：

当所述当前界面上存在其他边框时，获取所述其他边框的坐标，所述其他边框为所述当前界面上的任一边框；

根据所述其他边框的坐标与所述第二边框的坐标，控制所述第二边框与所述其他边框在横坐标方向或纵坐标方向上对齐。

7.根据权利要求1所述的方法，其特征在于，所述将获得的包含第一边框的样式图片作为预设的边缘检测算法的输入，以获取所述边缘检测算法输出的第一边框，包括：

将多个样式图片依次作为所述边缘检测算法的输入，以获取所述边缘检测算法输出的多个边框，所述包含第一边框的样式图片为所述多个样式图片中的任一图片；

所述当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框，包括：

当获取到边框生成指令后，获取所述边框生成指令中包含的所述目标图表的位置信息；

当获取到在所述多个边框中选择所述第一边框的选择指令后，根据所述目标图表的位置信息，和所述第一资源文件在所述当前界面上生成所述目标图表的所述第二边框。

8.一种图表边框的生成装置，其特征在于，所述装置包括：

获取模块，用于将获得的包含第一边框的样式图片作为预设的边缘检测算法的输入，以获取所述边缘检测算法输出的第一边框；

资源生成模块，用于根据所述第一边框的属性特征，生成第一资源文件，所述第一资源文件包括所述第一边框的属性特征；所述属性特征包括第一边框在样式图片中所占的面积、第一边框在样式图片中的坐标信息以及第一边框的图像元素对应的坐标信息和面积，所述图像元素包括所述第一边框的顶角样式、边线样式；

边框生成模块，用于当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框，所述第二边框为具有所述第一边框的样式，且与所述目标图表的尺寸匹配的边框；其中，所述第二边框包括内边缘和外边缘，所述外边缘的长减去目标图表的长的差值等于预设的第一距离，所述外边缘的宽减去目标图表的宽的差值等于预设的第二距离。

9.根据权利要求8所述的装置，其特征在于，所述获取模块包括：

剔除子模块，用于按照所述样式图片包含的剔除标记，去除所述样式图片中所述剔除标记所指示的图像内容，以获取中间图片；

获取子模块，用于将所述中间图片作为Canny边缘检测算法的输入，以获取所述Canny边缘检测算法输出的所述第一边框。

10.根据权利要求8所述的装置，其特征在于，所述资源生成模块包括：

顶角获取子模块，用于获取所述第一边框的顶角信息，所述顶角信息包括所述第一边框的多个顶角中每个顶角在所述样式图片中的坐标信息、所述每个顶角的面积和所述每个顶角在所述第一边框中的比例；

边线获取子模块，用于获取所述第一边框的边线信息，所述边线信息包括所述第一边框的多条边线中每条边线的长度和每条边线在所述样式图片中的坐标信息；

描述获取子模块，用于获取所述第一边框的描述信息，所述描述信息包括所述第一边框的面积、颜色和效果中的至少一种；

资源生成子模块，用于根据所述顶角信息、所述边线信息和所述描述信息，生成所述第一资源文件。

11.根据权利要求8所述的装置，其特征在于，所述边框生成模块包括：

确定子模块，用于当接收到所述边框生成指令后，根据所述目标图表在所述当前界面中的坐标信息，确定所述目标图表的长和宽；

第一生成子模块，用于根据所述目标图表的长和宽和所述第一资源文件，在所述当前界面上生成所述第二边框，所述第二边框的外边缘的长和宽，分别与所述目标图表的长和宽匹配。

12.根据权利要求10所述的装置，其特征在于，所述装置还包括：

确定模块，用于在所述当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框之后，根据所述目标图表的属性，确定所述目标图表的重心，以及能够包含所述目标图表中所有有效信息的最小区域的顶点，所述属性包括所述目标图表的类型和所述目标图表包含的所述有效信息对应的坐标，所述有效信息包括所述目标图表中的图案，和/或文字；

控制模块，用于控制所述第二边框的中心与所述目标图表的重心重合；

所述控制模块，还用于控制所述第二边框的内边缘与所述最小区域的顶点之间的距离满足预设条件。

13.根据权利要求8所述的装置，其特征在于，所述装置还包括：

边框获取模块，用于在所述当获取到边框生成指令后，根据所述边框生成指令中包含的目标图表的位置信息，和所述第一资源文件在当前界面上生成所述目标图表的第二边框之后，当所述当前界面上存在其他边框时，获取所述其他边框的坐标，所述其他边框为所述当前界面上的任一边框；

对齐模块，用于根据所述其他边框的坐标与所述第二边框的坐标，控制所述第二边框与所述其他边框在横坐标方向或纵坐标方向上对齐。

14.根据权利要求8所述的装置，其特征在于，所述获取模块，用于将多个样式图片依次作为所述边缘检测算法的输入，以获取所述边缘检测算法输出的多个边框，所述包含第一边框的样式图片为所述多个样式图片中的任一图片；

所述边框生成模块包括：

指令获取子模块，用于当获取到边框生成指令后，获取所述边框生成指令中包含的所述目标图表的位置信息；

第二生成子模块，用于当获取到在所述多个边框中选择所述第一边框的选择指令后，根据所述目标图表的位置信息，和所述第一资源文件在所述当前界面上生成所述目标图表的所述第二边框。

15.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现权利要求1-7中任一项所述方法的步骤。

16.一种电子设备，其特征在于，包括：

存储器，其上存储有计算机程序；

处理器，用于执行所述存储器中的所述计算机程序，以实现权利要求1-7中任一项所述方法的步骤。

Images