一种基于canvas的词云绘制方法和系统

技术领域

本发明属于图形处理领域，尤其涉及一种基于canvas的词云绘制方法和系统。

背景技术

用ECharts做数据可视化时，现有echarts-wordcloud JS插件提供的词云，支持调整整个画图区域的形状或者用任意形状的背景图做为画图区域的背景。可以统一调整词的间距、大小、字体、颜色、旋转角度。也可以对某些词进行文字样式调整来突出显示某些词。但echarts-wordcloud JS插件提供的词云不能单独给每个词加背景颜色或背景图片，也不能给某些词设置特定的间距，也无法根据区域自适应调整词间距。在见过很多这样的词云布局以后，客户已经产生审美疲劳。

也可以用ECharts散点图模拟词云组件，需要事先知道各种布局中圆心的坐标，圆心半径，在某个特定宽高的区域随机根据某种布局展示这些词。当缩放时，布局的相对位置会进行等比缩放。但ECharts散点图绘制词云组件，本质是对各个散点进行美化。由于布局需要事先计算坐标，故词云的布局方式会有限制。每新增1种布局都需要人工接入，不够自动化。

发明内容

本申请实施例提供了一种基于canvas的词云绘制方法和系统，以至少解决现有词云绘制方法样式单一、不美观的问题。

第一方面，本申请实施例提供了一种基于canvas的词云绘制方法，包括：数据配置步骤，获取待生成词云的词的数据，所述词的数据包括所述词的个数及每个所述词的频率；第一圆形绘制步骤，根据频率最高的所述词的频率绘制一第一圆形；第二圆形绘制步骤，获取所述第一圆形的外接正方形，根据所述词的个数及每个所述词的频率，并根据一预设规则绘制第二圆形；

递进绘制步骤，若所述第一圆形与所述第二圆形的数量小于所述词的个数，则根据所述词的个数及每个所述词的频率，并根据所述预设规则递进绘制第三圆形。

优选的，所述预设规则包括：获取一随机圆心系数，根据所述随机圆心系数确定所述圆形的圆心；根据每个所述词的频率确定所述圆形的半径。

优选的，所述预设规则还包括：根据所述圆心和所述半径绘制所述圆形时，若所述圆形与现有所述圆形存在重叠，则重新确定所述圆心。

优选的，所述方法还包括一字号确定步骤，通过梯形算法，并根据所述圆形的半径计算词云中文字的大小。

优选的，所述方法通过canvas标签所生成的画布实现。

第二方面，本申请实施例提供了一种基于canvas的词云绘制系统，适用于上述一种基于canvas的词云绘制方法，包括：数据配置单元，获取待生成词云的词的数据，所述词的数据包括所述词的个数及每个所述词的频率；第一圆形绘制单元，根据频率最高的所述词的频率绘制一第一圆形；第二圆形绘制单元，获取所述第一圆形的外接正方形，根据所述词的个数及每个所述词的频率，并根据一预设规则绘制第二圆形；递进绘制单元，若所述第一圆形与所述第二圆形的数量小于所述词的个数，则根据所述词的个数及每个所述词的频率，并根据所述预设规则递进绘制第三圆形。

在其中一些实施例中，所述预设规则包括：获取一随机圆心系数，根据所述随机圆心系数确定所述圆形的圆心；根据每个所述词的频率确定所述圆形的半径。

在其中一些实施例中，所述预设规则还包括：根据所述圆心和所述半径绘制所述圆形时，若所述圆形与现有所述圆形存在重叠，则重新确定所述圆心。

在其中一些实施例中，所述系统还包括一字号确定单元，通过梯形算法，并根据所述圆形的半径计算词云中文字的大小。

在其中一些实施例中，所述系统通过canvas标签所生成的画布实现。

相比于相关技术，本申请实施例提供的一种基于canvas的词云绘制方法自动生成各种布局，可以给每个词加上背景色或背景图片。并且该词云图会随着画图区域宽高变化自动重新绘制。解决了词云领域无法随区域变化自动调整布局的问题。球的大小就代表声量大小，帮助用户快速找到最大声量的词。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本发明的基于canvas的词云绘制方法流程图；

图2为本发明的基于canvas的词云绘制系统的框架图；

图3为本发明的电子设备的框架图；

以上图中：

1、数据配置单元；2、第一圆形绘制单元；3、第二圆形绘制单元；4、递进绘制单元；5、字号确定单元；60、总线；61、处理器；62、存储器；63、通信接口。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行描述和说明。应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。基于本申请提供的实施例，本领域普通技术人员在没有作出创造性劳动的前提下所获得的所有其他实施例，都属于本申请保护的范围。

显而易见地，下面描述中的附图仅仅是本申请的一些示例或实施例，对于本领域的普通技术人员而言，在不付出创造性劳动的前提下，还可以根据这些附图将本申请应用于其他类似情景。此外，还可以理解的是，虽然这种开发过程中所作出的努力可能是复杂并且冗长的，然而对于与本申请公开的内容相关的本领域的普通技术人员而言，在本申请揭露的技术内容的基础上进行的一些设计，制造或者生产等变更只是常规的技术手段，不应当理解为本申请公开的内容不充分。

在本申请中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域普通技术人员显式地和隐式地理解的是，本申请所描述的实施例在不冲突的情况下，可以与其它实施例相结合。

除非另作定义，本申请所涉及的技术术语或者科学术语应当为本申请所属技术领域内具有一般技能的人士所理解的通常意义。本申请所涉及的“一”、“一个”、“一种”、“该”等类似词语并不表示数量限制，可表示单数或复数。本申请所涉及的术语“包括”、“包含”、“具有”以及它们任何变形，意图在于覆盖不排他的包含；例如包含了一系列步骤或模块(单元)的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是可以还包括没有列出的步骤或单元，或可以还包括对于这些过程、方法、产品或设备固有的其它步骤或单元。

以下，结合附图详细介绍本发明的实施例：

图1为本发明的基于canvas的词云绘制方法流程图，请参见图1，本发明基于canvas的词云绘制方法包括如下步骤：

可选的，本申请实施例通过canvas标签所生成的画布实现。

S1：获取待生成词云的词的数据，所述词的数据包括所述词的个数及每个所述词的频率。

在具体实施中，获取到需要绘制为词云的词数据，为绘制词云做准备；绘制词云时，需要的数据包括词的个数及词的频率。可选的，准备一组作为词云背景的图片。

S2：根据频率最高的所述词的频率绘制一第一圆形。

在具体实施中，获取画布4个角[topLeft,topRight,bottomRight,bottomLeft]的坐标，算出中心点A坐标[x,y]。

在具体实施中，计算频率最高的词所对应的半径作为半径R1，画圆为Circle A，计算出Circle A组成外接正方形4个角[topLeftA,topRightA,bottomRightA,bottomLeftA]的坐标。

S3：获取所述第一圆形的外接正方形，根据所述词的个数及每个所述词的频率，并根据一预设规则绘制第二圆形。

可选的，所述预设规则包括：获取一随机圆心系数，根据所述随机圆心系数确定所述圆形的圆心；根据每个所述词的频率确定所述圆形的半径。

在具体实施中，继续计算下一个词所对应的半径作为半径R11，运用随机函数取随机值RM11，可选的，取0-10px之间的某个值；取topLeftA的坐标分别减去R11，加上RM11得到中心点A1的坐标[A1X,A1Y]，以R11为半径画圆为Circle A1，计算出Circle A1组成正方形4个角[topLeftA1,topRightA1,bottomRightA1,bottomLeftA1]的坐标。

在具体实施中，继续计算下一个词所对应的半径作为半径R12，运用随机函数取随机值RM12，可选的，取0-10px之间的某个值；取topRightA的坐标X轴方向加上R12，Y轴方向减去R12，加上RM12得到中心点A2的坐标为[A2X,A2Y]。

可选的，所述预设规则还包括：根据所述圆心和所述半径绘制所述圆形时，若所述圆形与现有所述圆形存在重叠，则重新确定所述圆心。

在具体实施中，用A2的坐标减去任意已生成的圆心得到的差值DIF都必须大于两个圆的半径之和以防止圆重叠，用A2的坐标减去画布4个角的坐标得到的差值DIF1必须大于该圆自身半径以防止溢出边界、显示不全。这时就以R12为半径画圆为Circle A2，计算出Circle A2组成正方形4个角[topLeftA2,topRightA2,bottomRightA2,bottomLeftA2]的坐标。

在具体实施中，若DIF不满足条件，则继续向外扩展坐标。在具体实施中，不同方向扩展坐标的方式略有差异，若为topLeft左上角，向外扩展坐标的方式为X轴减去一定值，Y轴减去一定值；若为topRight右上角，向外扩展坐标的方式为X轴加上一定值，Y轴减去一定值；若为bottomRight右下角，向外扩展坐标的方式为X轴加上一定值，Y轴加上一定值；若为topRight右上角，向外扩展坐标的方式为X轴减去一定值，Y轴加上一定值；若第一次调整坐标后，会有重叠，则进行第2次调整，每次向外扩展一定值。可选的，若超出边界，则结束本方向的计算，换方向继续寻找合适的圆心坐标。可选的，一定值可为10px。

在具体实施中，继续计算下一个词所对应的半径作为半径R13，运用随机函数取随机值RM13，可选的，取0-10px之间的某个值；取bottomRightA的坐标分别加R13，加上RM13得到中心点A3的坐标[A3X,A3Y]，重复上述步骤后确定最终的中心点坐标。以R13为半径画圆为Circle A3，计算出Circle A3组成正方形4个角[topLeftA3,topRightA3,bottomRightA3,bottomLeftA3]的坐标

在具体实施中，继续计算下一个词所对应的半径作为半径R14，运用随机函数取随机值RM14，可选的，取0-10px之间的某个值；取bottomLeftA的坐标分别减去R14，加上RM14得到中心点A4的坐标，以R14为半径画圆为Circle A4，计算出Circle A4组成正方形4个角[topLeftA4,topRightA4,bottomRightA4,bottomLeftA4]的坐标[A4X,A4Y]，重复上述步骤后确定最终的中心点坐标。

S4：若所述第一圆形与所述第二圆形的数量小于所述词的个数，则根据所述词的个数及每个所述词的频率，并根据所述预设规则递进绘制第三圆形。

在具体实施中，后面将对上述步骤生成的圆形的4个角进行同样的操作，直到所有数据都循环完成。

S5：通过梯形算法，并根据所述圆形的半径计算词云中文字的大小。

在具体实施中，文字的大小，采用梯形算法，根据所生成圆形的大小自动计算出文字大小，进一步加强词云美观性。

可选的，可限制每个背景图片显示的单词数量，鼠标悬浮在背景图上可以看到完整的词，也可以不限制展示的单词数量，词会完成显示出来，可以进行换行、文字加粗、改变文字颜色，给文字加阴影等。

需要说明的是，在上述流程中或者附图的流程图中示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本申请实施例提供了一种基于canvas的词云绘制系统，适用于上述的一种基于canvas的词云绘制方法。如以下所使用的，术语“单元”、“模块”等可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件、或者软件和硬件的组合的实现也是可能并被构想的。

图2为根据本发明的基于canvas的词云绘制系统的框架图，请参见图2，包括：

数据配置单元1：获取待生成词云的词的数据，所述词的数据包括所述词的个数及每个所述词的频率。

在具体实施中，获取到需要绘制为词云的词数据，为绘制词云做准备；绘制词云时，需要的数据包括词的个数及词的频率。可选的，准备一组作为词云背景的图片。

第一圆形绘制单元2：根据频率最高的所述词的频率绘制一第一圆形。

在具体实施中，获取画布4个角[topLeft,topRight,bottomRight,bottomLeft]的坐标，算出中心点A坐标[x,y]。

在具体实施中，计算频率最高的词所对应的半径作为半径R1，画圆为Circle A，计算出Circle A组成外接正方形4个角[topLeftA,topRightA,bottomRightA,bottomLeftA]的坐标。

第二圆形绘制单元3：获取所述第一圆形的外接正方形，根据所述词的个数及每个所述词的频率，并根据一预设规则绘制第二圆形。

可选的，所述预设规则包括：获取一随机圆心系数，根据所述随机圆心系数确定所述圆形的圆心；根据每个所述词的频率确定所述圆形的半径。

在具体实施中，继续计算下一个词所对应的半径作为半径R11，运用随机函数取随机值RM11，可选的，取0-10px之间的某个值；取topLeftA的坐标分别减去R11，加上RM11得到中心点A1的坐标[A1X,A1Y]，以R11为半径画圆为Circle A1，计算出Circle A1组成正方形4个角[topLeftA1,topRightA1,bottomRightA1,bottomLeftA1]的坐标。

在具体实施中，继续计算下一个词所对应的半径作为半径R12，运用随机函数取随机值RM12，可选的，取0-10px之间的某个值；取topRightA的坐标X轴方向加上R12，Y轴方向减去R12，加上RM12得到中心点A2的坐标为[A2X,A2Y]。

可选的，所述预设规则还包括：根据所述圆心和所述半径绘制所述圆形时，若所述圆形与现有所述圆形存在重叠，则重新确定所述圆心。

在具体实施中，用A2的坐标减去任意已生成的圆心得到的差值DIF都必须大于两个圆的半径之和以防止圆重叠，用A2的坐标减去画布4个角的坐标得到的差值DIF1必须大于该圆自身半径以防止溢出边界、显示不全。这时就以R12为半径画圆为Circle A2，计算出Circle A2组成正方形4个角[topLeftA2,topRightA2,bottomRightA2,bottomLeftA2]的坐标。

在具体实施中，若DIF不满足条件，则继续向外扩展坐标。在具体实施中，不同方向扩展坐标的方式略有差异，若为topLeft左上角，向外扩展坐标的方式为X轴减去一定值，Y轴减去一定值；若为topRight右上角，向外扩展坐标的方式为X轴加上一定值，Y轴减去一定值；若为bottomRight右下角，向外扩展坐标的方式为X轴加上一定值，Y轴加上一定值；若为topRight右上角，向外扩展坐标的方式为X轴减去一定值，Y轴加上一定值；若第一次调整坐标后，会有重叠，则进行第2次调整，每次向外扩展一定值。可选的，若超出边界，则结束本方向的计算，换方向继续寻找合适的圆心坐标。可选的，一定值可为10px。

在具体实施中，继续计算下一个词所对应的半径作为半径R13，运用随机函数取随机值RM13，可选的，取0-10px之间的某个值；取bottomRightA的坐标分别加R13，加上RM13得到中心点A3的坐标[A3X,A3Y]，重复上述步骤后确定最终的中心点坐标。以R13为半径画圆为Circle A3，计算出Circle A3组成正方形4个角[topLeftA3,topRightA3,bottomRightA3,bottomLeftA3]的坐标

在具体实施中，继续计算下一个词所对应的半径作为半径R14，运用随机函数取随机值RM14，可选的，取0-10px之间的某个值；取bottomLeftA的坐标分别减去R14，加上RM14得到中心点A4的坐标，以R14为半径画圆为Circle A4，计算出Circle A4组成正方形4个角[topLeftA4,topRightA4,bottomRightA4,bottomLeftA4]的坐标[A4X,A4Y]，重复上述步骤后确定最终的中心点坐标。

递进绘制单元4：若所述第一圆形与所述第二圆形的数量小于所述词的个数，则根据所述词的个数及每个所述词的频率，并根据所述预设规则递进绘制第三圆形。

在具体实施中，后面将对上述步骤生成的圆形的4个角进行同样的操作，直到所有数据都循环完成。

字号确定单元5：通过梯形算法，并根据所述圆形的半径计算词云中文字的大小。

在具体实施中，文字的大小，采用梯形算法，根据所生成圆形的大小自动计算出文字大小，进一步加强词云美观性。

可选的，可限制每个背景图片显示的单词数量，鼠标悬浮在背景图上可以看到完整的词，也可以不限制展示的单词数量，词会完成显示出来，可以进行换行、文字加粗、改变文字颜色，给文字加阴影等。

另外，结合图1描述的一种基于canvas的词云绘制方法可以由一电子设备来实现。图3为本发明的电子设备的框架图。

电子设备可以包括处理器61以及存储有计算机程序指令的存储器62。

具体地，上述处理器61可以包括中央处理器(CPU)，或者特定集成电路(Application Specific Integrated Circuit，简称为ASIC)，或者可以被配置成实施本申请实施例的一个或多个集成电路。

其中，存储器62可以包括用于数据或指令的大容量存储器。举例来说而非限制，存储器62可包括硬盘驱动器(Hard Disk Drive，简称为HDD)、软盘驱动器、固态驱动器(SolidState Drive，简称为SSD)、闪存、光盘、磁光盘、磁带或通用串行总线(Universal SerialBus，简称为USB)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器62可包括可移除或不可移除(或固定)的介质。在合适的情况下，存储器62可在数据处理装置的内部或外部。在特定实施例中，存储器62是非易失性(Non-Volatile)存储器。在特定实施例中，存储器62包括只读存储器(Read-Only Memory，简称为ROM)和随机存取存储器(RandomAccess Memory，简称为RAM)。在合适的情况下，该ROM可以是掩模编程的ROM、可编程ROM(Programmable Read-Only Memory，简称为PROM)、可擦除PROM(Erasable ProgrammableRead-Only Memory，简称为EPROM)、电可擦除PROM(Electrically Erasable ProgrammableRead-Only Memory，简称为EEPROM)、电可改写ROM(Electrically Alterable Read-OnlyMemory，简称为EAROM)或闪存(FLASH)或者两个或更多个以上这些的组合。在合适的情况下，该RAM可以是静态随机存取存储器(Static Random-Access Memory，简称为SRAM)或动态随机存取存储器(Dynamic Random Access Memory，简称为DRAM)，其中，DRAM可以是快速页模式动态随机存取存储器(Fast Page Mode Dynamic Random Access Memory，简称为FPMDRAM)、扩展数据输出动态随机存取存储器(Extended Date Out Dynamic RandomAccess Memory，简称为EDODRAM)、同步动态随机存取内存(Synchronous Dynamic Random-Access Memory，简称SDRAM)等。

存储器62可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器61所执行的可能的计算机程序指令。

处理器61通过读取并执行存储器62中存储的计算机程序指令，以实现上述实施例中的任意一种基于canvas的词云绘制方法。

在其中一些实施例中，电子设备还可包括通信接口63和总线60。其中，如图3所示，处理器61、存储器62、通信接口63通过总线60连接并完成相互间的通信。

通信端口63可以实现与其他部件例如：外接设备、图像/数据采集设备、数据库、外部存储以及图像/数据处理工作站等之间进行数据通信。

总线60包括硬件、软件或两者，将电子设备的部件彼此耦接在一起。总线60包括但不限于以下至少之一：数据总线(Data Bus)、地址总线(Address Bus)、控制总线(ControlBus)、扩展总线(Expansion Bus)、局部总线(Local Bus)。举例来说而非限制，总线60可包括图形加速接口(Accelerated Graphics Port，简称为AGP)或其他图形总线、增强工业标准架构(Extended Industry Standard Architecture，简称为EISA)总线、前端总线(FrontSide Bus，简称为FSB)、超传输(Hyper Transport，简称为HT)互连、工业标准架构(Industry Standard Architecture，简称为ISA)总线、无线带宽(InfiniBand)互连、低引脚数(Low Pin Count，简称为LPC)总线、存储器总线、微信道架构(Micro ChannelArchitecture，简称为MCA)总线、外围组件互连(Peripheral Component Interconnect，简称为PCI)总线、PCI-Express(PCI-X)总线、串行高级技术附件(Serial AdvancedTechnology Attachment，简称为SATA)总线、视频电子标准协会局部(Video ElectronicsStandards Association Local Bus，简称为VLB)总线或其他合适的总线或者两个或更多个以上这些的组合。在合适的情况下，总线60可包括一个或多个总线。尽管本申请实施例描述和示出了特定的总线，但本申请考虑任何合适的总线或互连。

该电子设备可以执行本申请实施例中的一种基于canvas的词云绘制方法。

另外，结合上述实施例中的一种基于canvas的词云绘制方法，本申请实施例可提供一种计算机可读存储介质来实现。该计算机可读存储介质上存储有计算机程序指令；该计算机程序指令被处理器执行时实现上述实施例中的任意一种基于canvas的词云绘制方法。

而前述的存储介质包括：U盘、移动硬盘、只读存储器(ReadOnly Memory，简称为ROM)、随机存取存储器(Random Access Memory，简称为RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。