WO2023044913A1

WO2023044913A1 - Graph drawing method and apparatus, and computer-readable storage medium

Info

Publication number: WO2023044913A1
Application number: PCT/CN2021/121039
Authority: WO
Inventors: 卞甲慧; 张阳阳
Original assignee: 京东方科技集团股份有限公司
Priority date: 2021-09-27
Filing date: 2021-09-27
Publication date: 2023-03-30
Also published as: CN116194876A

Abstract

A graph drawing method and apparatus, and a computer-readable storage medium. The graph drawing method comprises: receiving a first input of a user; detecting whether the content of the first input comprises a closable graph, wherein the closable graph is a closed graph or a graph which is recognized as a closed graph by means of a graph recognition method; and when the content of the first input comprises a closeable graph, recognizing the shape of the closeable graph as a first closed graph, and generating a first node, an outer frame of which is the first closed graph.

Description

Graphic drawing method and device, and computer-readable storage medium

technical field

Embodiments of the present disclosure relate to but are not limited to the field of computer application technologies, and in particular, refer to a graphics rendering method and device, and a computer-readable storage medium.

Background technique

Mind map, also known as mind map, is an effective graphic thinking tool to express divergent thinking. It uses the technique of paying equal attention to pictures and texts to show the relationship between themes at all levels with mutual subordination and correlation. Create memory links with images, colors, etc. Mind mapping is a way to visualize thinking, which satisfies the characteristics of radial thinking. Radiant thinking is the natural way of thinking of the human brain. Every information that enters the brain can become a thinking center, and thousands of associated nodes are emitted from this center, and each associated node can become another center. theme, thus presenting a radioactive three-dimensional structure. In this way, our brains can more easily accept related content and the relationship between content.

Contents of the invention

The following is an overview of the topics described in detail in this article. This summary is not intended to limit the scope of the claims.

An embodiment of the present disclosure provides a graphic drawing method, including: receiving a first input from a user; detecting whether the content of the first input includes a closable graphic, and the closable graphic is a closed graphic or is identified by a graphic recognition method as A graph of a closed graph; when the content of the first input includes a closable graph, identifying the shape of the closable graph as the first closed graph, and generating an outer frame as the first node of the first closed graph.

In some exemplary embodiments, before receiving the first input from the user, the method further includes: receiving a second input from the user, where the content of the second input is one or more characters;

After identifying the shape of the closable figure as the first closed figure and before generating the first node, the method further includes: detecting that the first closed figure and the character in the second input are in a figure drawing interface positional relationship on the first closed graph; when there is an overlapping area between the first closed graph and the characters in the second input, perform the operation of generating the outer frame as the first node of the first closed graph, and according to the first closed graph The content of the second input generates the node name of the first node.

After identifying the shape of the closable figure as the first closed figure and before generating the first node, the method further includes: detecting that the first closed figure and the character in the second input are in a figure drawing interface positional relationship on the graph; when the first closed graph contains all the characters in the second input, execute the operation of generating the outer frame as the first node of the first closed graph, and according to the second input The content generates the node name of the first node.

After identifying the shape of the closable figure as the first closed figure and before generating the first node, the method further includes: detecting that the first closed figure and the character in the second input are in a figure drawing interface The positional relationship on the above; when there is no overlapping area between the first closed figure and any character in the second input, in response to the fifth operation of the user, move the position of the first closed figure or the character , the fifth operation is dragging the first closed figure or the character; when there is an overlapping area between the first closed figure and at least one character in the second input, execute generating an outer frame for the The operation of the first node of the first closed graph is performed, and the node name of the first node is generated according to the content of the second input.

In some exemplary embodiments, after receiving the user's first input and before generating the first node, the method further includes:

receiving a third input from the user, where the content of the third input is one or more characters;

Detecting the positional relationship between the first closed figure and the characters in the third input on the graphic drawing interface;

When there is an overlapping area between the first closed graph in the first input and at least one character in the third input, perform the operation of generating the outer frame as the first node of the first closed graph, and according to the Generate the node name of the first node based on the content of the third input.

When the first closed graph in the first input contains all the characters in the third input, perform the operation of generating the outer frame as the first node of the first closed graph, and according to the third input The content generates the node name of the first node.

When there is no overlapping area between the first closed figure in the first input and any character in the third input, in response to the user's fifth operation, move the position of the first closed figure or the character , the fifth operation is dragging the first closed figure or the character;

When there is an overlapping area between the first closed graph and at least one character in the third input, perform the operation of generating the outer frame as the first node of the first closed graph, and according to the third input The content generates the node name of the first node.

In some exemplary embodiments, after receiving the first input from the user and before receiving the third input from the user, the method further includes: displaying the closable graphic as a first closed graphic.

In some exemplary embodiments, the method further includes: detecting whether there is a first operation of editing the name of the first node; when the first operation is detected, receiving a fourth input from the user through a pop-up window, And generate the name of the first node according to the fourth input.

In some exemplary embodiments, the method further includes: identifying whether the closable graph is connected to any node in the current graph drawing interface; when the closable graph is connected to any node in the current graph drawing interface When the nodes are not connected, the generated first node is a free node; when the closable graph is connected to the second node in the current graphics drawing interface, the generated first node is the second node. A child node of the node, the second node is a root node or a child node in the current graphic drawing interface.

In some exemplary embodiments, the method further includes: detecting whether there is a second operation of selecting the free node; when the second operation is detected, displaying a delete button in the area where the free node is located, so The delete button is used to delete the node where the delete button is located.

In some exemplary embodiments, the method further includes: detecting whether there is a third operation of moving the free node to the area where any node in the current graphics drawing interface is located; when the third operation is detected , the free node is added as a third node in the current graphics drawing interface, and the parent node of the third node is a node in the area where the free node in the third operation is moved.

In some exemplary embodiments, the method further includes: receiving a fifth input from a user, the fifth input including at least one connecting line configured to connect the free node and the current graph drawing A second node in the interface; adding the free node as a fourth node in the current graphics drawing interface, the parent node of the fourth node being the second node connected by the connecting line in the fifth input.

In some exemplary embodiments, the connecting line is a straight connecting line, a broken line connecting line or a curved connecting line.

In some exemplary embodiments, the method further includes: a fourth operation of detecting whether the second node is selected; when the fourth operation is detected and the second node is the root node, in the The area where the root node is located displays an add button, and the add button is used to add a child node of the node where the add button is located; when the fourth operation is detected and the second node is a non-root node, in the An add button and a delete button are displayed in the area where the second node is located, and the delete button is used to delete the node where the delete button is located.

In some exemplary embodiments, the method further includes: detecting the number and/or length of characters contained in the node name; when the number and/or length of characters contained in the node name exceeds a preset first threshold, Adjust the width and height of the frame of the node so that the node names are displayed in rows.

In some exemplary embodiments, the data structure of any node in the graphical drawing interface includes at least one of the following: the left position of the node, the position of the top edge of the node, whether it is a root node, whether it is a free node, a child node collection, the text content of the node, the rectangle size of the node.

In some exemplary embodiments, the shape of the closable figure includes a straight line polygon, a curved line polygon, or a closed figure composed of a straight line and a curve.

An embodiment of the present disclosure also provides a graphics drawing device, including a processor and a memory, the processor is configured to execute a program stored in the memory, so as to implement the steps of the graphics drawing method described in any one of the preceding items.

An embodiment of the present disclosure also provides a computer-readable storage medium, where one or more programs are stored on the computer-readable storage medium, and the one or more programs can be executed by one or more processors to realize The steps of the graphic drawing method as described in any one of the preceding items.

Other aspects will become apparent upon reading and understanding the drawings and detailed description.

Description of drawings

The accompanying drawings are used to provide a further understanding of the technical solutions of the present disclosure, and constitute a part of the specification, and are used together with the embodiments of the present disclosure to explain the technical solutions of the present disclosure, and do not constitute limitations to the technical solutions of the present disclosure. The shapes and sizes of the various components in the drawings do not reflect true scale, but are only intended to illustrate the present disclosure.

FIG. 1 is a schematic flow diagram of a graph drawing method according to an embodiment of the present disclosure;

FIG. 2 is a schematic diagram of an interface of a drawing board page according to an embodiment of the present disclosure;

FIG. 3 is a schematic diagram of a graphic drawing interface according to an embodiment of the present disclosure;

4 to 6 are schematic diagrams of three kinds of root nodes in the embodiments of the present disclosure;

Fig. 7 is a schematic diagram of the interface when the root node in Fig. 4 is selected;

FIG. 8 is a schematic diagram of an interface with a child node added to the root node in FIG. 7;

Fig. 9 is a schematic diagram of the interface when the child node in Fig. 8 is selected;

Fig. 10 to Fig. 14 are several interface schematic diagrams when the root node in Fig. 4 is in the editing state;

Fig. 15 is a schematic diagram of an interface with multiple child nodes added to the root node in Fig. 7;

Fig. 16 is a schematic diagram of adding a hand-drawn rectangle in the graphic drawing interface of Fig. 15;

Fig. 17 is a schematic diagram of an interface identifying the hand-drawn rectangle in Fig. 16 as a free node;

Fig. 18 is a schematic diagram of the interface when the free node in Fig. 17 is selected;

Figures 19 to 21 are schematic diagrams of the interface when the free node in Figure 17 is moved to a node in the graphical drawing interface;

Fig. 22 is a schematic diagram of the interface of adding a hand-drawn triangle in the graphic drawing interface of Fig. 15;

Fig. 23 is a schematic diagram of an interface for recognizing the hand-drawn triangle in Fig. 22 as a standard triangle;

Fig. 24 is a schematic diagram of adding a hand-drawn ellipse in the graphic drawing interface of Fig. 15;

Fig. 25 is a schematic diagram of an interface for identifying the hand-drawn ellipse in Fig. 24 as a standard ellipse;

Fig. 26 is a schematic diagram of an interface for adding hand-drawn text in the graphic drawing interface of Fig. 25;

Fig. 27 is a schematic diagram of an interface for recognizing the hand-drawn text in Fig. 26 as standard text;

Fig. 28 is a schematic diagram of an interface identifying the standard body text and standard ellipse in Fig. 27 as a free node;

29 to 30 are schematic diagrams of the process of identifying mutually independent standard body characters and standard ellipses as a free node;

FIG. 31 is a schematic flowchart of another graph drawing method according to an embodiment of the present disclosure;

Fig. 32 is a schematic structural diagram of a graphics rendering device provided by an exemplary embodiment of the present disclosure.

Detailed ways

In order to make the purpose, technical solution and advantages of the present disclosure clearer, the embodiments of the present disclosure will be described in detail below in conjunction with the accompanying drawings. Note that an embodiment may be embodied in many different forms. Those skilled in the art can easily understand the fact that the means and contents can be changed into various forms without departing from the gist and scope of the present disclosure. Therefore, the present disclosure should not be interpreted as being limited only to the contents described in the following embodiments. In the case of no conflict, the embodiments in the present disclosure and the features in the embodiments can be combined arbitrarily with each other.

Unless otherwise defined, the technical terms or scientific terms used in the embodiments of the present disclosure shall have the usual meanings understood by those skilled in the art to which the present disclosure belongs. "First", "second" and similar words used in the embodiments of the present disclosure do not indicate any sequence, quantity or importance, but are only used to distinguish different components. "Comprising" or "comprising" and similar words mean that the elements or items preceding the word include the elements or items listed after the word and their equivalents, but do not exclude other elements or items.

Mind map, also known as mind map, is an effective graphic thinking tool to express divergent thinking. It uses the technique of paying equal attention to pictures and texts to show the relationship between themes at all levels with mutual subordination and correlation. Establishing memory links with images, colors, etc. is a way to visualize thinking. Mind mapping is a way to visualize thinking, which satisfies the characteristics of radial thinking. Radiant thinking is the natural way of thinking of the human brain. Every information that enters the brain can become a thinking center, and thousands of associated nodes are emitted from this center, and each associated node can become another center. theme, thus presenting a radioactive three-dimensional structure. In this way, our brains can more easily accept related content and the relationship between content.

At present, there are many mind map softwares on the market. There are two main ways to build a mind map with these software: one is to open the corresponding software and add nodes one by one to generate a mind map through shortcut keys or right keys; Documents in formats supported by the software to generate mind maps. The styles of the nodes added in these two ways are relatively simple, and the user experience is poor.

FIG. 1 is a schematic flowchart of a graphics drawing method provided by an embodiment of the present disclosure, and the method can be applied to electronic devices with graphics drawing functions such as desktop computers, notebook computers, smart phones, and tablet computers. Optionally, the method can be applied to the graphic editing software installed in the above-mentioned electronic device, or can be applied to a browser in the form of a web page, when the user opens the corresponding web page in the browser for graphic editing or display, The graph drawing method of the embodiment of the present disclosure is automatically invoked. Exemplarily, the graphics drawn by the graphics drawing method may be mind maps, flow charts, logical relationship diagrams, and the like.

For ease of description, the following embodiments will take the graphic drawing method of the embodiment of the present disclosure applied to mind map editing software as an example to explain the present disclosure.

As shown in Figure 1, the graph drawing method includes the following steps:

Step 101: receiving the first input from the user;

In some exemplary embodiments, before using the graphic drawing method of the present disclosure, the user may first open the drawing board page as shown in FIG. 2 , click the mind map option on the drawing board page, and open the graphic drawing interface. In some other exemplary embodiments, the user may also open the graphical drawing interface in other ways, which is not limited in the present disclosure.

In some exemplary embodiments, as shown in FIG. 3 , the graphical drawing interface may include a root node by default. The root node can be created automatically when the user opens the graphic drawing interface. The default name of the root node may be "My Theme".

In some exemplary embodiments, before step 101, the method further includes:

Create the data structure of the root node, the data structure of the root node includes the left position of the root node, the top edge position of the root node, the text content of the root node and the rectangular size of the root node, etc.;

Determine the left and top positions of the root node according to the size of the current screen;

Determine the rectangular size of the root node according to the text content of the root node;

Draw the root node according to the left position of the root node, the position of the top edge, the text content and the rectangle size of the root node.

In this disclosure, the rectangular size of a node refers to the width and height of the outer frame of the node in the current graphic drawing interface, where the width of the outer frame refers to the outer frame of the node in the current graphic drawing interface along the first direction (Exemplary, the first direction is the row direction), the height of the outer frame refers to the size of the outer frame of the node in the current graphic drawing interface along the second direction (Exemplary, the second direction is the column direction) .

In some exemplary embodiments, in the graphic drawing interface of the embodiment of the present disclosure, the data structure of each node may be the following array structure:

{

The left position of the node (left);

The position of the top edge of the node (top);

Is it the root node (isRoot);

Whether it is a free node (isWild);

Child node collection (childList), the element type of the collection is the model itself;

The text content of the node (content);

The rectangular (rect) size of the node, which records the size of the current node;

……..

}

When initializing, such a data model will be created first as the data structure of the root node, and the left position and top edge position of the model will be assigned values. In an exemplary embodiment, the left position (left) of the model is 50 pixels, the top position (top) is half the height of the current device screen, set as the root node (isRoot=true), and the text content is the default "I Theme", after the initial data is established, you can enter the root node drawing stage.

In some exemplary embodiments, determining the rectangular size of the root node according to the text content of the root node includes:

Determine the character size of the root node according to the text content of the root node and the zoom ratio of the canvas;

Determine whether the length of the text content of the root node is greater than a preset reference length;

When the length of the text content of the root node is greater than the preset reference length, determine the width occupied by the node name and the number of lines occupied by the node name in the drawn root node;

When the length of the text content of the root node is greater than or equal to 0 and less than or equal to the preset reference length, determine the width occupied by the node name in the drawn root node (at this time, the number of lines occupied by the node name is 1).

Exemplarily, when the length of the text content of the root node is greater than or equal to 0 and less than or equal to n1 characters, it is determined that the width occupied by the node name in the drawn root node is the length of n1 characters (n1 can be between 1 and 3 Between, for example, n1 can be 2), and the number of lines is 1 line; when the length of the text content of the root node is greater than n1 characters and less than or equal to the preset reference length, determine the node name in the drawn root node The occupied width is the length of n2 characters, n2 is the number of characters contained in the root node, and the number of lines occupied by the node name is 1 line. When the length of the text content of the root node is greater than the preset reference length, determine that the width of the node name in the drawn root node is n3 characters long, and the number of lines occupied by the node name is

Among them, n3 is the number of characters contained in the preset reference length,

is the round up symbol.

In some exemplary embodiments, determining the character size of the root node according to the text content of the root node and the zoom ratio of the canvas includes: defining a text brush (paint) of the root node, and setting the character size (textSize) of the text paint pen It is the preset first pixel number (for example, the preset first pixel number may be 20 pixels) multiplied by the scaling scale of the current canvas.

Exemplarily, when not zoomed, the zoom ratio scale of the current canvas is 1.

In some exemplary embodiments, the preset reference length may be 6 to 10 characters, for example, the preset reference length may be 8 characters.

In some exemplary embodiments, when the length of the text content of the current root node is less than or equal to the preset reference length, that is, no line break is required, the application program (API) interface of the Android system (exemplary, paint method getTextBounds), to obtain the actual width and height pixel size of the text content of the current root node, form a rectangle (rect), and assign it to the rectangle size parameter of the current node.

In some exemplary embodiments, when the length of the text content of the current root node is greater than the preset reference length, that is, a line break is required, the string segmentation can be performed first, and the text content of the current root node is divided into single-line reference lengths Carry out segmentation, calculate the height of each line, and accumulate according to the number of lines to obtain the overall width and height pixel size of the multi-line text, form a rectangle (rect), and assign it to the rectangle size parameter of the current node.

In some exemplary embodiments, when the content of the current root node is cleared, a rectangle (rect) may be formed according to the calculation of width and height of two Chinese characters by default, and assigned to the rectangle size parameter of the current node.

In some exemplary embodiments, according to the left position (left) and the top edge position (top) of the root node, the background block brush of the root node is used to draw the background according to the previously calculated rectangle size parameters; the text brush of the root node is used , to draw text, forming the aforementioned root node.

In some exemplary embodiments, the method also includes:

Detect the number and/or length of characters contained in the node name (ie, the text content of the node);

When the number of characters and/or length contained in the node name exceed the preset first threshold, adjust the width and height of the outline of the node (i.e. the rectangular size of the node), so that the node name is displayed in rows.

Exemplarily, as shown in Figure 4, assuming that the text content of the current root node is "My Topic", the length of the text content of the node is 4, which is less than the reference length 8, and there is no need to wrap the line, and the width occupied by the node name Set it to 4 characters, and the number of lines occupied by the node name is 1 line; as shown in Figure 5, assuming that the text content of the current root node is "My theme My theme My theme My theme", the text of the node The length of the content is 16, so it needs to be divided into two paragraphs and line-wrapped. The width of the node name is set to 8 characters, and the number of lines occupied by the node name is 2 lines; as shown in Figure 6, assuming the current root node The text content of is empty, and the width occupied by the node name is still set to 2 characters.

In some exemplary embodiments, the method also includes:

Detect whether a node is selected;

When it is detected that a node is selected and the selected node is the root node, an add button is displayed in the area where the root node is located, and the add button is used to add a child node of the node where the add button is located;

When it is detected that a node is selected and the selected node is a non-root node, an add button and a delete button are displayed in the area where the selected node is located, and the delete button is used to delete the node where the delete button is located.

In this embodiment, long press the drawn node, then the node will be selected, determine the position coordinates (x, y) of the touch during the long press, and detect whether the touched position coordinates (x, y) are within the range of the node. Within the range of the node, the operation button will pop up according to the position and range of the node. Wherein, the operation button of the root node includes an add button (that is, the + sign in FIG. 7 ). Click the + sign to add a child node to the current node. For example, the added child node is shown in FIG. 8 . As shown in Figure 9, long press the newly added child node, and the operation button will also pop up. Unlike the root node, the operation buttons of the child node include the add button and the delete button. After clicking the delete button, the child node will be deleted .

In some exemplary embodiments, the method also includes:

Detect whether there is an operation to edit the name of the node;

When an operation of editing the name of the node is detected, a fourth input from the user is received through a pop-up window, and a name of the node is generated according to the fourth input.

In some exemplary embodiments, as shown in Fig. 10, Fig. 11, Fig. 12 and Fig. 13, clicking a drawn node can pop up an editing window under the node, and the editing window can include an input box and a The handwriting board, the user can draw text on the handwriting board. After the text is recognized, it will be added to the input box. After clicking the "Finish" button, the editing of the text content of the node will be completed, and the name of the node will also change to Edit after the content. As shown in FIG. 14 , the editing window may also include an input box and a keyboard located below the input box, that is, editing of node content also supports keyboard input. Through the above operations, the user can add multiple nodes, as shown in Figure 15.

Step 102: Detect whether the content of the first input includes a closable figure, and the closable figure is a closed figure or a figure recognized as a closed figure by a figure recognition method.

In some exemplary embodiments, the shapes of the closable figures include straight polygons (such as triangles, rectangles, squares, parallelograms, regular pentagons, regular hexagons, etc.), curved polygons (such as circles, ellipses, etc.) or straight lines. A closed figure composed of curves (such as a rounded rectangle, etc.).

Exemplarily, as shown in FIG. 16 , the first input is a hand-drawn graphic. In the embodiment of the present disclosure, the user-drawn graphic may not be a closed graphic in the strict sense. Exemplarily, the user-drawn graphic in FIG. 16 does not completely closed, however, the hand-drawn graphics can be recognized as a rectangle by the graphics recognition method (at this time, the distance between the adjacent vertices of the two unclosed sides is less than the preset distance threshold), so we can set The hand-drawn figure is regarded as a closeable figure. That is, the closable figure may be a closed figure, or a figure that is not a closed figure but can be recognized as a closed figure by a figure recognition method.

Step 103: When the content of the first input includes a closable figure, identify the shape of the closable figure as the first closed figure, and generate a frame as the first node of the first closed figure. In the embodiment of the present disclosure, the first node may be a free node, or may be a child node in the current graphic drawing interface.

In some exemplary embodiments, the method also includes:

Identify whether the closed graph is connected to any node in the current graph drawing interface;

When the closable graph is not connected to any node in the current graph drawing interface, the first generated node is a free node.

Exemplarily, as shown in FIG. 17 , the hand-drawn figure in FIG. 16 is recognized as a rectangle by a graphic recognition method, and a free node with a rectangle as an outer frame is generated at a corresponding position. The content of the free node may be "free topic 1" by default.

In some exemplary embodiments, the method also includes:

The second operation of detecting whether a free node is selected;

When the second operation is detected, a delete button is displayed in the area where the free node is located, and the delete button is used to delete the node where the delete button is located.

As shown in Figure 18, long press the drawn free node, and the operation button will also pop up. Exemplarily, the operation button of the free node only includes the delete button, and does not include the add child node button. After the delete button is clicked, the free node will be deleted.

In some exemplary embodiments, the method also includes:

Detect whether there is a third operation for moving the free node to the area where any node in the graphical drawing interface is located;

When the third operation is detected, the free node is added as a third node in the graphic drawing interface, and the parent node of the third node is a node in the area where the free node in the third operation is moved.

As shown in Figure 18, Figure 19, Figure 20 and Figure 21, long press the drawn free node to indicate that the free node is currently selected, and you can drag the free node to any position. If you drag this free node under a node of the trunk and lift your finger, this node will be added to the node at the node position and become its child node.

Similarly, the drawing and identification of other graphics (including but not limited to triangles, ellipses, etc.) will also draw the corresponding graphics, and also generate free nodes of the corresponding graphics, as shown in Figure 22, Figure 23, Figure 24 and Figure 25 Show.

In some exemplary embodiments, before receiving the first input from the user, the method further includes: receiving a second input from the user, where the content of the second input can be one or more characters;

After identifying the shape of the closed figure as the first closed figure and before generating the first node, the method further includes: detecting the positional relationship between the first closed figure and the characters in the second input on the graphic drawing interface; when the first closed figure When there is an overlapping area between the graph and the characters in the second input, perform the operation of generating the first node whose outer frame is the first closed graph, and generate the node name of the first node according to the content of the second input.

In the embodiment of the present disclosure, the overlapping area between the first closed figure in the first input and at least one character in the second input includes at least the following two situations: the first closed figure in the first input contains the character in the second input Part of the characters, or the first closed figure in the first input contains all the characters in the second input.

In the embodiment of the present disclosure, the content of the second input (one or more characters) is input before the content of the first input (graphic), that is, the text is written first, and then a frame is drawn outside the text, the frame contains the text or the frame is related to the text Intersection (that is, there is an overlapping area), when the text and the closed figure are recognized successfully, check whether there is an intersection or containment relationship between the recognized closed figure and the standard text, and if there is, it will be recognized as a free node.

In the embodiment of the present disclosure, the node name of the first node may be generated according to all characters of the second input, or the node name of the first node may be generated by extracting key characters in the second input, which is not limited in the present disclosure.

After identifying the shape of the closed figure as the first closed figure and before generating the first node, the method further includes: detecting the positional relationship between the first closed figure and the characters in the second input on the graphic drawing interface; when the first closed figure When the graph contains all the characters in the second input, execute the operation of generating the first node whose outer frame is the first closed graph, and generate the node name of the first node according to the content of the second input.

In other exemplary embodiments, before receiving the user's first input, the method further includes:

receiving a second input from the user, where the content of the second input is one or more characters;

After identifying the shape of the closeable graph as the first closed graph and before generating the first node, the method further includes:

Detecting the positional relationship between the first closed figure and the characters in the second input on the figure drawing interface;

When there is no overlapping area between the first closed figure and any character in the second input, the position of the first closed figure or the character is moved in response to the fifth operation of the user, and the fifth operation is dragging the first closed figure or character;

When there is an overlapping area between the first closed figure and at least one character in the second input, execute the operation of generating the first node whose outer frame is the first closed figure, and generate the node name of the first node according to the content of the second input .

In some other exemplary embodiments, after receiving the user's first input and before generating the first node, the method further includes:

Receive a third input from the user, where the content of the third input is one or more characters;

Detecting the positional relationship between the first closed figure and the characters in the third input on the figure drawing interface;

When there is an overlapping area between the first closed figure in the first input and at least one character in the third input, perform the operation of generating the outer frame as the first node of the first closed figure, and generate the first node according to the content of the third input The node name of a node.

In the embodiment of the present disclosure, the third input content (one or more characters) is input after the first input content (graphic). When the drawn closed figure is recognized successfully, it will not directly generate a default "free node", but directly recognize it as a closed figure, such as a rectangle, ellipse, triangle, etc. Next, write text on this graphic, as shown in Figure 26, it is not necessary to ensure that each text is inside the graphic, but it is necessary to ensure the continuity of writing, and each stroke should not stay for too long. After it is completely written, we The written content will be handed over to the character recognition algorithm (the prior art), as shown in FIG. 27, and the handwritten characters will be recognized as standard characters. Check whether there is an intersection or containment relationship between the identified closed figure and the standard font (that is, whether there is an overlapping area), and if so, identify it as a first node, as shown in FIG. 28 .

In the embodiment of the present disclosure, the node name of the first node may be generated according to all characters of the third input, or the node name of the first node may be generated by extracting key characters in the third input, which is not limited in the present disclosure.

When the first closed graph in the first input contains all the characters in the third input, execute the operation of generating the first node whose outer frame is the first closed graph, and generate the node name of the first node according to the content of the third input .

When there is no overlapping area between the first closed figure in the first input and any character in the third input, the position of the first closed figure or character is moved in response to the fifth operation of the user, and the fifth operation is dragging the second a closed figure or said character;

When there is an overlapping area between the first closed figure and at least one character in the third input, execute the operation of generating the first node whose outer frame is the first closed figure, and generate the node name of the first node according to the content of the third input .

In this embodiment, as shown in FIG. 29 and FIG. 30 , a first node can also be generated by dragging and merging the recognized standard font and a closed figure that does not contain text. In some other exemplary embodiments, the content of the third input may also be input before the content of the first input.

In this embodiment, the drawn graphics and text are originally two separate elements on the graphics drawing interface, and have their own position information: left, top, and width and height information: width, height. Through this information, we can get the rectangle information corresponding to these two elements, that is, Rect(left, top, left+width, top+height). In addition, each element also has type information type, among which, the type information of the text is "text", and the content attribute content is used to save the text content, such as "free theme"; the type information of the graphic is "shape", and has the attribute " shapeType" to distinguish specific types, such as shapeType=1 for rectangles, shapeType=2 for ellipses, etc.

When we finish writing or drawing, we will determine the rectangle according to the position information of the current element, and judge the intersection with the rectangles of other elements. For example, we can use the intersect method provided by the java Rect object to judge whether the rectangles intersect. If they intersect, then Merge the information (position, size, seat content, graphic type) of the two elements to form a new element, that is, a free node in the graphic drawing interface, and delete the previous two separate elements from the graphic drawing interface.

In some exemplary embodiments, after receiving the user's first input and before receiving the user's third input, the method further includes:

Display the closable figure as the first closed figure.

In the embodiment of the present disclosure, when a node is generated by drawing graphics first and then writing text, before writing text, the graphics drawn by the user can be converted into a standard closed graphics display, or not converted first, in When generating the first node, convert the graphics and text into standard graphics and text, which is not limited in the present disclosure.

In other exemplary embodiments, the method also includes:

Receive a fifth input from the user, the fifth input includes at least one connection line, the connection line is configured to connect the free node with the second node in the current graphical drawing interface, the second node can be the root node or child node in the graphical drawing interface node;

Add the free node as the fourth node in the current graphic drawing interface, and the parent node of the fourth node is the second node connected by the connecting line in the fifth input.

Exemplarily, the connecting line may be a straight connecting line, a broken line connecting line, a curved connecting line, etc., which is not limited in the present disclosure. In actual use, the position of the free node and/or the shape of the connecting line can be adjusted as required, which is not limited in the present disclosure.

In other exemplary embodiments, the method also includes:

When the closable graph is connected to the second node in the current graph drawing interface, the generated outer frame is the first node of the first closed graph, the parent node of the first node is the second node, and the second node is in the current graph drawing interface root node or child node.

The difference between this step and the previous steps is that the closable graph in the previous step is not connected to any node in the current graph drawing interface, but the closable graph in this step is connected to the second node in the current graph drawing interface , wherein the second node may be a root node or a child node in the current graphic drawing interface. The connection line connecting the closable figure and the second node can be drawn simultaneously when the user draws the closable figure, before the user draws the closable figure, or after the user draws the closable figure. At this time, the recognition method is similar to the recognition method in the preceding steps, except that in this step, the first closed figure is no longer recognized as a free node, but is directly recognized as a sub-node in the graphic drawing interface, and the sub-node The parent node is the second node. Its realization principle and realization effect are similar to the realization principle and realization effect of the preceding steps, and will not be repeated here.

FIG. 31 is a schematic flowchart of another graph drawing method according to an embodiment of the present disclosure. As shown in Figure 31, click on the drawn node, an edit pop-up window will pop up below the node, and edit the node content through the edit pop-up window. Long press the drawn node, and the operation buttons will be displayed on the node. The operation buttons include the add button and the delete button. The add button is used to add child nodes, and the delete button is used to delete the current node. In addition, free nodes can be generated by drawing graphics, and free nodes can be added to other nodes by moving or drawing connecting lines.

To sum up, the graph drawing method provided by the present disclosure adds nodes by identifying whether the first input content includes a closeable graph, which conveniently adds nodes of different styles and improves user experience.

An embodiment of the present disclosure also provides a graphics rendering device, the graphics rendering device may include a processor and a memory storing a computer program that can run on the processor, and when the processor executes the computer program, the following aspects in the present disclosure are implemented: The steps of the graphics drawing method described in the preceding item.

As shown in FIG. 32 , in an example, the graphics rendering device may include: a processor 3210, a memory 3220, a bus system 3230, and a transceiver 3240, wherein the processor 3210, the memory 3220, and the transceiver 3240 pass through the bus The system 3230 is connected, the memory 3220 is used to store instructions, and the processor 3210 is used to execute the instructions stored in the memory 3220 to control the transceiver 3240 to send signals. Specifically, the transceiver 3240 can acquire the user's first input from the graphic drawing interface under the control of the processor 3210, and detect whether the content of the first input includes a closable graphic, and the closable graphic is a closed graphic or is identified by a graphic recognition method. is a closed figure; when the content of the first input includes a closeable figure, identify the shape of the closeable figure as the first closed figure, generate the outer frame as the first node of the first closed figure, and pass the generated first node through the transceiver A node is output to the graphics drawing interface.

It should be understood that the processor 3210 can be a central processing unit (Central Processing Unit, CPU), and the processor 3210 can also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASICs), off-the-shelf programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor, or the processor may be any conventional processor, and the like.

The memory 3220 may include read-only memory and random-access memory, and provides instructions and data to the processor 3210 . A portion of memory 3220 may also include non-volatile random access memory. For example, memory 3220 may also store device type information.

In addition to the data bus, the bus system 3230 may also include a power bus, a control bus, and a status signal bus. However, the various buses are labeled as bus system 3230 in FIG. 32 for clarity of illustration.

In the course of implementation, the processing performed by the processing device may be completed by an integrated logic circuit of hardware in the processor 3210 or instructions in the form of software. That is, the method steps in the embodiments of the present disclosure may be implemented by a hardware processor, or by a combination of hardware and software modules in the processor. The software module may be located in storage media such as random access memory, flash memory, read-only memory, programmable read-only memory or electrically erasable programmable memory, registers, and the like. The storage medium is located in the memory 3220, and the processor 3210 reads the information in the memory 3220, and completes the steps of the above method in combination with its hardware. To avoid repetition, no detailed description is given here.

An embodiment of the present disclosure also provides a computer-readable storage medium, the computer-readable storage medium stores executable instructions, and when the executable instructions are executed by a processor, the graphics rendering method provided by any of the above-mentioned embodiments of the present disclosure can be implemented , the graph drawing method can add nodes by identifying whether the first input content includes a closeable graph, conveniently adding nodes of different styles, and improving user experience. The method for driving the graphics rendering device to generate nodes by executing executable instructions is basically the same as the graphics rendering method provided in the above-mentioned embodiments of the present disclosure, and details are not repeated here.

The graphics drawing method, device, and computer storage medium provided by the embodiments of the present disclosure conveniently add nodes of different styles by identifying whether the content of the first input includes a closable graphic and adding nodes, thereby improving user experience.

Those of ordinary skill in the art can understand that all or some of the steps in the methods disclosed above, the functional modules/units in the system, and the device can be implemented as software, firmware, hardware, and an appropriate combination thereof. In a hardware implementation, the division between functional modules/units mentioned in the above description does not necessarily correspond to the division of physical components; for example, one physical component may have multiple functions, or one function or step may be composed of several physical components. Components cooperate to execute. Some or all of the components may be implemented as software executed by a processor, such as a digital signal processor or microprocessor, or as hardware, or as an integrated circuit, such as an application specific integrated circuit. Such software may be distributed on computer readable media, which may include computer storage media (or non-transitory media) and communication media (or transitory media). As known to those of ordinary skill in the art, the term computer storage media includes both volatile and nonvolatile media implemented in any method or technology for storage of information, such as computer readable instructions, data structures, program modules, or other data. permanent, removable and non-removable media. Computer storage media includes, but is not limited to, RAM, ROM, EEPROM, flash memory or other memory technology, CD-ROM, digital versatile disk (DVD) or other optical disk storage, magnetic cartridges, tape, magnetic disk storage or other magnetic storage devices, or can Any other medium used to store desired information and which can be accessed by a computer. In addition, as is well known to those of ordinary skill in the art, communication media typically embodies computer readable instructions, data structures, program modules, or other data in a modulated data signal such as a carrier wave or other transport mechanism, and may include any information delivery media .

Although the embodiments disclosed in the present disclosure are as above, the content described is only the embodiments adopted to facilitate understanding of the present disclosure, and is not intended to limit the present disclosure. Any person skilled in the art to which this disclosure belongs can make any modifications and changes in the form and details of implementation without departing from the spirit and scope disclosed by this disclosure, but the protection scope of this disclosure must still be limited to The scope defined in the appended claims shall prevail.

Claims

A graph drawing method, comprising:

receiving a first input from the user;

Detecting whether the content of the first input includes a closable figure, and the closable figure is a closed figure or a figure recognized as a closed figure by a figure recognition method;

When the content of the first input includes a closeable figure, identifying the shape of the closeable figure as a first closed figure, and generating an outer frame as a first node of the first closed figure.
According to the graphics drawing method according to claim 1, before receiving the first input from the user, the method further comprises: receiving a second input from the user, the content of the second input being one or more characters;

After identifying the shape of the closable figure as the first closed figure and before generating the first node, the method further includes: detecting that the first closed figure and the character in the second input are in a figure drawing interface positional relationship on the first closed graph; when there is an overlapping area between the first closed graph and the characters in the second input, perform the operation of generating the outer frame as the first node of the first closed graph, and according to the first closed graph The content of the second input generates the node name of the first node.
According to the graphics drawing method according to claim 1, before receiving the first input from the user, the method further comprises: receiving a second input from the user, the content of the second input being one or more characters;

After identifying the shape of the closable figure as the first closed figure and before generating the first node, the method further includes: detecting that the first closed figure and the character in the second input are in a figure drawing interface positional relationship on the graph; when the first closed graph contains all the characters in the second input, execute the operation of generating the outer frame as the first node of the first closed graph, and according to the second input The content generates the node name of the first node.
According to the graphics drawing method according to claim 1, before receiving the first input from the user, the method further comprises: receiving a second input from the user, the content of the second input being one or more characters;

After identifying the shape of the closable figure as the first closed figure and before generating the first node, the method further includes: detecting that the first closed figure and the character in the second input are in a figure drawing interface The positional relationship on the above; when there is no overlapping area between the first closed figure and any character in the second input, in response to the fifth operation of the user, move the position of the first closed figure or the character , the fifth operation is dragging the first closed figure or the character; when there is an overlapping area between the first closed figure and at least one character in the second input, execute generating an outer frame for the The operation of the first node of the first closed graph is performed, and the node name of the first node is generated according to the content of the second input.
According to the graph drawing method according to claim 1, after receiving the user's first input and before generating the first node, the method further comprises:

receiving a third input from the user, where the content of the third input is one or more characters;

Detecting the positional relationship between the first closed figure and the characters in the third input on the graphic drawing interface;

When there is an overlapping area between the first closed graph in the first input and at least one character in the third input, perform the operation of generating the outer frame as the first node of the first closed graph, and according to the Generate the node name of the first node based on the content of the third input.
According to the graph drawing method according to claim 1, after receiving the user's first input and before generating the first node, the method further comprises:

receiving a third input from the user, where the content of the third input is one or more characters;

Detecting the positional relationship between the first closed figure and the characters in the third input on the graphic drawing interface;

When the first closed graph in the first input contains all the characters in the third input, perform the operation of generating the outer frame as the first node of the first closed graph, and according to the third input The content generates the node name of the first node.
According to the graph drawing method according to claim 1, after receiving the user's first input and before generating the first node, the method further comprises:

receiving a third input from the user, where the content of the third input is one or more characters;

Detecting the positional relationship between the first closed figure and the characters in the third input on the graphic drawing interface;

When there is no overlapping area between the first closed figure in the first input and any character in the third input, in response to the user's fifth operation, move the position of the first closed figure or the character , the fifth operation is dragging the first closed figure or the character;

When there is an overlapping area between the first closed graph and at least one character in the third input, perform the operation of generating the outer frame as the first node of the first closed graph, and according to the third input The content generates the node name of the first node.
According to the graphics drawing method according to any one of claims 5 to 7, after receiving the first input from the user and before receiving the third input from the user, the method further includes:

The closable figure is displayed as a first closed figure.
The graph drawing method according to claim 1, said method further comprising:

Detecting whether there is a first operation to edit the name of the first node;

When the first operation is detected, a fourth input from the user is received through a pop-up window, and the name of the first node is generated according to the fourth input.
The graph drawing method according to claim 1, said method further comprising:

identifying whether the closable graph is connected to any node in the current graph drawing interface;

When the closable graph is not connected to any node in the current graph drawing interface, the generated first node is a free node;

When the closable graph is connected to the second node in the current graph drawing interface, the generated first node is a child node of the second node, and the second node is the current graph drawing interface A root node or child node in .
The graph drawing method according to claim 10, said method further comprising:

A second operation of detecting whether the free node is selected;

When the second operation is detected, a delete button is displayed in the area where the free node is located, and the delete button is used to delete the node where the delete button is located.
The graph drawing method according to claim 10, said method further comprising:

Detecting whether there is a third operation of moving the free node to the area where any node in the current graphics drawing interface is located;

When the third operation is detected, the free node is added as a third node in the current graphical drawing interface, and the parent node of the third node is after the free node in the third operation is moved node in the region.
The graph drawing method according to claim 10, said method further comprising:

receiving a fifth input from the user, the fifth input including at least one connecting line configured to connect the free node with a second node in the current graphical drawing interface;

The free node is added as a fourth node in the current graphic drawing interface, and the parent node of the fourth node is the second node connected by the connection line in the fifth input.
The graph drawing method according to claim 13, wherein the connection line is a straight connection line, a polyline connection line or a curved connection line.
The graph drawing method according to claim 10, said method further comprising:

A fourth operation of detecting whether the second node is selected;

When the fourth operation is detected and the second node is a root node, an add button is displayed in the area where the root node is located, and the add button is used to add a child node of the node where the add button is located;

When the fourth operation is detected and the second node is a non-root node, an add button and a delete button are displayed in the area where the second node is located, and the delete button is used to delete the node at the position where the delete button is located .
The graph drawing method according to claim 1, said method further comprising:

Detect the number and/or length of characters contained in the node name;

When the number and/or length of characters contained in the node name exceeds a preset first threshold, the width and height of the frame of the node are adjusted so that the node name is displayed in rows.
The graph drawing method according to claim 1, wherein the data structure of any node in the graph drawing interface includes at least one of the following: the left position of the node, the top edge position of the node, whether it is a root node, whether it is A free node, a collection of child nodes, the text content of the node, and the rectangular size of the node.
The graph drawing method according to claim 1, wherein the shape of the closeable graph includes a straight polygon, a curved polygon, or a closed graph composed of a straight line and a curve.
A graphics drawing device, comprising a processor and a memory, the processor is used to execute the program stored in the memory, so as to realize the steps of the graphics drawing method according to any one of claims 1 to 18.
A computer-readable storage medium, one or more programs are stored on the computer-readable storage medium, and the one or more programs can be executed by one or more processors, so as to implement claims 1 to 1 18. The steps of the graphic drawing method described in any one of 18.