A text annotation rendering method, system and storage medium

Abstract

A text annotation rendering method, system and storage medium, including obtaining and storing data to be annotated; obtaining and processing annotation information data; obtaining and processing configuration information, obtaining a display container ID, the writing direction and reading direction of the text rendering result, and the style information of the annotation block, and storing them; obtaining a DOM node according to the display container ID; creating a text container layer in the display container, writing the data to be annotated into the text container layer according to the writing direction and reading direction of the text rendering result, and adding an interactive response event to the text container layer; creating an annotation block container layer above the text container layer; converting the annotation information data into a corresponding annotation block and locating it to the corresponding position of the text container layer, completing and displaying the initial rendering result; performing the initial rendering after the rendering preparation of the text container layer and the annotation block container layer is completed; waiting for user interaction. The present invention can configure the writing direction and reading direction for multilingual scenarios to achieve efficient annotation.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a text annotation rendering method, system and storage medium. Background Art

[0002] With the continuous advancement of artificial intelligence technology, especially its wide application in natural language processing (NLP) and large language models, text data annotation has become an important cornerstone for promoting technological innovation and development. However, existing technologies still face significant technical challenges when dealing with multilingual text annotation.

[0003] Traditional methods, such as HTML tag pair annotation, cannot effectively adapt to the writing direction and reading habits of different languages ​​when processing cross-language and cross-line annotation. Although there are innovative technical solutions such as Chinese patent CN113807049A that proposes to enhance the flexibility of annotation by separating the text layer and the tag layer, this design does not take into account the scenarios in multilingual text annotation.

[0004] Specifically, the annotation tools currently on the market generally lack a systematic annotation rendering method that can fully adapt to the characteristics of multiple languages. Different languages ​​not only differ in vocabulary and grammar, but also in writing directions and reading habits, which poses a severe test to the multi-language support capabilities of annotation tools. Existing annotation methods are often limited to specific languages ​​or text formats, and are difficult to flexibly adjust to meet diverse annotation needs.

[0005] Therefore, existing text annotation rendering methods cannot efficiently annotate in multilingual text annotation scenarios, resulting in a poor user experience. Summary of the invention

[0006] The main purpose of the present invention is to provide a text annotation rendering method, system and storage medium, aiming to solve the technical problems that the existing text annotation rendering method cannot efficiently annotate in multilingual text annotation scenarios and the user experience is poor.

[0007] To achieve the above-mentioned purpose, the present invention provides a text annotation rendering method, which includes the following steps: obtaining and storing data to be annotated, the data to be annotated at least including text data; obtaining and processing annotation information data to determine whether the annotation information data is empty; obtaining and processing configuration information to obtain a display container ID, a writing direction of a text rendering result, a reading direction of a text rendering result, and style information of an annotation block, and storing them; obtaining a corresponding DOM node according to the display container ID; creating a text container layer in the display container, writing the data to be annotated into the text container layer according to the writing direction and the reading direction of the text rendering result, and adding an interactive response event to the text container layer to respond to user interaction operations; creating an annotation block container layer above the text container layer for storing and displaying the annotation block; if the annotation information data is not empty, converting it into a corresponding annotation block, and positioning the annotation block to a corresponding position of the text container layer, completing initialization rendering and displaying the initial rendering result; waiting for user interaction operations, if there are user interaction operations, re-performing text rendering processing according to the user interaction operations, and displaying new text rendering results; if there are no user interaction operations, directly displaying the initial rendering results.

[0008] Optionally, the display container is a DOM node for storing a text container and a markup block container; the text container is a DOM node for storing data to be marked; and the markup block container is a drawing node for the markup block.

[0009] Optionally, the label block container layer has CSS properties added to make it unresponsive to mouse events.

[0010] Optionally, the label block container layer has CSS properties added to make it unresponsive to mouse events;

[0011] Before initial rendering, bind a user interaction listener to each annotation block. When the user interacts with the annotation block and triggers the listener, the preset custom response logic is executed.

[0012] The preset custom response logic at least includes: displaying a confirmation dialog box to determine whether the user needs to perform a preset action; if it is determined that the user needs to perform the preset action, re-rendering the text.

[0013] Optionally, the user interaction operation at least includes the user selecting a marked block;

[0014] When the user interaction operation is for the user to select an annotation block, re-rendering the text includes at least the following steps: obtaining the ID of the currently selected annotation block, matching the data of the currently selected annotation block ID with the existing annotation blocks, obtaining the annotation block corresponding to the currently selected annotation block ID and executing a preset action; executing a preset action on the annotation block in the annotation block container that corresponds to the currently selected annotation block ID.

[0015] Optionally, the user interaction operation at least includes user selection of text data;

[0016] When the user interaction operation is for the user to select text data, re-rendering the text includes at least the following steps: obtaining the text data selected by the user and the corresponding Range object information; obtaining the boundary information of the text data selected by the user and the boundary information of the text container, and judging whether the text data selected by the user is multi-line text based on the boundary information of the two; if the text data selected by the user is not multi-line text, drawing the corresponding new annotation block based on the boundary information of the Range object information corresponding to the text data selected by the user; if the text data selected by the user is multi-line text, first performing the rendering element splitting process, and then drawing the new annotation block and positioning it to the corresponding position of the text container layer.

[0017] Optionally, the rendering element splitting process specifically includes the following steps:

[0018] Create a new Range object and set its starting and ending positions; split the text data selected by the user into multiple single characters, obtain the coordinate information of each character one by one, and compare the coordinate information of each character with the position information of the text container to identify the line break point; split the text data selected by the user into multiple parts according to the line break point, and each part corresponds to an independent Range object.

[0019] Optionally, if the text data selected by the user is a multi-line text, drawing a new annotation block and positioning it at a corresponding position of the text container layer specifically includes:

[0020] The boundary information of each independent Range object is obtained, and the corresponding newly added annotation block sub-graphics is drawn according to the boundary information of each independent Range object, and then each newly added annotation block sub-graphics is positioned at the corresponding position of the text container layer.

[0021] Optionally, the Range object information includes DOM information, text information, and text length information of the text data selected by the user;

[0022] The boundary information includes position information and size information. The position information includes x and y coordinate information, and the size information includes width information and height information.

[0023] Corresponding to the text annotation rendering method, the present invention provides a text annotation rendering system, which includes: a processing module, used to obtain data to be annotated, the data to be annotated at least includes text data; obtain and process annotation information data to determine whether the annotation information data is empty; obtain and process configuration information to obtain a display container ID, a writing direction of a text rendering result, a reading direction of a text rendering result, and style information of an annotation block; and also used to call a rendering module to perform re-rendering processing according to user interaction operations; and provide some operation interfaces to an external system;

[0024] A storage module, at least used to store the data to be annotated, the processed annotation information data and the configuration information;

[0025] The rendering module is used to obtain the corresponding DOM node according to the display container ID; create a text container layer in the display container, write the data to be annotated into the text container layer according to the writing direction and reading direction of the text rendering result, and add interactive response events to the text container layer to respond to user interactive operations; create an annotation block container layer above the text container layer to store and display the annotation blocks; if the annotation information data is not empty, convert it into a corresponding annotation block, and locate the annotation block to the corresponding position of the text container layer, obtain and display the initial rendering result; if there is a user interactive operation, re-render the text according to the user interactive operation, and display the new text rendering result; if there is no user interactive operation, directly display the initial rendering result.

[0026] In addition, to achieve the above-mentioned purpose, the present invention also provides a computer-readable storage medium, on which a text annotation rendering method program is stored. When the text annotation rendering method program is executed by a processor, the steps of the text annotation rendering method described above are implemented.

[0027] The beneficial effects of the present invention are:

[0028] (1) Compared with the prior art, the present invention decouples the data to be annotated from the annotated rendering data, and can configure the two attributes of writing direction and reading direction in a more detailed manner for multilingual scenarios in combination with configuration information, thereby achieving efficient annotation in multilingual text annotation scenarios; and provides user interaction conditions, thereby providing a better user experience for users who have multilingual text annotation needs;

[0029] (2) Since the annotation block is positioned on the text to achieve the annotation rendering effect, when the mouse wants to select the text again, it will not be able to select the text because the upper layer is the canvas layer. Compared with the prior art, the present invention adds CSS attributes to the annotation block container layer to make it unresponsive to mouse events, thereby avoiding the user being unable to select the text and affecting the user experience;

[0030] (3) Compared with the prior art, the present invention allows users to flexibly annotate text according to actual needs by re-rendering according to user interaction operations, thereby improving the flexibility of annotation;

[0031] (4) Compared with the prior art, the present invention supports the creation of a label block container layer in a text container, which facilitates the drawing of a new label block;

[0032] (5) Compared with the prior art, the present invention solves the problem of multi-line text annotation by splitting the rendering elements, ensuring that the annotation block can accurately locate the entire selected area, improving the efficiency and accuracy of multi-line text annotation, and providing users with a better annotation experience;

[0033] (6) Compared with the prior art, the present invention achieves accurate multi-line text annotation effect by drawing a corresponding new annotation block sub-graphic for each independent Range object, improves the detail and clarity of multi-line text annotation, and makes the annotation result easier to understand and use;

[0034] (7) Compared with the prior art, the position information of the present invention includes x and y coordinate information, and the size information includes width information and height information, which provides accurate data support for the drawing of the annotation block, improves the drawing accuracy and consistency of the annotation block, and ensures the beauty and accuracy of the annotation rendering effect. BRIEF DESCRIPTION OF THE DRAWINGS

[0035] The drawings described herein are used to provide a further understanding of the present invention and constitute a part of the present invention. The exemplary embodiments of the present invention and their descriptions are used to explain the present invention and do not constitute an improper limitation of the present invention. In the drawings:

[0036] Figure 1 A simplified flowchart of an embodiment of a text annotation rendering method of the present invention;

[0037] Figure 2 A framework diagram of an embodiment of a text annotation rendering system of the present invention. DETAILED DESCRIPTION

[0038] In order to make the purpose, technical scheme and advantages of the embodiments of the present invention clearer, the technical scheme in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, rather than all the embodiments. It should be understood that the specific embodiments described herein are only used to explain the present invention and are not used to limit the present invention. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present invention.

[0039] Among the existing annotation methods, the most common solution is to use HTML (HyperText Markup Language) tag pairs (HTML consists of various tags, and paired tags are used to define the structure and content of a web page) to display the annotation block effect. Specifically, it is done by obtaining a selected text, calculating the index position, adding specified tags before and after, and then rendering the effect in HTML format. The core of the prior art is how to find the accurate index to insert the tag, and the core of the present invention is how to obtain the user's selected area, how to accurately position the annotation block graphic on the area, how to support multi-language scenarios, and how to handle layer occlusion, line breaks and other issues.

[0040] like Figure 1 As shown, a text annotation rendering method of the present invention includes the following steps: obtaining and storing data to be annotated, the data to be annotated at least includes text data; obtaining and processing annotation information data to determine whether the annotation information data is empty; obtaining and processing configuration information to obtain a display container ID, a writing direction of a text rendering result, a reading direction of a text rendering result, and style information of an annotation block, and storing them; obtaining a corresponding DOM (Document Object Model) node according to the display container ID; creating a text container layer in the display container, writing the data to be annotated into the text container layer according to the writing direction and the reading direction of the text rendering result, and adding an interactive response event to the text container layer to respond to user interaction operations; creating an annotation block container layer above the text container layer for storing and displaying the annotation block; if the annotation information data is not empty, converting it into a corresponding annotation block, and positioning the annotation block to a corresponding position of the text container layer, completing initialization rendering and displaying the initial rendering result; waiting for user interaction operations, if there are user interaction operations, re-performing text rendering processing according to the user interaction operations, and displaying new text rendering results; if there are no user interaction operations, directly displaying the initial rendering results.

[0041] It is understandable that after re-rendering the text according to the user interaction operation and displaying the new text rendering result, the user interaction operation is continued to be waited for in order to update the text rendering result.

[0042] It should be noted that the steps of obtaining and processing the data to be annotated, the annotated information data and the configuration information can be performed simultaneously. The separate descriptions are only for the purpose of more clearly illustrating the results of data processing and do not constitute an improper limitation on the present invention.

[0043] The present invention decouples the data to be annotated from the annotated rendering data, and can configure the two attributes of writing direction and reading direction more finely for multi-language scenarios in combination with configuration information, thereby achieving efficient annotation in multi-language text annotation scenarios; and provides user interaction conditions, thereby providing a better user experience for users with multi-language text annotation needs.

[0044] Preferably, the data to be annotated can be obtained from an external system (refer to Figure 2 ) is passed into the annotation rendering system. The data to be annotated is plain text or rich text in HTML format.

[0045] Preferably, if the annotation information data is not empty, the annotation information data is converted into a corresponding annotation block through the createMark method, added to the annotation block container (canvas, which is a drawing node of the Canvas annotation block. Canvas is a drawing capability provided by HTML. A drawing canvas can be created in the page and various patterns can be drawn on it), and positioned on the selected area for display. The annotation block is a graphic node used to be positioned on each selected area.

[0046] In this embodiment, the display container is a DOM node for storing a text container and a markup block container; the text container is a DOM node for storing data to be marked; and the markup block container is a drawing node of the markup block.

[0047] In this embodiment, CSS properties are added to the annotation block container layer to prevent it from responding to mouse events. Since the annotation block is positioned on the text to achieve the annotation rendering effect, the annotation block container layer is equivalent to a transparent paper covering the top layer, and all the annotated graphics are drawn on this paper. Therefore, when the mouse wants to select the text again, the top layer is the canvas layer, which will result in the inability to select the text data of the text container layer; therefore, the present invention adds a CSS property to the annotation block container layer by executing the addStyle() method: pointerEvents:none, so that the canvas layer does not respond to mouse events, so as to avoid the user being unable to select text and affecting the use of the function. It should be noted that in this embodiment, the display container layer is a container for placing the text container layer and the annotation block container layer, so that the text container layer and the annotation block container layer can be found or created by configuring the ID.

[0048] Preferably, if the style information of the annotation block is empty, the built-in default style is used.

[0049] In this embodiment, before initializing the rendering, a user interaction operation listener is bound to each marked block, and when the user interacts with the marked block and triggers the listener, the preset custom response logic is executed.

[0050] Preferably, the preset custom response logic at least includes: displaying a confirmation dialog box to determine whether the user needs to perform a preset action; if it is determined that the user needs to perform the preset action, re-rendering the text.

[0051] In this embodiment, the user interaction operation at least includes the user selecting an annotation block. When the user interaction operation is the user selecting an annotation block, re-rendering the text includes at least the following steps: obtaining the ID of the currently selected annotation block, matching the data of the currently selected annotation block ID with the existing annotation blocks, obtaining the annotation block corresponding to the currently selected annotation block ID and executing a preset action; executing a preset action on the annotation block in the annotation block container that corresponds to the currently selected annotation block ID.

[0052] The present invention allows users to freely define interactive operations and corresponding custom response logic according to their specific needs. For example, the user defines the interactive operation as selecting a marked block (specifically by clicking the marked block with a single mouse click or multiple clicks on the marked block, without limitation) according to their specific needs. Accordingly, the preset custom response logic is the processing logic for deleting the marked block, which specifically includes: displaying a confirmation dialog box to determine whether the user needs to perform a preset action; if it is determined that the user needs to perform a preset action, re-rendering the text. Among them, the preset action is specifically the action of deleting the marked block.

[0053] Based on the above requirements, before initializing the rendering, a select annotation block event listener is bound to each annotation block. When the user selects the annotation block, the system displays a confirmation dialog box by popping up a dialog box to ask the user whether to delete the annotation block to ensure that the user's operation intention is confirmed. If it is determined that the user needs to delete the annotation block (for example, the user checks or clicks the confirmation option, without limitation), the text rendering process is re-performed, which specifically includes the following steps: obtaining the ID of the currently selected annotation block, matching the data of the currently selected annotation block ID with the existing annotation blocks, obtaining the annotation block corresponding to the currently selected annotation block ID and deleting it; removing the annotation block corresponding to the currently selected annotation block ID in the annotation block container through the removeChild method.

[0054] It is to be understood that the above is only an exemplary description and does not constitute an improper limitation of the present invention. Users can freely define interactive operations and corresponding customized response logic according to their specific needs, such as editing annotation blocks, hiding annotation blocks, etc. Since the present invention allows users to customize according to specific needs, a high degree of flexibility and adaptability is achieved.

[0055] Preferably, the annotation information data is derived from an existing annotation block by calling the getData method. It should be noted that the annotation information data may be empty.

[0056] In this embodiment, the writing direction of the text rendering result can be determined first, and then the reading direction can be determined. If the configuration information specifies a writing direction from right to left, add the unicode-bidi: embed; direction: rtl; attribute. If the configuration information also specifies a writing direction from right to left, add the writing-mode: vertical-rl; attribute. If the configuration information also specifies a writing direction from left to right, add the writing-mode: vertical-lr; attribute. This supports scenarios with writing text in different directions and reading directions, and uses multi-language annotation scenarios.

[0057] Preferably, there are multiple reading directions for the text rendering results, including at least one or more of right to left, left to right, and top to bottom. For example, in the Chinese scene, the reading direction from top to bottom is often accompanied by a reading direction from right to left; there are multiple writing directions for the text rendering results, including at least one or more of left to right, right to left, and top to bottom. For example, the writing direction of languages ​​such as Chinese and English is from left to right, and the writing direction of languages ​​such as Arabic is from right to left, and the right side is the starting point of the pen.

[0058] In this embodiment, the writing direction of the text rendering result is from left to right by default, and the reading direction is from left to right by default.

[0059] Preferably, the user interaction operation further includes user selection of text data;

[0060] When the user interaction operation is for the user to select text data, re-rendering the text includes at least the following steps: obtaining the text data selected by the user and the corresponding Range object information; obtaining the boundary information of the text data selected by the user and the boundary information of the text container, and judging whether the text data selected by the user is multi-line text based on the boundary information of the two; if the text data selected by the user is not multi-line text, drawing the corresponding new annotation block based on the boundary information of the Range object information corresponding to the text data selected by the user; if the text data selected by the user is multi-line text, first performing the rendering element splitting process, and then drawing the new annotation block and positioning it to the corresponding position of the text container layer.

[0061] Furthermore, to obtain the boundary information of the text data selected by the user, the position information of the current Range object can be obtained through the getBoundingClientRect() method. Return data structure:

[0062] {

[0063] "x": 680.3773803710938,

[0064] "y": 230.16510009765625,

[0065] "width": 238.00469970703125,

[0066] "height": 75.1697998046875,

[0067] "top": 230.16510009765625,

[0068] "right": 918.382080078125,

[0069] "bottom": 305.33489990234375,

[0070] "left": 680.3773803710938

[0071] }

[0072] The above is just an example. The above data structure describes a rectangle (or rectangular area), "x": the x-coordinate of the upper left corner of the rectangle, "y": the y-coordinate of the upper left corner of the rectangle, "width": the width of the rectangle, "height": the height of the rectangle, "top": the y-coordinate of the top of the rectangle, "right": the x-coordinate of the right side of the rectangle, which is calculated by adding the x-coordinate of the upper left corner to the width, "bottom": the y-coordinate of the bottom of the rectangle, which is calculated by adding the y-coordinate of the upper left corner to the height, and "left": the x-coordinate of the left side of the rectangle.

[0073] Because the present embodiment directly obtains the position information from the target DOM, the relative position and size of the target element can be accurately obtained regardless of whether the target text is arranged vertically, horizontally, or in other ways, so it is compatible with multi-language scenarios without additional processing.

[0074] Usually, the annotation rendering method defaults to annotating shorter paragraphs, but if the text is slightly longer, or happens to be at the line break position, it becomes a multi-line situation. The multi-line situation is different from the single-line situation. If you still take the minimum and maximum coordinate values ​​to draw a rectangle, because of the line break, the obtained width will fill the text container, and the drawn graphic area will cover all the rows where the selected area is located, and the effect becomes that all rows are highlighted, which obviously does not meet the requirements and needs to be handled separately. Preferably, the relative position information of the boundary information of the text data selected by the user and the boundary information of the text container is calculated based on the boundary information of the two, so as to determine whether the text data selected by the user is multi-line text. Specifically, the DOM of the text container can be obtained through the document.querySelector method provided by the Web API, and its coordinate information can be obtained through getBoundingClientRect(). It is calculated with the coordinate information of the user-selected text data previously obtained to obtain the relative position information.

[0075] The present invention allows the user to flexibly annotate the text according to actual needs by re-rendering according to the user interaction operation, thereby improving the flexibility of annotation.

[0076] In this embodiment, the rendering element splitting process specifically includes the following steps:

[0077] Create a new Range object by using document.createRange() and set its start and end positions; split the text data selected by the user into multiple single characters, obtain the coordinate information of each single character one by one, and compare the coordinate information of each character with the position information of the text container to identify the line break point; split the text data selected by the user into multiple parts according to the line break point, and each part corresponds to an independent Range object. Each Range object contains a continuous segment of text, and these segments are separated by line break points.

[0078] The present invention solves the problem of multi-line text annotation by splitting the rendering elements, ensures that the annotation block can accurately locate the entire selected area, improves the efficiency and accuracy of multi-line text annotation, and provides users with a better annotation experience.

[0079] Preferably, the Range object information is obtained through the getRangeAt(0) method, and the obtained data is then passed to the createMark method.

[0080] It should be noted that the text data selected by the user is the text data on the data to be annotated. Preferably, the user can select the text data on the data to be annotated by dragging the mouse. In this embodiment, logic needs to be written to check whether there is text selected, which can usually be achieved through the document.getSelection() method, which returns a Selection object, in which the isCollapsed parameter can know whether there is text selected.

[0081] Preferably, the text data selected by the user can be obtained through document.getSelection().getRangeAt(0) in the Web API. This API returns a data structure:

[0082] {

[0083] collapsed: false, / / Are the starting and ending positions of the Range object the same?

[0084] endOffset: 37, / / The number of the end point of the Range object in the endContainer

[0085] startOffset: 0, / / The starting position of the Range object in the startContainer

[0086] commonAncestorContainer: Text object, / / The deepest node that completely contains startContainer and endContainer

[0087] endContainer: Text object, / / contains the node at the end of the Range

[0088] startContainer: Text object / / contains the node where the Range starts

[0089] }

[0090] The above is just an example, describing a Range object, which represents a continuous range that can contain nodes and some of their text content.

[0091] The collapsed property indicates whether the start and end positions of the Range object are the same. If they are the same, the Range object is considered "collapsed", meaning that it contains no content (although it points to a specific point in the document).

[0092] The endOffset property indicates the position of the end point of the Range object in the endContainer. Note that the position here is an index starting from 0, which means that if endOffset is 0, the end point of the Range object is the beginning of the endContainer. If endOffset is equal to the text length of the endContainer, the end point of the Range object is at the end of the endContainer.

[0093] The startOffset property indicates the starting position of the Range object in the startContainer. Similar to endOffset, this is also an index starting from 0. If startOffset is 0, the starting point of the Range object is the starting position of the startContainer.

[0094] The commonAncestorContainer property returns the deepest common ancestor node containing the startContainer and endContainer. If the start and end points of a Range object are in the same node, then this node itself is the commonAncestorContainer. This property helps to quickly determine the scope of the DOM tree affected by the Range object.

[0095] The endContainer property represents the node that contains the end point of the Range object. Since Range objects can span multiple nodes, endContainer is not necessarily the direct sibling or parent node of startContainer.

[0096] The startContainer property indicates the node that contains the starting point of the Range object. In contrast to endContainer, it marks the beginning of the Range object.

[0097] In this embodiment, the annotation block container layer is the same size as the text container, and is used to draw the newly added annotation block. The PIXIJS library is introduced to do data layering processing. PIXIJS supports both WebGL and Canvas rendering, which can provide higher rendering performance. Alternatively, you can also use the native Canvas API provided by the Web browser to draw the newly added annotation block. The Canvas API is part of the HTML5 specification. It provides a canvas (Canvas) on which developers can draw various shapes, texts, images, and even perform complex image synthesis and pixel operations through JavaScript.

[0098] The present invention supports creating a label block container layer in a text container, which provides convenience for drawing a newly added label block.

[0099] In this embodiment, if the text data selected by the user is multiple lines of text, drawing a new annotation block and positioning it at a corresponding position of the text container layer specifically includes:

[0100] Get the boundary information of each independent Range object, draw the corresponding newly added annotation block sub-graphics according to the boundary information of each independent Range object, and then position each newly added annotation block sub-graphics to the corresponding position of the text container layer (that is, position it on the text segment represented by the corresponding Range object).

[0101] The present invention achieves accurate multi-line text annotation effect for multi-line text by drawing a corresponding newly added annotation block sub-graphic for each independent Range object, improves the detail and clarity of multi-line text annotation, and makes the annotation result easier to understand and use.

[0102] The position information of the present invention includes x and y coordinate information, and the size information includes width information and height information, which provides accurate data support for drawing the annotation block, improves the drawing accuracy and consistency of the annotation block, and ensures the beauty and accuracy of the annotation rendering effect.

[0103] In this embodiment, the Range object information includes DOM information, text information, and text length information of the text data selected by the user; the boundary information includes position information and size information, the position information includes x, y coordinate information, and the size information includes width information and height information.

[0104] like Figure 2 As shown, the present invention also provides a text annotation rendering system, which includes: a processing module 10, used to obtain data to be annotated, the data to be annotated at least includes text data; obtain and process annotation information data to determine whether the annotation information data is empty; obtain and process configuration information to obtain a display container ID, a writing direction of a text rendering result, a reading direction of a text rendering result, and style information of an annotation block; and also used to call a rendering module 30 to perform re-rendering processing according to user interaction operations; and provide some operation interfaces to an external system;

[0105] The storage module 20 is at least used to store the data to be annotated, the processed annotation information data and the configuration information;

[0106] The rendering module 30 is used to obtain the corresponding DOM node according to the display container ID; create a text container layer in the display container, write the data to be annotated into the text container layer according to the writing direction and reading direction of the text rendering result, and add an interactive response event to the text container layer to respond to the user interaction operation; create an annotation block container layer above the text container layer to store and display the annotation block; if the annotation information data is not empty, convert it into a corresponding annotation block, and locate the annotation block to the corresponding position of the text container layer, obtain and display the initial rendering result; if there is a user interaction operation, re-render the text according to the user interaction operation, and display the new text rendering result; if there is no user interaction operation, directly display the initial rendering result.

[0107] It is understandable that the storage module 20 can be used to store any data required in actual applications, which provides users with the freedom to store custom data.

[0108] It should be noted that when the user re-enters the annotation page, the data in the standard rendering system will be lost, so it is necessary to save the data to the backend for persistent storage. In this embodiment, the processing module 10 provides a getData method to the outside to process the annotation information data inside the annotation rendering system and export it. The exported data has the following necessary information: the annotation block ID, the content of the selected area, the starting index of the data to be annotated, the ending index of the data to be annotated, the default style of the annotation block, and the extended data that the user can customize and extend.

[0109] When the user enters the page again next time, the external system will pass in the last stored data, and the annotation rendering system will render these annotated data onto the page during the initialization process.

[0110] The embodiment of the present invention further provides a computer-readable storage medium, which may be a computer-readable storage medium included in the memory in the above embodiment; or a computer-readable storage medium that exists independently and is not installed in a device. The computer-readable storage medium stores at least one instruction, which is loaded and executed by a processor to implement Figure 1 The text annotation rendering method shown. The computer readable storage medium may be a read-only memory, a disk or an optical disk, etc.

[0111] It should be noted that the various embodiments in this specification are described in a progressive manner, and each embodiment focuses on the differences from other embodiments, and the same or similar parts between the various embodiments can be referred to each other. For the system embodiment and the storage medium embodiment, since they are basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0112] Furthermore, in this document, the terms "comprises," "comprising," or any other variation thereof are intended to encompass non-exclusive inclusion, such that a process, method, article, or device that includes a series of elements includes not only those elements, but also other elements not explicitly listed, or elements inherent to such process, method, article, or device. In the absence of further limitations, an element defined by the phrase "comprising a ..." does not exclude the presence of additional identical elements in the process, method, article, or device that includes the element.

[0113] The above description shows and describes the preferred embodiments of the present invention. It should be understood that the present invention is not limited to the form disclosed herein, and should not be regarded as excluding other embodiments, but can be used in various other combinations, modifications and environments, and can be modified within the scope of the invention, through the above teachings or the technology or knowledge of the relevant field. The changes and modifications made by those skilled in the art shall not depart from the spirit and scope of the present invention, and shall be within the scope of protection of the claims attached to the present invention.

Claims

1. A text annotation rendering method, characterized in that: The following steps are involved: Acquire and store the data to be annotated, where the data to be annotated at least includes text data; Acquire and process the annotation information data to determine whether the annotation information data is empty; Obtain and process configuration information to obtain the display container ID, the writing direction of the text rendering result, the reading direction of the text rendering result, and the style information of the annotation block, and store them; Get the corresponding DOM node according to the display container ID; A text container layer is created in the display container, and the data to be annotated is written into the text container layer according to the writing direction and reading direction of the text rendering result, and an interactive response event is added to the text container layer to respond to the user's interactive operation; Create a label block container layer above the text container layer to store and display the label blocks; If the annotation information data is not empty, it is converted into a corresponding annotation block, and the annotation block is positioned at the corresponding position of the text container layer, and the initial rendering is completed and the initial rendering result is displayed; Wait for user interaction. If there is user interaction, re-render the text according to the user interaction and display the new text rendering result. If there is no user interaction, the initial rendering result is displayed directly; The user interaction operation at least includes the user selecting text data; When the user interaction operation is for the user to select text data, the text rendering process is re-performed at least The method comprises the following steps: obtaining the text data selected by the user and the corresponding Range object information; Obtaining boundary information of the text data selected by the user and boundary information of the text container, and determining whether the text data selected by the user is a multi-line text according to the boundary information of the two; If the text data selected by the user is not multi-line text, the corresponding new annotation block is drawn according to the boundary information of the Range object information corresponding to the text data selected by the user; if the text data selected by the user is multi-line text, the rendering element splitting process is performed first, and then the new annotation block is drawn and positioned at the corresponding position of the text container layer.

2. The text annotation rendering method according to claim 1, characterized in that: The display container is a DOM node used to store a text container and a markup block container; the text container is a DOM node used to store data to be marked; and the markup block container is a drawing node of the markup block.

3. The text annotation rendering method according to claim 1, characterized in that: The label block container layer has CSS properties added to make it unresponsive to mouse events; Before initial rendering, bind a user interaction listener to each annotation block. When the user interacts with the annotation block and triggers the listener, the preset custom response logic is executed. The preset custom response logic at least includes: displaying a confirmation dialog box to determine whether the user needs to perform a preset action; If it is determined that the user needs to perform a preset action, the text rendering process is performed again.

4. The text annotation rendering method according to claim 3, characterized in that: The user interaction operation at least includes the user selecting the marked block; When the user interaction operation is for the user to select an annotation block, re-rendering the text includes at least the following steps: obtaining the ID of the currently selected annotation block, matching the data of the currently selected annotation block ID with the existing annotation blocks, obtaining the annotation block corresponding to the currently selected annotation block ID and executing a preset action; executing a preset action on the annotation block in the annotation block container that corresponds to the currently selected annotation block ID.

5. The text annotation rendering method according to claim 1, characterized in that: The rendering element splitting process specifically includes the following steps: Create a new Range object and set its starting and ending positions; split the text data selected by the user into multiple single characters, obtain the coordinate information of each character one by one, and compare the coordinate information of each character with the position information of the text container to identify the line break point; split the text data selected by the user into multiple parts according to the line break point, and each part corresponds to an independent Range object.

6. The text annotation rendering method according to claim 5, characterized in that: If the text data selected by the user is multi-line text, drawing a new annotation block and positioning it at the corresponding position of the text container layer specifically includes: The boundary information of each independent Range object is obtained, and the corresponding newly added annotation block sub-graphics is drawn according to the boundary information of each independent Range object, and then each newly added annotation block sub-graphics is positioned at the corresponding position of the text container layer.

7. The text annotation rendering method according to claim 1, characterized in that: Range object information includes DOM information, text information, and text length information of the text data selected by the user; The boundary information includes position information and size information. The position information includes x and y coordinate information, and the size information includes width information and height information.

8. A text annotation rendering system, characterized in that: include: The processing module is used to obtain the data to be annotated, which at least includes text data; obtain and process the annotation information data to determine whether the annotation information data is empty; obtain and process the configuration information to obtain the display container ID, the writing direction of the text rendering result, the reading direction of the text rendering result, and the style information of the annotation block; It is also used to call the rendering module to perform re-rendering processing according to user interaction operations; and provide some operation interfaces to external systems; A storage module, at least used to store the data to be annotated, the processed annotation information data and the configuration information; The rendering module is used to obtain the corresponding DOM node according to the display container ID; A text container layer is created in the display container, and the data to be annotated is written into the text container layer according to the writing direction and reading direction of the text rendering result, and an interactive response event is added to the text container layer to respond to user interactive operations; a annotation block container layer is created above the text container layer to store and display the annotation blocks; If the annotation information data is not empty, it is converted into a corresponding annotation block, and the annotation block is positioned at the corresponding position of the text container layer to obtain and display the initial rendering result; if there is a user interaction operation, the text rendering process is re-performed according to the user interaction operation, and the new text rendering result is displayed; If there is no user interaction, the initial rendering result is displayed directly; The user interaction operation at least includes the user selecting text data; When the user interaction operation is for the user to select text data, the text rendering process is re-performed at least The method comprises the following steps: obtaining the text data selected by the user and the corresponding Range object information; Obtaining boundary information of the text data selected by the user and boundary information of the text container, and determining whether the text data selected by the user is a multi-line text according to the boundary information of the two; If the text data selected by the user is not multi-line text, the corresponding new annotation block is drawn according to the boundary information of the Range object information corresponding to the text data selected by the user; if the text data selected by the user is multi-line text, the rendering element splitting process is performed first, and then the new annotation block is drawn and positioned at the corresponding position of the text container layer.

9. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a text annotation rendering method program, and when the text annotation rendering method program is executed by a processor, the steps of the text annotation rendering method according to any one of claims 1 to 7 are implemented.

Images