Text editing method and device based on drawing board, equipment and storage medium
By using the conversion technology of memory data model and rendering data model in the artboard, the memory usage and lag problems caused by DOM technology are solved, and efficient text editing effect is achieved.
Patent Information
- Application Number
- CN202311468481.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2023-11-06
- Publication Date
- 2025-05-13
AI Technical Summary
In the artboard application scenario, implementing rich text editors based on DOM technology will lead to excessive memory usage and lag, and a more effective technology is needed to implement text editing.
Avoid manipulating the DOM structure by using the memory data model in the artboard and converting it into a canvas callable rendering data model, thereby drawing and editing text on the artboard.
It realizes efficient editing of text in the artboard, avoids the problems of excessive memory usage and lag, and improves the performance and stability of text editing.
Smart Images
Figure CN119990073A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of text editing, and in particular to a text editing method, apparatus, device and storage medium based on a drawing board. Background Art
[0002] A rich text editor is a text editor that can be embedded in a browser to implement text editing on a web page. Compared to ordinary text boxes on a web page, a rich text editor can implement text editing, formatting, typesetting, media file editing and uploading, hyperlinks, text export, printing and other functions.
[0003] The implementation methods of rich text editors can be divided into two categories, one is based on document object model (DOM) technology, and the other is based on canvas technology. In the application scenario of the drawing board, if the rich text editor is implemented based on DOM technology, the more editing information blocks the drawing board has, the more editor instances with data will exist in the drawing board, and the more corresponding DOM structures will exist, which will take up a lot of memory and cause jams. Therefore, in the application scenario of the drawing board, implementing a rich text editor based on canvas technology is relatively a better choice. Since canvas technology only provides drawing capabilities and the ability to listen to user input by the browser, how to implement text editing in the drawing board based on canvas technology has become a technical problem that needs to be solved urgently. Summary of the invention
[0004] The present application provides a text editing method, apparatus, device and storage medium based on a drawing board to implement text editing in a drawing board.
[0005] In a first aspect, a text editing method based on a drawing board is provided, comprising:
[0006] In response to a text editing operation on a first artboard picture currently displayed in a target artboard, a first memory data model corresponding to the first artboard picture is updated, wherein the first memory data model stores first text related information and a size position corresponding to the first text related information according to a text position and a text affiliation, wherein the first text related information is text related information corresponding to the first artboard picture, and the text related information includes text content and style;
[0007] Performing data structure conversion on the updated first memory data model to obtain a first rendering data model, wherein the first rendering data model stores second text-related information and size positions corresponding to the second text-related information in the order in which text characters are drawn on the drawing board, and the second text-related information is the text-related information stored in the updated first memory data model;
[0008] The first rendering data model is rendered to obtain a second drawing board picture corresponding to the text editing operation, and the second drawing board picture is displayed in the target drawing board.
[0009] In this technical solution, in response to a text editing operation acting on a first canvas screen currently displayed in a target canvas, after updating a first memory data model corresponding to the first canvas screen, a data structure conversion is performed on the updated first memory data model to obtain a first rendering data model, and then the first rendering data model is rendered to obtain a second canvas screen corresponding to the text editing operation, and the second canvas screen is displayed in the target screen; by converting the memory data model into a rendering data model that can be called by a canvas to draw text in the canvas, it is possible to edit the text in the canvas; since the memory data model stores text-related information and size position in the canvas screen according to the text position and text subordination relationship, when editing text, the text is directly drawn on the canvas by updating the memory data model and converting the memory data model into a rendering data model that can be called by the canvas, and editing text in the canvas does not require operating the DOM structure, which can avoid causing the canvas to freeze.
[0010] In conjunction with the first aspect, in a possible implementation, the response to the text editing operation on the first artboard screen currently displayed in the target artboard, before updating the first memory data model corresponding to the first artboard screen, further includes: obtaining a first external storage data model from the artboard database, the first external storage data model storing the first text related information according to the commonality of style; performing data structure conversion on the first external storage data model to obtain the first memory data model; and displaying the first artboard page according to the first memory data model. Since the external storage data stores the text related information in the artboard screen according to the commonality of style, storage space can be saved.
[0011] In combination with the first aspect, in a possible implementation, displaying the first artboard page according to the first memory data model includes: performing data structure conversion on the first memory data model to obtain a second rendering data model, wherein the second rendering data model stores the first text-related information and the size position corresponding to the first text-related information in the drawing order; rendering the second rendering data model to obtain the first artboard page, and displaying the first artboard page in the target artboard.
[0012] In combination with the first aspect, in a possible implementation, the first external storage data model includes a data common node and a block structure under the data common node, the data common node is used to store a common style of text, the block structure includes a parent node and a child node under the parent node, the parent node in the block structure is used to store the style of a text paragraph or a text list, the child node in the block structure is used to store text characters of the same style in the text paragraph or text list corresponding to the block structure and the style corresponding to the text characters of the same style; the first memory data model includes a root node, a first node, a second node and a third node, the first node is a child node of the root node, the first node is used to store the style and size position of a text paragraph or text list, the second node is a child node of the first node, the second node is used to store the style and size position of a text line, The third node is a child node of the second node, and the third node is used to store text characters, the size and position of the text characters, and the style identifier corresponding to the text characters; the data structure conversion of the first external storage data model to obtain the first internal storage data model includes: traversing the first external storage data model, generating the style identifier corresponding to each text character according to each text character in the traversed block structure and the style identifier corresponding to each text character, and creating the third node corresponding to each text character according to each text character and the style identifier corresponding to each text character; generating the second node according to the third node corresponding to the parent node in the same block structure and the child node under the parent node in the same block structure, and generating the first node according to the data common node and the second node corresponding to the parent node in the same block structure; generating the root node according to the first node.
[0013] In combination with the first aspect, in a possible implementation method, the response acts on the text editing operation of the first canvas screen currently displayed in the target canvas, after updating the first memory data model corresponding to the first canvas screen, also includes: performing data structure conversion on the updated first memory data model to obtain a second external memory data model, the second external memory data model is used to store the second text-related information according to the commonality of style and pattern; and saving the second external memory data model in the canvas database.
[0014] In combination with the first aspect, in a possible implementation, the updated first memory data model includes a root node, a first node, a second node and a third node, the first node is a child node of the root node, the first node is used to store the style and size position of a text paragraph or text list, the second node is a child node of the first node, the second node is used to store the style and size position of a text line, the third node is a child node of the second node, the third node is used to store text characters, the size position of text characters and the style identifier corresponding to the text characters; the second external storage data model includes a data common node and a block structure under the data common node, the data common node is used to store the common Style, the block structure includes a parent node and a child node under the parent node, the parent node in the block structure is used to store the style of a text paragraph or a text list, and the child node in the block structure is used to store text characters of the same style in the text paragraph or text list corresponding to the block structure and the style corresponding to the text characters of the same style; the data structure conversion of the updated first memory data model to obtain the second external memory data model includes: traversing the updated first memory data model, generating a parent node in the block structure according to the traversed first node and the second node under the first node, and generating a child node under the parent node in the block structure according to the traversed third node belonging to the same first node and the same style identifier.
[0015] In combination with the first aspect, in a possible implementation, the updated first memory data model includes a root node, a first node, a second node and a third node, the first node is a child node of the root node, the first node is used to store the style and size position of a text paragraph or text list, the second node is a child node of the first node, the second node is used to store the style and size position of a text line, the third node is a child node of the second node, and the third node is used to store text characters, the size position of text characters, and the style identifier corresponding to the text characters; the first rendering data model includes one or more rendering units, the rendering unit is used to store one or more text characters with the same style and adjacent text positions, and the style and size position corresponding to the one or more text characters with the same style and adjacent text positions; the data structure conversion of the updated first memory data model to obtain the first rendering data model includes: traversing the updated first memory data model, and generating rendering units according to the traversed continuous one or more text characters with the same style identifier.
[0016] In a second aspect, a text editing device based on a drawing board is provided, comprising:
[0017] A memory model updating module, configured to respond to a text editing operation on a first artboard picture currently displayed in a target artboard, and update a first memory data model corresponding to the first artboard picture, wherein the first memory data model stores first text related information and a size position corresponding to the first text related information according to a text position and a text affiliation, wherein the first text related information is text related information corresponding to the first artboard picture, and the text related information includes text content and style;
[0018] a data structure conversion module, configured to perform data structure conversion on the updated first memory data model to obtain a first rendering data model, wherein the first rendering data model stores second text-related information and size positions corresponding to the second text-related information in the order in which the text characters are drawn on the drawing board, wherein the second text-related information is the text-related information stored in the updated first memory data model;
[0019] A rendering and display module is used to render the first rendering data model, obtain a second drawing board picture corresponding to the text editing operation, and display the second drawing board picture in the target drawing board.
[0020] In a third aspect, a computer device is provided, comprising a memory and one or more processors, wherein the memory is connected to the one or more processors, and the one or more processors are used to execute one or more computer programs stored in the memory, and when the one or more processors execute the one or more computer programs, the computer device implements the drawing board-based text editing method of the first aspect.
[0021] In a fourth aspect, a computer-readable storage medium is provided, wherein the computer-readable storage medium stores a computer program, wherein the computer program includes program instructions, and when the program instructions are executed by a processor, the processor executes the drawing board-based text editing method of the first aspect.
[0022] The present application can achieve the following technical effects: by converting the memory data model into a rendering data model that can be called by the canvas, text can be drawn in the drawing board, and text editing can be realized in the drawing board; because the memory data model stores the text-related information and size position in the drawing board screen according to the text position and text subordination relationship, when editing the text, the text is directly drawn on the drawing board by updating the memory data model and converting the memory data model into a rendering data model that can be called by the canvas. There is no need to operate the DOM structure to edit the text in the drawing board, which can avoid causing the drawing board to freeze. BRIEF DESCRIPTION OF THE DRAWINGS
[0023] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the description of the embodiments of the present application will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.
[0024] Figure 1A-Figure 1C Schematic diagram of three data structures provided in the embodiments of the present application;
[0025] Figure 2 A schematic diagram of a flow chart of a text editing method based on a drawing board provided in an embodiment of the present application;
[0026] Figure 3 A schematic diagram of a flow chart of another text editing method based on a drawing board provided in an embodiment of the present application;
[0027] Figure 4 It is a structural schematic diagram of a text editing device based on a drawing board provided in an embodiment of the present application;
[0028] Figure 5 It is a structural diagram of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0029] In order to make the purpose, technical solutions and advantages of the present application more clearly understood, the present application is further described in detail below in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are only used to explain the present application and are not intended to limit the present application. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present application.
[0030] It should be noted that, if there is no conflict, the various features in the embodiments of the present application can be combined with each other, all within the scope of protection of the present application. In addition, although the functional module division is performed in the device schematic diagram and the logical order is shown in the flow chart, in some cases, the steps shown or described can be performed in a sequence different from the module division in the device or the flow chart. Furthermore, the words "first", "second", "third", etc. used in this application do not limit the data and execution order, but only distinguish the same items or similar items with basically the same functions and effects.
[0031] The technical solution of the present application is applicable to text editing scenarios, and in particular to scenarios of editing text in a drawing board.
[0032] In the implementation technology of the drawing board, a feasible technical solution is to implement the drawing board based on the canvas technology. Canvas is a resolution-dependent bitmap canvas that draws two-dimensional graphics through JavaScript and renders pixel by pixel according to position coordinates.
[0033] In order to edit text on a canvas-based drawing board, it is necessary to design a data structure that matches the canvas technology.
[0034] This application designs three data structures to meet the different needs of canvas technology-based drawing board scenarios. For ease of understanding, the three data structures of this application are first introduced.
[0035] 1. External storage data model
[0036] The external storage data model is used for persistent storage in the drawing board database, that is, in the drawing board database, the text in the drawing board screen is stored in the form of an external storage data model. The external storage data model stores text-related information according to the commonality of style. Among them, text-related information includes text content and style. Text content refers to the specific character content contained in the text, and style refers to the font type, font size, line spacing, text color, indentation format, arrangement direction, etc. of the text content.
[0037] The external storage data model stores data in a tree structure, which can represent the structural relationship and format of the document in the drawing board screen. Figure 1AAs shown, it includes a data common node and a block structure. The common data node is used to store the common style of the text, such as the alignment of the text, the direction of the text arrangement, etc.; the common style stored in the common data node is applicable to all texts in the drawing board screen, that is, applicable to the entire document in the drawing board screen. The block structure is connected to the data common node, and the block structure is a child node of the data common node. There can be one or more block structures, and one block structure corresponds to a text paragraph or a text list in the drawing board screen. The block structure includes a parent node and child nodes under the parent node. The parent node in the block structure is used to store the style of the text paragraph or text list corresponding to the block structure, such as line layout, symbol type, start item, etc.; the child node in the block structure is used to store the text characters of the same style in the text paragraph or text list corresponding to the block structure and the style corresponding to the text characters of the same style. There is one parent node in a block structure, and there can be one or more child nodes under the parent node in the block structure. The number of child nodes contained in the block structure depends on the number of style styles of the text characters in the text paragraph or text list corresponding to the block structure. If the style styles of all text characters in the text paragraph or text list corresponding to the block structure are the same, the block structure contains one child node; if the style styles of the text characters in the text paragraph or text list corresponding to the block structure are different, the block structure contains multiple child nodes, and the number of the multiple child nodes is equal to the number of style styles of the text characters in the text paragraph or text list corresponding to the block structure.
[0038] 2. In-memory data model
[0039] The memory data model stores text-related information and the size position of text-related information according to the text position and text affiliation. The text position refers to the coordinate position of the text in the canvas, and the text affiliation refers to the paragraph relationship, line relationship, etc. between the texts on the canvas. The size position of the text-related information includes the coordinate position, width, and height of the text-related information in the canvas. The storage structure of the memory data model directly carries the detailed information required by the operation node corresponding to the text editing operation, such as the upper and lower parent-child node relationship, brother node relationship, operation interface, selection, and other related operation logic.
[0040] For example, the memory data model can be as follows Figure 1B As shown, it includes a root node, a first node, a second node and a third node. There is only one root node. The first node is a child node of the root node. There can be one or more first nodes. A first node corresponds to a text paragraph or a text list in the drawing board screen. The first node is used to store the style and size position of the text paragraph or text list. The total number of first nodes in the memory data model is equal to the sum of the number of text paragraphs and the number of text lists contained in the document in the drawing board screen.
[0041] The second node is a child node of the first node, and there can be one or more second nodes under a first node. The number of second nodes under a first node depends on the number of text lines in the text paragraph or text list corresponding to the first node. A second node under a first node corresponds to a line of text in the text paragraph or text list corresponding to the first node in the drawing board screen. If the text paragraph or text list corresponding to the first node is only one line of text on the drawing board screen, the number of second nodes under the first node is one; if the text paragraph or text list corresponding to the first node has multiple lines of text on the drawing board screen, the number of second nodes under the first node is multiple. The second node is used to store the style and size position of the text line. The total number of second nodes in the memory data model is equal to the total number of text lines contained in the document in the drawing board screen.
[0042] The third node is a child node of the second node, and the third node is a leaf node of the memory data model. There can be one or more third nodes under a second node. The number of third nodes under a second node depends on the number of text characters contained in the text line corresponding to the second node. The third node under a second node corresponds to a text character in the text line corresponding to the second node. If the text line corresponding to the second node contains only one text character on the drawing board screen, the number of third nodes under the second node is one; if the text line corresponding to the second node contains multiple text characters on the drawing board screen, the number of third nodes under the second node is multiple. The third node is used to store text characters, the size position of text characters, and the style identifier corresponding to the text characters. The total number of third nodes in the memory data model is equal to the total number of text characters contained in the document on the drawing board screen.
[0043] The memory data model also includes a character style memory, which is used to store style patterns corresponding to different style pattern identifiers. Based on the style pattern identifier stored in the third node and the style pattern stored in the character style memory, the style pattern of the text character corresponding to the third node can be determined. Figure 1B Taking the third node C1 in the example, it can be determined that the style of the text character corresponding to the third node C1 is the style corresponding to styleId1 stored in the character style memory.
[0044] 3. Rendering data model
[0045] The rendering data model stores text-related information and the size position of the text-related information according to the drawing order of text characters on the drawing board.
[0046] Exemplarily, the rendering data model can be as follows Figure 1CAs shown, it includes one or more presentation units, each of which is used to store one or more text characters with the same style and adjacent text positions, and the style and size position corresponding to the one or more text characters with the same style and adjacent text positions. If the style of the first character and the second character adjacent to each other in a line of text is the same, the first text character and the second text are stored in the same presentation unit, and the presentation unit also stores the style corresponding to the first character and the second character and the size position corresponding to the first character and the second character, and the size position corresponding to the first character and the second character is obtained based on the size position of the first character and the size position of the second character; if the style of the first character and the second character adjacent to each other in a line of text is different, the first text character and the second text are stored in different presentation units respectively.
[0047] The data stored in the rendering data model can be passed to the text editing component for text drawing and rendering.
[0048] Based on the three data structures introduced above, the technical solution of the present application can be implemented, and the technical solution of the present application can be applied to computer devices. The technical solution of the present application is specifically introduced below.
[0049] See also Figure 2 , Figure 2 A flowchart of a text editing method based on a drawing board is provided in an embodiment of the present application, such as Figure 2 As shown, the method comprises the following steps:
[0050] S101 , in response to a text editing operation on a first drawing board picture currently displayed in a target drawing board, updating a first memory data model corresponding to the first drawing board picture.
[0051] Here, the target artboard refers to an artboard on which an image can be drawn. The text editing operation acting on the first artboard screen currently displayed in the target artboard refers to an operation of editing text in the first artboard screen. The text editing operation includes but is not limited to an operation of inserting text, an operation of deleting text, an operation of copying text, an operation of cutting text, an operation of pasting text, and the like. When the user performs a text editing operation through the operation cursor on the target artboard, a click event and a keyboard event are triggered. Based on the click event and the keyboard event triggered by the user, the text editing operation performed by the user can be determined.
[0052] The first memory data model stores the first text-related information and the size position corresponding to the first text-related information according to the text position and text subordination. The first text-related information is the text-related information corresponding to the first canvas screen, that is, the text-related information of the text displayed in the first canvas screen. For the meaning of the text-related information and the size position corresponding to the text-related information, please refer to the above introduction to the three data structures. The first memory data model is used to reflect the text position and text subordination of the first text-related information in the first canvas screen. The specific structure of the first memory data model can be referred to Figure 1B .
[0053] When the user performs a text editing operation through the operating cursor on the target drawing board, the text character corresponding to the click event (hereinafter referred to as the target text character) can be determined according to the click event triggered by the user, and the third node corresponding to the target text character can be determined in the first memory data model; the third node corresponding to the target text character is edited accordingly according to the keyboard event triggered by the user, thereby completing the update of the first memory data model.
[0054] For example, if the text editing operation performed by the user is an operation of inserting text, then the second node to which the second text character belongs can be determined based on the text character inserted by the user (hereinafter referred to as the first text character), and a third node corresponding to the second text character is created under the second node. The style and style identifier of the second text character is determined based on the specific settings of the second text character by the user, and the size and position corresponding to the second text character are calculated, and then the second text character, the style and style identifier of the second text character, and the size and position corresponding to the second text character are stored in the third node corresponding to the second text character. For another example, if the text editing operation performed by the user is an operation of deleting text, then the second node to which the third node corresponding to the third text character belongs can be determined based on the text character deleted by the user (hereinafter referred to as the third text character), and the third node corresponding to the third text character is deleted under the second node, and the size and position of the text characters stored in other third nodes under the second node are updated. Updating the first memory data model is not limited to the above example, and this application does not impose any limitation.
[0055] S102: Perform data structure conversion on the updated first memory data model to obtain a first rendering data model.
[0056] Here, the first rendering data model stores the second text-related information according to the drawing order of the text characters on the drawing board and the size position corresponding to the second text-related information. The second text-related information is the text-related information stored in the updated first memory data model. The specific structure of the first rendering data model can refer to the aforementioned Figure 1CThe first rendering data model stores the second text-related information and the size position corresponding to the second text-related information according to the drawing order of the text characters stored in the updated first memory data model on the drawing board. The drawing order of the text characters stored in the updated first memory data model on the drawing board is determined based on the sibling relationship between the third nodes in the updated first memory data model.
[0057] The data structure conversion of the updated first memory data model to obtain the first rendering data model refers to converting the data stored in the updated first memory data model into data stored according to the structure of the rendering data model, thereby obtaining the first rendering data model. The updated first memory data model can be traversed to generate a presentation unit according to the traversed continuous one or more text characters with the same style identifier.
[0058] Specifically, the presentation unit may be generated through the following steps A1 to A5.
[0059] A1. Determine whether the traversed target node is the third node.
[0060] If the traversed target node is the third node, execute step A2; if the traversed target node is not the third node, traverse the next node.
[0061] A2. Determine whether the target node and the previous third node traversed belong to the same second node.
[0062] If the target node and the previous third node belong to the same second node, it means that the text characters stored in the target node and the text characters stored in the previous third node belong to the same text line on the drawing board screen, and execute step A3; if the target node and the previous third node do not belong to the same second node, it means that the text characters stored in the target node and the text characters stored in the previous third node do not belong to the same text line on the drawing board screen, and execute step A5.
[0063] A3. Determine whether the style identifier stored in the target node is the same as that stored in the previous third node.
[0064] If the target node has the same style identifier as the style identifier stored in the previous third node, it means that the text characters stored in the target node have the same style as the text characters stored in the previous third node, and should belong to the same presentation unit, and step A4 is executed; if the target node has a different style identifier than the style identifier stored in the previous third node, it means that the text characters stored in the target node have different style as the text characters stored in the previous third node, and should belong to different presentation units, and step A5 is executed.
[0065] A4. Add the text characters stored in the target node to the presentation unit corresponding to the previous third node, and calculate the size position in the presentation unit corresponding to the previous third node based on the size position of the text characters stored in the target node, so as to generate the presentation unit corresponding to the target node.
[0066] A5. Create a new presentation unit, obtain the style of the text characters stored in the target node from the character style memory according to the style identifier stored in the target node, add the obtained style of the text characters stored in the target node to the newly created presentation unit, and add the text characters and the size position of the text characters stored in the target node to the newly created presentation unit, so as to generate a presentation unit corresponding to the target node.
[0067] After traversing all nodes in the updated first memory model, the first rendering data model can be obtained.
[0068] S103: Render the first rendering data model to obtain a second drawing board picture corresponding to the text editing operation, and display the second drawing board picture in the target drawing board.
[0069] Here, the first rendering data model can be passed to the text editing component for rendering, so as to obtain the second drawing board screen corresponding to the text editing operation. The first rendering data model can be passed to the text editing component through an onchange event.
[0070] S104, performing data structure conversion on the updated first memory data model to obtain a second external memory data model.
[0071] Here, the second external storage data model is used to store the second text related information according to the commonality of the style. The specific structure of the second external storage data model can be referred to in the aforementioned Figure 1A .
[0072] Performing data structure conversion on the updated first memory data model to obtain the second external memory data model means converting the data stored in the updated first memory data model into data stored according to the structure of the external memory data model, thereby obtaining the second external memory data model. The updated first memory data model can be traversed, and a parent node in a block structure can be generated according to the traversed first node and the second node under the first node, and a child node under the parent node in a block structure can be generated according to the traversed third node belonging to the same first node and having the same style identifier.
[0073] Among them, the updated first memory data model can be hierarchically traversed to extract the common style styles from the style styles stored in each first node traversed hierarchically, and the common style styles refer to the style styles existing in each first node, create a common data node and add the extracted common style styles to the common data node to generate the common data node. Then, according to each first node traversed hierarchically, create a block structure and a parent node in the block structure, the number of block structures is equal to the number of first nodes traversed hierarchically, and then add the style styles stored in the first node and the second node under the first node to the parent node in each created block structure, so as to generate the parent node in each block structure under the common data node. Finally, for each first node traversed through the hierarchy, the style identifiers stored in the third nodes under the first node can be extracted, and child nodes under the parent node in the block structure can be created based on the style identifiers. The number of child nodes under the parent node is equal to the number of style identifiers stored in the third nodes under the first node. According to the style identifier, the style style corresponding to the style identifier is obtained from the character style memory and added to the child node corresponding to the style identifier. The text characters are extracted from the third node corresponding to the style identifier and added to the child node corresponding to the style identifier, thereby generating the creation of child nodes under the parent node in the block structure.
[0074] S105, saving the second external storage data model in the drawing board database.
[0075] Here, the artboard database is used to store data related to the artboard.
[0076] In the above Figure 2 In the corresponding technical solution, in response to a text editing operation acting on a first canvas screen currently displayed in a target canvas, after updating a first memory data model corresponding to the first canvas screen, the updated first memory data model is converted into a data structure to obtain a first rendering data model, and then the first rendering data model is rendered to obtain a second canvas screen corresponding to the text editing operation, and the second canvas screen is displayed in the target screen; by converting the memory data model into a rendering data model that can be called by a canvas to draw text in the canvas, it is possible to edit the text in the canvas; since the memory data model stores text-related information and size position in the canvas screen according to the text position and text subordination relationship, when editing text, the text is directly drawn on the canvas by updating the memory data model and converting the memory data model into a rendering data model that can be called by the canvas. There is no need to operate the DOM structure to edit text in the canvas, which can avoid causing the canvas to freeze.
[0077] See also Figure 3 , Figure 3 A flowchart of another text editing method based on a drawing board provided in an embodiment of the present application is shown in FIG. Figure 3 As shown, the method comprises the following steps:
[0078] S201, obtaining a first external storage data model from a drawing board database.
[0079] Here, the first external storage data model stores the first text related information according to the commonality of the style. For the definition of the first text related information, please refer to the description of the aforementioned step S101, which will not be repeated here. Figure 1C .
[0080] S202: Perform data structure conversion on the first external storage data model to obtain a first internal storage data model.
[0081] Here, regarding the definition of the first memory data model, please refer to the description of the aforementioned step S101, which will not be repeated here.
[0082] Performing data structure conversion on the first external memory data model to obtain the first internal memory data model means converting the data stored in the first external memory data model into data stored according to the structure of the internal memory data model, thereby obtaining the first internal memory data model. The first external memory data model can be traversed, and a style style identifier corresponding to each text character is generated according to each text character in the traversed block structure and the style style corresponding to each text character, and a third node corresponding to each text character is created according to each text character and the style style identifier corresponding to each text character; then a second node is generated according to the third node corresponding to the parent node in the same block structure and the child node under the parent node in the same block structure, and a first node is generated according to the data common node and the second node corresponding to the parent node in the same block structure; finally, a root node is generated according to the first node.
[0083] Among them, the first external storage data model can be pre-order traversed, and after traversing to the child node in the block structure in the first external storage data model, multiple third nodes can be created according to the text characters in the child node, and the number of the third nodes is equal to the number of text characters in the child node. For each text character, the size and position of the text character are determined according to the style corresponding to the text character, the style corresponding to the text character is transferred to the character style memory for storage and the corresponding style identifier is generated, and the text character, the size and position of the text character and the style corresponding to the text character are added to the created third node, thereby generating multiple third nodes corresponding to a child node in the block structure. Then, according to the size and position of the text character, the third nodes are spliced one by one, and a second node is created; when the width obtained by splicing the size and position of the text character exceeds the width of the drawing board container, a new second node is created, and the style and size and position of the line text corresponding to the second node are generated according to the size and position of the text characters in the multiple third nodes corresponding to the second node and the line layout stored in the parent node in the block structure, and the style and size and position of the line text corresponding to the second node are added to the second node, thereby generating the creation of a second node corresponding to a child node in the block structure. After traversing a block structure, create a first node, generate the size position of the text paragraph or text list corresponding to the first section according to the size position of the text line corresponding to one or more second nodes corresponding to the first section, add the size position of the text paragraph or text list corresponding to the third node to the first section, and generate a first node corresponding to the block structure. Traverse each block structure in the first external storage data model in the same way to generate the first node corresponding to each block structure in the first external storage data model. Finally, generate a root node corresponding to the first node, and record the parent-child relationship between the root node and the first node.
[0084] S203: Display a first drawing board page according to the first memory data model.
[0085] Here, step S203 includes the following steps S2031-S2032:
[0086] S2031: Perform data structure conversion on the first memory data model to obtain a second rendering data model.
[0087] Here, the second rendering data model is used to store the first text related information and the size position corresponding to the first text related information according to the drawing order of the text characters stored in the first memory data model on the drawing board. For the meaning of the first text related information, please refer to the description of the aforementioned step S101; the specific structure of the second rendering data model can refer to the aforementioned Figure 1C .
[0088] The specific implementation principle of converting the data structure of the first memory data model to obtain the second rendering data model is the same as the specific implementation principle of converting the data structure of the updated first memory data model to obtain the first rendering data model in the aforementioned step S102. Please refer to the description of the aforementioned step S102 and will not be repeated here.
[0089] S2032: Render the second rendering data model to obtain a first artboard page, and display the first artboard page in the target artboard.
[0090] Here, the specific implementation principle of step S2032 is the same as the specific implementation principle of the aforementioned step S103. Please refer to the description of the aforementioned step S103 and will not be repeated here.
[0091] In the above Figure 3 In the corresponding technical solution, after obtaining the first external storage data model in the drawing board database, the first internal memory data model is obtained by converting the data structure of the first external storage data model; the second rendering data model is then converted to obtain the first drawing board screen, and the first drawing board screen is displayed in the screen, thereby realizing text traversal in the drawing board. Since the drawing is realized by converting the external storage data model into the internal memory data model and then into the rendering data model, there is no need to operate the DOM structure when editing text in the drawing board, which can avoid causing the drawing board to freeze.
[0092] The method of the present application is introduced above, and the device of the present application is introduced below.
[0093] See also Figure 4 , Figure 4 Schematic diagram of a text editing device based on a drawing board provided in an embodiment of the present application. Figure 4 As shown, the text editing device 30 based on the drawing board includes:
[0094] A memory model updating module 301 is used to respond to a text editing operation on a first artboard picture currently displayed in a target artboard, and update a first memory data model corresponding to the first artboard picture, wherein the first memory data model stores first text related information and a size position corresponding to the first text related information according to a text position and a text affiliation, wherein the first text related information is text related information corresponding to the first artboard picture, and the text related information includes text content and style;
[0095] A data structure conversion module 302 is used to perform data structure conversion on the updated first memory data model to obtain a first rendering data model, wherein the first rendering data model stores second text related information and size positions corresponding to the second text related information in the order in which the text characters are drawn on the drawing board, and the second text related information is the text related information stored in the updated first memory data model;
[0096] The rendering and display module 303 is used to render the first rendering data model, obtain a second drawing board picture corresponding to the text editing operation, and display the second drawing board picture in the target drawing board.
[0097] In a possible design, the data structure conversion module 302 is also used to obtain a first external storage data model from a drawing board database, wherein the first external storage data model stores the first text-related information according to the commonality of style; the data structure of the first external storage data model is converted to obtain the first internal storage data model; the rendering and display module 303 is also used to display the first drawing board page according to the first memory data model.
[0098] In a possible design, the rendering and display module 303 is specifically used to perform data structure conversion on the first memory data model to obtain a second rendering data model, wherein the second rendering data model stores the first text-related information and the size position corresponding to the first text-related information in the drawing order; renders the second rendering data model to obtain the first artboard page, and displays the first artboard page in the target artboard.
[0099] In a possible design, the first external storage data model includes a data common node and a block structure under the data common node, the data common node is used to store the common style of the text, the block structure includes a parent node and a child node under the parent node, the parent node in the block structure is used to store the style of a text paragraph or a text list, and the child node in the block structure is used to store text characters of the same style in the text paragraph or text list corresponding to the block structure and the style corresponding to the text characters of the same style; the first memory data model includes a root node, a first node, a second node and a third node, the first node is a child node of the root node, the first node is used to store the style and size position of the text paragraph or text list, the second node is a child node of the first node, and the second node is used to store the style of the text line and size position, the third node is a child node of the second node, and the third node is used to store text characters, the size position of the text characters, and the style style identifier corresponding to the text characters; the above-mentioned data structure conversion module 302 is specifically used to: traverse the first external storage data model, generate the style style identifier corresponding to each text character according to each text character in the traversed block structure and the style style corresponding to each text character, and create the third node corresponding to each text character according to each text character and the style style identifier corresponding to each text character; generate the second node according to the third node corresponding to the parent node in the same block structure and the child node under the parent node in the same block structure, and generate the first node according to the data common node and the second node corresponding to the parent node in the same block structure; generate the root node according to the first node.
[0100] In a possible design, the above-mentioned data structure conversion module 302 is also used to: perform data structure conversion on the updated first memory data model to obtain a second external memory data model, wherein the second external memory data model is used to store the second text-related information according to the commonality of style; and save the second external memory data model in the drawing board database.
[0101] In a possible design, the updated first memory data model includes a root node, a first node, a second node and a third node, the first node is a child node of the root node, the first node is used to store the style and size position of a text paragraph or text list, the second node is a child node of the first node, the second node is used to store the style and size position of a text line, the third node is a child node of the second node, the third node is used to store text characters, the size position of text characters and the style identifier corresponding to the text characters; the second external storage data model includes a data common node and a block structure under the data common node, the data common node is used to store The common style of the text, the block structure includes a parent node and a child node under the parent node, the parent node in the block structure is used to store the style of a text paragraph or a text list, and the child node in the block structure is used to store text characters of the same style in the text paragraph or text list corresponding to the block structure and the style corresponding to the text characters of the same style; the above-mentioned data structure conversion module 302 is specifically used to: traverse the updated first memory data model, generate the parent node in the block structure according to the traversed first node and the second node under the first node, and generate the child node under the parent node in the block structure according to the traversed third node belonging to the same first node and the same style identifier.
[0102] In a possible design, the updated first memory data model includes a root node, a first node, a second node and a third node, the first node is a child node of the root node, the first node is used to store the style and size position of a text paragraph or text list, the second node is a child node of the first node, the second node is used to store the style and size position of a text line, the third node is a child node of the second node, and the third node is used to store text characters, the size position of text characters and the style identifier corresponding to the text characters; the first rendering data model includes one or more rendering units, the rendering unit is used to store one or more text characters with the same style and adjacent text positions, and the style and size position corresponding to one or more text characters with the same style and adjacent text positions; the above-mentioned data structure conversion module 302 is specifically used to: traverse the updated first memory data model, and generate a rendering unit according to the traversed one or more consecutive text characters with the same style identifier.
[0103] It should be noted that Figure 4 For the contents not mentioned in the corresponding embodiments, please refer to the description of the aforementioned method embodiments, which will not be repeated here.
[0104] The above-mentioned device, in response to a text editing operation acting on the first canvas screen currently displayed in the target canvas, updates the first memory data model corresponding to the first canvas screen, performs data structure conversion on the updated first memory data model to obtain a first rendering data model, then renders the first rendering data model to obtain a second canvas screen corresponding to the text editing operation, and displays the second canvas screen in the target screen; by converting the memory data model into a rendering data model that can be called by the canvas to draw text in the canvas, it is possible to edit the text in the canvas; because the memory data model stores text-related information and size position in the canvas screen according to the text position and text subordination relationship, when editing text, the text is directly drawn on the canvas by updating the memory data model and converting the memory data model into a rendering data model that can be called by the canvas. There is no need to operate the DOM structure when editing text in the canvas, which can avoid causing the canvas to freeze.
[0105] See also Figure 5 , Figure 5 4 is a schematic diagram of a computer device provided in an embodiment of the present application, wherein the computer device 40 includes a processor 401 and a memory 402. The memory 402 is connected to the processor 401, for example, via a bus.
[0106] The processor 401 is configured to support the computer device 40 to perform the corresponding functions in the method in the above method embodiment. The processor 401 can be a central processing unit (CPU), a network processor (NP), a hardware chip or any combination thereof. The above hardware chip can be an application specific integrated circuit (ASIC), a programmable logic device (PLD) or a combination thereof. The above PLD can be a complex programmable logic device (CPLD), a field-programmable gate array (FPGA), a generic array logic (GAL) or any combination thereof.
[0107] The memory 402 is used to store program codes, etc. The memory 402 may include a volatile memory (VM), such as a random access memory (RAM); the memory 402 may also include a non-volatile memory (NVM), such as a read-only memory (ROM), a flash memory, a hard disk drive (HDD) or a solid-state drive (SSD); the memory 402 may also include a combination of the above-mentioned types of memories.
[0108] The processor 401 may call the program code to perform the following operations:
[0109] In response to a text editing operation on a first artboard picture currently displayed in a target artboard, a first memory data model corresponding to the first artboard picture is updated, wherein the first memory data model stores first text related information and a size position corresponding to the first text related information according to a text position and a text affiliation, wherein the first text related information is text related information corresponding to the first artboard picture, and the text related information includes text content and style;
[0110] Performing data structure conversion on the updated first memory data model to obtain a first rendering data model, wherein the first rendering data model stores second text-related information and size positions corresponding to the second text-related information in the order in which text characters are drawn on the drawing board, and the second text-related information is the text-related information stored in the updated first memory data model;
[0111] The first rendering data model is rendered to obtain a second drawing board picture corresponding to the text editing operation, and the second drawing board picture is displayed in the target drawing board.
[0112] An embodiment of the present application further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, wherein the computer program includes program instructions, and when the program instructions are executed by a computer, the computer executes the method described in the above embodiment.
[0113] A person skilled in the art can understand that all or part of the processes in the above-mentioned embodiments can be implemented by instructing the relevant hardware through a computer program, and the program can be stored in a computer-readable storage medium, and when the program is executed, it can include the processes of the embodiments of the above-mentioned methods. The storage medium can be a disk, an optical disk, a read-only memory (ROM) or a random access memory (RAM), etc.
[0114] The above disclosure is only the preferred embodiment of the present application, which certainly cannot be used to limit the scope of rights of the present application. Therefore, equivalent changes made according to the claims of the present application are still within the scope covered by the present application.
Claims
1. A text editing method based on a drawing board, characterized in that: include: In response to a text editing operation on a first artboard picture currently displayed in a target artboard, a first memory data model corresponding to the first artboard picture is updated, wherein the first memory data model stores first text related information and a size position corresponding to the first text related information according to a text position and a text affiliation, wherein the first text related information is text related information corresponding to the first artboard picture, and the text related information includes text content and style; Performing data structure conversion on the updated first memory data model to obtain a first rendering data model, wherein the first rendering data model stores second text-related information and size positions corresponding to the second text-related information in the order in which text characters are drawn on the drawing board, and the second text-related information is the text-related information stored in the updated first memory data model; The first rendering data model is rendered to obtain a second drawing board picture corresponding to the text editing operation, and the second drawing board picture is displayed in the target drawing board.
2. The method according to claim 1, characterized in that: The step of responding to the text editing operation on the first drawing board picture currently displayed in the target drawing board and updating the first memory data model corresponding to the first drawing board picture further includes: Acquire a first external storage data model from a drawing board database, wherein the first external storage data model stores the first text related information according to the commonality of styles; Performing data structure conversion on the first external storage data model to obtain the first internal storage data model; The first drawing board page is displayed according to the first memory data model.
3. The method according to claim 2, characterized in that The step of displaying the first drawing board page according to the first memory data model includes: Performing data structure conversion on the first memory data model to obtain a second rendering data model, wherein the second rendering data model stores the first text related information and the size position corresponding to the first text related information in the drawing order; The second rendering data model is rendered to obtain the first artboard page, and the first artboard page is displayed in the target artboard.
4. The method according to claim 2, characterized in that: The first external storage data model includes a data common node and a block structure under the data common node, the data common node is used to store a common style of text, the block structure includes a parent node and a child node under the parent node, the parent node in the block structure is used to store the style of a text paragraph or a text list, and the child node in the block structure is used to store text characters of the same style in the text paragraph or text list corresponding to the block structure and the style corresponding to the text characters of the same style; the first internal memory data model includes a root node, a first node, a second node and a third node, the first node is a child node of the root node, the first node is used to store the style and size position of a text paragraph or a text list, the second node is a child node of the first node, the second node is used to store the style and size position of a text line, the third node is a child node of the second node, and the third node is used to store text characters, the size position of text characters and the style identifier corresponding to the text characters; The performing data structure conversion on the first external storage data model to obtain the first internal storage data model includes: Traversing the first external storage data model, generating a style identifier corresponding to each text character according to each text character in the traversed block structure and the style identifier corresponding to each text character, and creating a third node corresponding to each text character according to each text character and the style identifier corresponding to each text character; Generate a second node according to a third node corresponding to a parent node in the same block structure and a child node under the parent node in the same block structure, and generate a first node according to the data common node and a second node corresponding to the parent node in the same block structure; A root node is generated according to the first node.
5. The method according to claim 1, after responding to the text editing operation on the first artboard picture currently displayed in the target artboard and updating the first memory data model corresponding to the first artboard picture, further comprises: Performing data structure conversion on the updated first memory data model to obtain a second external memory data model, wherein the second external memory data model is used to store the second text related information according to the commonality of style; The second external storage data model is saved in the drawing board database.
6. The method according to claim 5, characterized in that The updated first memory data model includes a root node, a first node, a second node and a third node, the first node is a child node of the root node, the first node is used to store the style and size position of a text paragraph or a text list, the second node is a child node of the first node, the second node is used to store the style and size position of a text line, the third node is a child node of the second node, the third node is used to store text characters, the size position of text characters and the style identifier corresponding to the text characters; the second external storage data model includes a data common node and a block structure under the data common node, the data common node is used to store a common style of text, the block structure includes a parent node and a child node under the parent node, the parent node in the block structure is used to store the style of a text paragraph or a text list, the child node in the block structure is used to store text characters of the same style in the text paragraph or text list corresponding to the block structure and the style corresponding to the text characters of the same style; The step of performing data structure conversion on the updated first memory data model to obtain a second external memory data model includes: The updated first memory data model is traversed, a parent node in a block structure is generated according to the traversed first node and a second node under the first node, and a child node under the parent node in the block structure is generated according to a traversed third node belonging to the same first node and having the same style identifier.
7. The method according to any one of claims 1 to 6, characterized in that: The updated first memory data model includes a root node, a first node, a second node and a third node, the first node is a child node of the root node, the first node is used to store the style and size position of a text paragraph or a text list, the second node is a child node of the first node, the second node is used to store the style and size position of a text line, the third node is a child node of the second node, the third node is used to store text characters, the size position of text characters and the style identifier corresponding to the text characters; the first rendering data model includes one or more rendering units, the rendering unit is used to store one or more text characters with the same style and adjacent text positions, and the style and size position corresponding to the one or more text characters with the same style and adjacent text positions; The step of converting the updated first memory data model into a data structure to obtain a first rendering data model includes: The updated first memory data model is traversed, and a presentation unit is generated according to one or more consecutive text characters with the same style identifier that are traversed.
8. A text editing device based on a drawing board, characterized in that: include: A memory model updating module, configured to respond to a text editing operation on a first artboard picture currently displayed in a target artboard, and update a first memory data model corresponding to the first artboard picture, wherein the first memory data model stores first text related information and a size position corresponding to the first text related information according to a text position and a text affiliation, wherein the first text related information is text related information corresponding to the first artboard picture, and the text related information includes text content and style; a data structure conversion module, configured to perform data structure conversion on the updated first memory data model to obtain a first rendering data model, wherein the first rendering data model stores second text-related information and size positions corresponding to the second text-related information in the order in which the text characters are drawn on the drawing board, wherein the second text-related information is the text-related information stored in the updated first memory data model; A rendering and display module is used to render the first rendering data model, obtain a second drawing board picture corresponding to the text editing operation, and display the second drawing board picture in the target drawing board.
9. A computer device, characterized in that: The method comprises a memory and a processor, wherein the memory is connected to the processor, and the processor is used to execute one or more computer programs stored in the memory. When the processor executes the one or more computer programs, the computer device implements the method according to any one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, wherein the computer program includes program instructions, and when the program instructions are executed by a processor, the processor is caused to perform the method according to any one of claims 1 to 7.