CN112819917A

CN112819917A - Word cloud drawing method and system based on canvas

Info

Publication number: CN112819917A
Application number: CN202110081883.3A
Authority: CN
Inventors: 胡奥
Original assignee: Beijing Second Hand Artificial Intelligence Technology Co ltd
Current assignee: Beijing Second Hand Artificial Intelligence Technology Co ltd
Priority date: 2021-01-21
Filing date: 2021-01-21
Publication date: 2021-05-18
Anticipated expiration: 2041-01-21
Also published as: CN112819917B

Abstract

The invention provides a word cloud drawing method and system based on canvas, wherein the technical scheme of the method comprises a data configuration step, wherein data of words of the word cloud to be generated is obtained, and the data of the words comprises the number of the words and the frequency of each word; a first circle drawing step of drawing a first circle according to the frequency of the word with the highest frequency; a second circle drawing step, namely obtaining the circumscribed square of the first circle, and drawing a second circle according to the number of the words and the frequency of each word and a preset rule; and a step of progressive drawing, wherein if the number of the first circles and the second circles is less than the number of the words, a third circle is drawn progressively according to the number of the words and the frequency of each word and the preset rule. The invention solves the problems of single style and unattractive appearance of the existing word cloud drawing method.

Description

Word cloud drawing method and system based on canvas

Technical Field

The invention belongs to the field of graphic processing, and particularly relates to a word cloud drawing method and system based on canvas.

Background

When ECharts is used for data visualization, the word cloud provided by the existing ECharts-word cloud JS plug-in supports the adjustment of the shape of the whole drawing area or the background picture with any shape is used as the background of the drawing area. The space, size, font, color and rotation angle of the words can be adjusted in a unified way. Word style adjustments may also be made to certain words to highlight certain words. However, the word cloud provided by the echarts-word cloud JS plug-in cannot add a background color or a background picture to each word independently, cannot set a specific interval for some words, and cannot adjust the word interval in a self-adaptive manner according to the region. After seeing many such word cloud layouts, customers have become aesthetically fatigued.

The word cloud component can also be simulated by using an ECharts scatter diagram, the coordinates and the radius of the circle center in various layouts are required to be known in advance, and the words are randomly displayed in a certain area with a specific width and a specific height according to a certain layout. When scaling, the relative positions of the layouts are scaled proportionally. However, the word cloud component drawn by the ECharts scatter diagram is essentially beautified for each scatter point. Since the coordinates need to be calculated in advance in the layout, the layout manner of the word cloud is limited. Every 1 new layout needs manual access, and automation is not enough.

Disclosure of Invention

The embodiment of the application provides a word cloud drawing method and system based on canvas, which at least solve the problems of single style and unattractive appearance of the existing word cloud drawing method.

In a first aspect, an embodiment of the present application provides a canvas-based word cloud rendering method, including: the method comprises the steps of data configuration, wherein data of words of a word cloud to be generated are obtained, and the data of the words comprise the number of the words and the frequency of each word; a first circle drawing step of drawing a first circle according to the frequency of the word with the highest frequency; a second circle drawing step, namely obtaining the circumscribed square of the first circle, and drawing a second circle according to the number of the words and the frequency of each word and a preset rule;

and a step of progressive drawing, wherein if the number of the first circles and the second circles is less than the number of the words, a third circle is drawn progressively according to the number of the words and the frequency of each word and the preset rule.

Preferably, the preset rule includes: acquiring a random circle center coefficient, and determining the circle center of the circle according to the random circle center coefficient; determining a radius of the circle based on the frequency of each of the words.

Preferably, the preset rule further includes: and when the circle is drawn according to the circle center and the radius, if the circle is overlapped with the existing circle, the circle center is determined again.

Preferably, the method further comprises a word size determining step, and the size of the characters in the word cloud is calculated according to the radius of the circle through a trapezoidal algorithm.

Preferably, the method is implemented by a canvas generated by a canvas tag.

In a second aspect, an embodiment of the present application provides a canvas-based word cloud rendering system, which is suitable for the canvas-based word cloud rendering method, and includes: the data configuration unit is used for acquiring data of words of a word cloud to be generated, wherein the data of the words comprises the number of the words and the frequency of each word; a first circle drawing unit drawing a first circle according to the frequency of the word having the highest frequency; the second circle drawing unit is used for obtaining the circumscribed square of the first circle, drawing a second circle according to the number of the words and the frequency of each word and a preset rule; and the progressive drawing unit is used for progressively drawing a third circle according to the number of the words and the frequency of each word and the preset rule if the number of the first circle and the second circle is less than the number of the words.

In some embodiments, the preset rules include: acquiring a random circle center coefficient, and determining the circle center of the circle according to the random circle center coefficient; determining a radius of the circle based on the frequency of each of the words.

In some embodiments, the preset rule further includes: and when the circle is drawn according to the circle center and the radius, if the circle is overlapped with the existing circle, the circle center is determined again.

In some embodiments, the system further includes a word size determining unit, which calculates the size of the words in the word cloud according to the radius of the circle by using a trapezoidal algorithm.

In some of these embodiments, the system is implemented by the canvas generated by the canvas tab.

Compared with the related art, the word cloud drawing method based on canvas provided by the embodiment of the application can automatically generate various layouts, and can add background colors or background pictures to each word. And the word cloud picture can be automatically redrawn along with the change of the width and the height of the picture area. The problem that the layout cannot be automatically adjusted along with the change of the region in the word cloud field is solved. The size of the ball represents the volume of sound, helping the user to quickly find the word with the largest volume.

Drawings

The accompanying drawings, which are included to provide a further understanding of the application and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the application and together with the description serve to explain the application and not to limit the application. In the drawings:

fig. 1 is a flowchart of a canvas-based word cloud rendering method according to the present invention;

FIG. 2 is a block diagram of the canvas-based word cloud rendering system of the present invention;

FIG. 3 is a block diagram of an electronic device of the present invention;

in the above figures:

1. a data configuration unit; 2. a first circle drawing unit; 3. a second circle drawing unit; 4. a progressive rendering unit; 5. a font size determination unit; 60. a bus; 61. a processor; 62. a memory; 63. a communication interface.

Detailed Description

In order to make the objects, technical solutions and advantages of the present application more apparent, the present application will be described and illustrated below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application. All other embodiments obtained by a person of ordinary skill in the art based on the embodiments provided in the present application without any inventive step are within the scope of protection of the present application.

It is obvious that the drawings in the following description are only examples or embodiments of the present application, and that it is also possible for a person skilled in the art to apply the present application to other similar contexts on the basis of these drawings without inventive effort. Moreover, it should be appreciated that in the development of any such actual implementation, as in any engineering or design project, numerous implementation-specific decisions must be made to achieve the developers' specific goals, such as compliance with system-related and business-related constraints, which may vary from one implementation to another.

Reference in the specification to "an embodiment" means that a particular feature, structure, or characteristic described in connection with the embodiment can be included in at least one embodiment of the specification. The appearances of the phrase in various places in the specification are not necessarily all referring to the same embodiment, nor are separate or alternative embodiments mutually exclusive of other embodiments. Those of ordinary skill in the art will explicitly and implicitly appreciate that the embodiments described herein may be combined with other embodiments without conflict.

Unless defined otherwise, technical or scientific terms referred to herein shall have the ordinary meaning as understood by those of ordinary skill in the art to which this application belongs. Reference to "a," "an," "the," and similar words throughout this application are not to be construed as limiting in number, and may refer to the singular or the plural. The present application is directed to the use of the terms "including," "comprising," "having," and any variations thereof, which are intended to cover non-exclusive inclusions; for example, a process, method, system, article, or apparatus that comprises a list of steps or modules (elements) is not limited to the listed steps or elements, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

Embodiments of the invention are described in detail below with reference to the accompanying drawings:

fig. 1 is a flowchart of a canvas-based word cloud rendering method according to the present invention, please refer to fig. 1, where the canvas-based word cloud rendering method according to the present invention includes the following steps:

optionally, the embodiment of the present application is implemented by a canvas generated by a canvas tag.

S1: acquiring data of words of a word cloud to be generated, wherein the data of the words comprises the number of the words and the frequency of each word.

In specific implementation, word data needing to be drawn as word cloud is obtained, and preparation is made for drawing the word cloud; when the word cloud is drawn, the required data includes the number of words and the frequency of the words. Optionally, a set of pictures is prepared as a word cloud background.

S2: a first circle is drawn according to the frequency of the word with the highest frequency.

In the specific implementation, coordinates of 4 corners [ topLeft, topRight, bottomRight, bottomLeft ] of the canvas are obtained, and coordinates [ x, y ] of the center point A are calculated.

In specific implementation, the radius corresponding to the word with the highest frequency is calculated as the radius R1, the Circle is drawn as Circle a, and the coordinates of 4 corners [ topLeftA, topRightA, bottomright, bottomLeftA ] of the circumscribed square formed by Circle a are calculated.

S3: and obtaining the circumscribed square of the first circle, and drawing a second circle according to the number of the words and the frequency of each word and a preset rule.

Optionally, the preset rule includes: acquiring a random circle center coefficient, and determining the circle center of the circle according to the random circle center coefficient; determining a radius of the circle based on the frequency of each of the words.

In specific implementation, the radius corresponding to the next word is continuously calculated to serve as the radius R11, a random function is used for taking a random value RM11, and optionally, a certain value between 0 and 10px is taken; and subtracting R11 from the coordinates of topLeftA, adding RM11 to obtain coordinates [ A1X and A1Y ] of a central point A1, drawing a Circle with R11 as a radius to form Circle A1, and calculating coordinates of 4 corners [ topLeftA1, toprightA1, bottomRightA1 and bottomLeftA1] formed by Circle A1.

In specific implementation, the radius corresponding to the next word is continuously calculated to serve as the radius R12, a random function is used for taking a random value RM12, and optionally, a certain value between 0 and 10px is taken; the coordinates of the center point A2 are [ A2X, A2Y ] obtained by adding R12 to the X-axis direction and R12 to the Y-axis direction of the topright A coordinates and adding RM 12.

Optionally, the preset rule further includes: and when the circle is drawn according to the circle center and the radius, if the circle is overlapped with the existing circle, the circle center is determined again.

In a specific implementation, the difference DIF obtained by subtracting any generated center of the circle from the coordinates of a2 must be larger than the sum of the radii of the two circles to prevent the circles from overlapping, and the difference DIF1 obtained by subtracting the coordinates of the corner of the canvas 4 from the coordinates of a2 must be larger than the radius of the circle itself to prevent the overflow from the boundary and the incomplete display. At this time, a Circle is drawn by taking R12 as a radius to be Circle A2, and coordinates of 4 corners [ topLeftA2, toprightA2, bottomRightA2 and bottomLeftA2] of the square formed by Circle A2 are calculated.

In a specific implementation, if DIF does not satisfy the condition, the coordinates continue to expand outward. In the specific implementation, the modes of extending the coordinates in different directions are slightly different, if the coordinate is the upper left corner of topLeft, the mode of extending the coordinates outwards is that a certain value is subtracted from the X axis, and a certain value is subtracted from the Y axis; if the position is the upper right corner of topRight, the mode of extending the coordinate outwards is that a certain value is added to the X axis, and a certain value is subtracted from the Y axis; if the coordinate is the bottom right corner of the bottom right, the coordinate is expanded outwards by adding a certain value to the X axis and adding a certain value to the Y axis; if the position is the upper right corner of topRight, the mode of extending the coordinate outwards is that a certain value is subtracted from the X axis, and a certain value is added to the Y axis; if there is overlap after the first adjustment of coordinates, the 2 nd adjustment is performed, each time extending outward by a certain value. Optionally, if the boundary is exceeded, the calculation of the direction is ended, and the direction is changed to continue to search for a proper circle center coordinate. Alternatively, a certain value may be 10 px.

In specific implementation, the radius corresponding to the next word is continuously calculated to serve as the radius R13, a random function is used for taking a random value RM13, and optionally, a certain value between 0 and 10px is taken; and (3) adding R13 to the coordinates of bottomRight A and adding RM13 to obtain coordinates [ A3X, A3Y ] of the center point A3, and repeating the steps to determine the final center point coordinates. The R13 is taken as a radius to draw a Circle as Circle A3, and the coordinates of 4 corners [ topLeftA3, topRight A3, bottomRightA3 and bottomLeftA3] of the square formed by Circle A3 are calculated

In specific implementation, the radius corresponding to the next word is continuously calculated to serve as the radius R14, a random function is used for taking a random value RM14, and optionally, a certain value between 0 and 10px is taken; and (3) respectively subtracting R14 from the coordinates of bottom LeftA, adding RM14 to obtain the coordinates of a central point A4, drawing a Circle with R14 as a radius to obtain Circle A4, calculating the coordinates [ A4X and A4Y ] of 4 corners [ topLeftA4, toprightA4, bottom RightA4 and bottom LeftA4] of the square formed by Circle A4, and repeating the steps to determine the final central point coordinates.

S4: if the number of the first circles and the number of the second circles are smaller than the number of the words, a third circle is drawn progressively according to the number of the words and the frequency of each word and the preset rule.

In a specific implementation, the same operation will be performed later on the 4 corners of the circle generated in the above step until all data is looped.

S5: and calculating the size of the characters in the word cloud according to the radius of the circle by a trapezoidal algorithm.

In specific implementation, the size of the characters is automatically calculated according to the size of the generated circle by adopting a trapezoidal algorithm, so that the appearance of word cloud is further enhanced.

Optionally, the number of words displayed by each background picture can be limited, a mouse can be suspended on the background picture to see complete words, the number of displayed words can also be unlimited, the words can be displayed, line changing, character thickening, character color changing, character shading and the like can be performed.

It should be noted that the steps illustrated in the above-described flow diagrams or in the flow diagrams of the figures may be performed in a computer system, such as a set of computer-executable instructions, and that, although a logical order is illustrated in the flow diagrams, in some cases, the steps illustrated or described may be performed in an order different than here.

The embodiment of the application provides a canvas-based word cloud drawing system, which is suitable for the canvas-based word cloud drawing method. As used below, the terms "unit," "module," and the like may implement a combination of software and/or hardware of predetermined functions. Although the means described in the embodiments below are preferably implemented in software, an implementation in hardware or a combination of software and hardware is also possible and contemplated.

Fig. 2 is a block diagram of a canvas-based word cloud rendering system according to the present invention, please refer to fig. 2, which includes:

data configuration unit 1: acquiring data of words of a word cloud to be generated, wherein the data of the words comprises the number of the words and the frequency of each word.

First circle drawing unit 2: a first circle is drawn according to the frequency of the word with the highest frequency.

Second circle drawing unit 3: and obtaining the circumscribed square of the first circle, and drawing a second circle according to the number of the words and the frequency of each word and a preset rule.

Progressive rendering unit 4: if the number of the first circles and the number of the second circles are smaller than the number of the words, a third circle is drawn progressively according to the number of the words and the frequency of each word and the preset rule.

Word size determination unit 5: and calculating the size of the characters in the word cloud according to the radius of the circle by a trapezoidal algorithm.

In addition, a canvas-based word cloud drawing method described in conjunction with fig. 1 may be implemented by an electronic device. Fig. 3 is a block diagram of an electronic device of the present invention.

The electronic device may comprise a processor 61 and a memory 62 in which computer program instructions are stored.

Specifically, the processor 61 may include a Central Processing Unit (CPU), or A Specific Integrated Circuit (ASIC), or may be configured to implement one or more Integrated circuits of the embodiments of the present Application.

Memory 62 may include, among other things, mass storage for data or instructions. By way of example, and not limitation, memory 62 may include a Hard Disk Drive (Hard Disk Drive, abbreviated HDD), a floppy Disk Drive, a Solid State Drive (SSD), flash memory, an optical Disk, a magneto-optical Disk, tape, or a Universal Serial Bus (USB) Drive or a combination of two or more of these. Memory 62 may include removable or non-removable (or fixed) media, where appropriate. The memory 62 may be internal or external to the data processing apparatus, where appropriate. In a particular embodiment, the memory 62 is a Non-Volatile (Non-Volatile) memory. In particular embodiments, Memory 62 includes Read-Only Memory (ROM) and Random Access Memory (RAM). The ROM may be mask-programmed ROM, Programmable ROM (PROM), Erasable PROM (EPROM), Electrically Erasable PROM (EEPROM), Electrically rewritable ROM (EAROM), or FLASH Memory (FLASH), or a combination of two or more of these, where appropriate. The RAM may be a Static Random-Access Memory (SRAM) or a Dynamic Random-Access Memory (DRAM), where the DRAM may be a Fast Page Mode Dynamic Random-Access Memory (FPMDRAM), an Extended data output Dynamic Random-Access Memory (EDODRAM), a Synchronous Dynamic Random-Access Memory (SDRAM), and the like.

The memory 62 may be used to store or cache various data files that need to be processed and/or used for communication, as well as possible computer program instructions executed by the processor 61.

The processor 61 implements any one of the canvas-based word cloud drawing methods in the above embodiments by reading and executing computer program instructions stored in the memory 62.

In some of these embodiments, the electronic device may also include a communication interface 63 and a bus 60. As shown in fig. 3, the processor 61, the memory 62, and the communication interface 63 are connected via a bus 60 to complete communication therebetween.

The communication port 63 may be implemented with other components such as: the data communication is carried out among external equipment, image/data acquisition equipment, a database, external storage, an image/data processing workstation and the like.

The bus 60 includes hardware, software, or both to couple the components of the electronic device to one another. Bus 60 includes, but is not limited to, at least one of the following: data Bus (Data Bus), Address Bus (Address Bus), Control Bus (Control Bus), Expansion Bus (Expansion Bus), and Local Bus (Local Bus). By way of example, and not limitation, Bus 60 may include an Accelerated Graphics Port (AGP) or other Graphics Bus, an Enhanced Industry Standard Architecture (EISA) Bus, a Front-Side Bus (FSB), a Hyper Transport (HT) Interconnect, an ISA (ISA) Bus, an InfiniBand (InfiniBand) Interconnect, a Low Pin Count (LPC) Bus, a memory Bus, a microchannel Architecture (MCA) Bus, a PCI (Peripheral Component Interconnect) Bus, a PCI-Express (PCI-X) Bus, a Serial Advanced Technology Attachment (SATA) Bus, a Video Electronics Bus (audio Electronics Association), abbreviated VLB) bus or other suitable bus or a combination of two or more of these. Bus 60 may include one or more buses, where appropriate. Although specific buses are described and shown in the embodiments of the application, any suitable buses or interconnects are contemplated by the application.

The electronic device may execute a canvas-based word cloud drawing method in the embodiment of the present application.

In addition, in combination with the canvas-based word cloud rendering method in the foregoing embodiments, embodiments of the present application may provide a computer-readable storage medium to implement the method. The computer readable storage medium having stored thereon computer program instructions; the computer program instructions, when executed by a processor, implement any of the canvas-based word cloud rendering methods in the above embodiments.

And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.

The technical features of the embodiments described above may be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the embodiments described above are not described, but should be considered as being within the scope of the present specification as long as there is no contradiction between the combinations of the technical features.

The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the invention. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present patent shall be subject to the appended claims.

Claims

1. A word cloud drawing method based on canvas is characterized by comprising the following steps:

the method comprises the steps of data configuration, wherein data of words of a word cloud to be generated are obtained, and the data of the words comprise the number of the words and the frequency of each word;

a first circle drawing step of drawing a first circle according to the frequency of the word with the highest frequency;

a second circle drawing step, namely obtaining the circumscribed square of the first circle, and drawing a second circle according to the number of the words and the frequency of each word and a preset rule;

2. The canvas-based word cloud rendering method as claimed in claim 1, wherein the preset rules include: acquiring a random circle center coefficient, and determining the circle center of the circle according to the random circle center coefficient; determining a radius of the circle based on the frequency of each of the words.

3. The canvas-based word cloud rendering method as claimed in claim 2, wherein the preset rules further comprise: and when the circle is drawn according to the circle center and the radius, if the circle is overlapped with the existing circle, the circle center is determined again.

4. The canvas-based word cloud rendering method as claimed in claim 1, further comprising a font size determination step of calculating the size of characters in the word cloud by a trapezoidal algorithm based on the radius of the circle.

5. The canvas-based word cloud rendering method of claim 1, implemented by a canvas generated by canvas labels.

6. A canvas-based word cloud rendering system, comprising:

the data configuration unit is used for acquiring data of words of a word cloud to be generated, wherein the data of the words comprises the number of the words and the frequency of each word;

a first circle drawing unit drawing a first circle according to the frequency of the word having the highest frequency;

the second circle drawing unit is used for obtaining the circumscribed square of the first circle, drawing a second circle according to the number of the words and the frequency of each word and a preset rule;

and the progressive drawing unit is used for progressively drawing a third circle according to the number of the words and the frequency of each word and the preset rule if the number of the first circle and the second circle is less than the number of the words.

7. The canvas-based word cloud rendering system of claim 6, wherein the preset rules comprise: acquiring a random circle center coefficient, and determining the circle center of the circle according to the random circle center coefficient; determining a radius of the circle based on the frequency of each of the words.

8. The canvas-based word cloud rendering system of claim 7, wherein the preset rules further comprise: and when the circle is drawn according to the circle center and the radius, if the circle is overlapped with the existing circle, the circle center is determined again.

9. The canvas-based word cloud rendering system as claimed in claim 6, further comprising a font size determining unit for calculating the size of the characters in the word cloud by a trapezoidal algorithm based on the radius of the circle.

10. The canvas-based word cloud rendering system of claim 6, implemented by a canvas generated by canvas labels.