Handwriting erasing method, device, and storage medium

Abstract

The application provides a handwriting erasing method, device and storage medium. The method comprises the following steps: receiving an erasing operation acting on a current page, wherein the first handwriting element is displayed in the current page; performing path operation on an erasing path corresponding to the erasing operation and a first handwriting path corresponding to the first handwriting element by a special working thread to obtain a second handwriting path, wherein the special working thread is a background thread independent of a page main thread; rendering and displaying a second handwriting element corresponding to the second handwriting path in the current page by the page main thread; and performing path operation on an erasing path corresponding to a next erasing operation of the erasing operation and the second handwriting path by the special working thread in the process of rendering and displaying the second handwriting element by the page main thread. The technical scheme can realize real-time rendering of handwriting erasing and reduce the occurrence of rendering lag.

Description

Technical Field

[0001] This application relates to the field of handwriting processing, and more particularly to handwriting erasure methods, apparatus and storage media. Background Technology

[0002] Currently, interactive whiteboards and other display devices have been widely used, enabling functions such as writing and drawing in office, study and other application scenarios. The content written by the user on the interactive whiteboard can be displayed on the whiteboard, forming handwriting, which can be presented as text, symbols or graphics, etc.

[0003] In addition to writing on the interactive whiteboard to create handwriting, users can also erase their handwriting. The essence of handwriting erasure is generating and displaying new handwriting based on the erasure path. Currently, this is done by a JavaScript thread calculating the corresponding path based on the erasure path to obtain the new handwriting, which is then rendered on the page by the graphical user interface (GUI) rendering thread. The JavaScript thread and the GUI rendering thread are mutually exclusive. When there is a large amount of handwriting on the page and the erasure path is complex, a large number of JavaScript calculations are required. The GUI rendering thread must wait for all JavaScript calculations to complete before it can begin rendering. Therefore, JavaScript calculations can block rendering, causing rendering stutters. Summary of the Invention

[0004] This application provides a method, apparatus, and storage medium for erasing handwriting, aiming to solve the technical problem of rendering stuttering caused by handwriting erasure calculations.

[0005] Firstly, a method for erasing handwriting is provided, including:

[0006] Receive an erase operation applied to the current page, where a first handwriting element is displayed;

[0007] A dedicated worker thread performs path calculations on the erasure path corresponding to the erasure operation and the first handwriting path corresponding to the first handwriting element to obtain the second handwriting path. The dedicated worker thread is a background thread that runs independently of the main page thread.

[0008] The main thread of the page renders and displays the second handwriting element corresponding to the second handwriting path on the current page; wherein, during the rendering and display of the second handwriting element by the main thread of the page, the dedicated worker thread performs path calculations on the erase path corresponding to the next erase operation of the erase operation and the second handwriting path.

[0009] In this technical solution, after receiving an erase operation applied to the current page, a dedicated worker thread performs path calculations on the erase path corresponding to the erase operation and the first handwriting path corresponding to the first handwriting element displayed on the current page to obtain a second handwriting path. Then, the main page thread renders and displays the second handwriting element corresponding to the second handwriting path on the current page. Since the dedicated worker thread is a background thread that runs independently of the page, the dedicated worker thread and the main page thread can run independently. While the main page thread is rendering and displaying the handwriting element, the dedicated worker thread performs new path calculations. In this way, the new path calculations can be executed in parallel with the element rendering. The main page thread can render the handwriting element based on the handwriting calculation results already calculated by the dedicated worker thread while the dedicated worker thread is performing its calculation tasks. This enables real-time rendering of handwriting erasers and reduces the occurrence of rendering stuttering.

[0010] In conjunction with the first aspect, the first handwriting path is stored in an R-tree data structure, which stores the handwriting paths corresponding to handwriting elements on the page, and the handwriting paths corresponding to handwriting elements on the page are stored in the leaf nodes of the R-tree data structure. The step of performing path calculations on the erase path corresponding to the erase operation and the first handwriting path corresponding to the first handwriting element using a dedicated worker thread to obtain the second handwriting path includes: performing an intersection operation on the erase path corresponding to the erase operation and the nodes in the R-tree data structure using the dedicated worker thread to obtain an intersection result; updating the R-tree data structure based on the intersection result using the dedicated worker thread to obtain an updated R-tree data structure; and determining the second handwriting path based on the updated R-tree data structure using the dedicated worker thread.

[0011] Using an R-tree data structure to store the stroke paths corresponding to stroke elements on a page can reduce the number of intersection operations when paths overlap, thereby improving computational efficiency.

[0012] In conjunction with the first aspect, in one possible implementation, updating the R-tree data structure according to the intersection operation result through the dedicated worker thread to obtain the updated R-tree data structure includes: updating the leaf nodes in the R-tree data structure that intersect with the erasure path according to the intersection operation result through the dedicated worker thread to obtain the updated R-tree data structure.

[0013] The leaf nodes in the R-tree data structure that intersect with the erasure path are updated based on the result of the intersection operation, resulting in an updated R-tree data structure that enables real-time updates of handwriting on the page.

[0014] In conjunction with the first aspect, in one possible implementation, rendering and displaying the second handwriting element corresponding to the second handwriting path on the current page via the main page thread includes: generating a first rendering queue based on the second handwriting path via the main page thread; the first rendering queue is used to store rendering operations required to render the second handwriting element in sequence, the rendering operations including element removal operations and element addition operations; merging the element removal operation and the element addition operation associated with the element removal operation into a single rendering operation via the main page thread to obtain a second rendering queue; and executing the rendering operation according to the second rendering queue via the main page thread to obtain the second handwriting element and display the second handwriting element.

[0015] By merging the related element removal and element addition operations in the rendering queue into a single rendering operation, asynchronous batch rendering can be achieved, reducing the number of rendering operations and improving rendering efficiency.

[0016] In conjunction with the first aspect, in one possible implementation, generating a first rendering queue based on the second handwriting path via the page main thread includes: determining a re-rendering region in the current page based on the erasure path via the page main thread, wherein the re-rendering region is a local page region containing the erasure path; and generating a first rendering queue corresponding to the re-rendering region via the page main thread based on the second handwriting path.

[0017] When generating the rendering queue, a rendering queue is generated for a local page area. This allows for local rendering, rendering only the page area that has changed, thus improving rendering efficiency.

[0018] In conjunction with the first aspect, in one possible implementation, determining the re-rendering region in the current page according to the erasure path via the page main thread includes: determining, via the page main thread, a first outer bounding box and intersecting handwriting elements intersecting with the first outer bounding box in the current page, wherein the first outer bounding box is the outer bounding box of the erasure path; and determining, via the page main thread, the page area corresponding to the first outer bounding box and the intersecting handwriting elements in the current page as the re-rendering region.

[0019] Defining the page area corresponding to the outer bounding box of the erase path and the page area corresponding to the handwriting element intersecting with the outer bounding box as the re-rendering area can minimize the re-rendering area and improve rendering efficiency.

[0020] In conjunction with the first aspect, in one possible implementation, determining the re-rendering region in the current page based on the erasure path via the page main thread includes: if the erasure path intersects with the handwriting element in the current page, the page area corresponding to the second bounding box in the current page is determined as the re-rendering region via the page main thread, where the second bounding box is the bounding box of the intersecting erasure path and the handwriting element; if the erasure path does not intersect with the handwriting element in the current page, the page area corresponding to the first bounding box in the current page is determined as the re-rendering region via the page main thread, where the first bounding box is the bounding box of the erasure path.

[0021] By identifying the page area related to erasing handwriting as the re-rendering area, local rendering can be achieved.

[0022] In conjunction with the first aspect, in one possible implementation, before determining the page area corresponding to the first bounding box as the re-rendering area in the current page through the page main thread, the method further includes: determining, through the page main thread, the maximum and minimum coordinate values ​​of the erase path corresponding to the erase operation in the current page in two coordinate directions; and determining the first bounding box based on the maximum and minimum coordinate values.

[0023] The bounding box is determined by the maximum and minimum coordinates of the erase path corresponding to the erase operation on the page. This method is simple to implement and can improve computational efficiency.

[0024] Secondly, a pen-erasing device is provided, comprising:

[0025] The erase operation receiving module is used to receive erase operations applied to the current page, where the first handwriting element is displayed.

[0026] The thread running module is used to perform path calculation on the erasure path corresponding to the erasure operation and the first handwriting path corresponding to the first handwriting element through a dedicated worker thread to obtain the second handwriting path. The dedicated worker thread is a background thread that runs independently of the main thread of the page.

[0027] The thread execution module is further configured to render and display the second handwriting element corresponding to the second handwriting path in the current page through the main page thread; wherein, during the rendering and display of the second handwriting element by the main page thread, the dedicated worker thread performs path calculations on the erasure path corresponding to the next erasure operation of the erasure operation and the second handwriting path.

[0028] Thirdly, a computer device is provided, including a memory and a processor, the memory being connected to the processor, the processor being configured to execute one or more computer programs stored in the memory, wherein when the processor executes the one or more computer programs, the computer device implements the handwriting erasure method of the first aspect described above.

[0029] Fourthly, a computer-readable storage medium is provided, which stores a computer program, the computer program including program instructions, which, when executed by a processor, cause the processor to perform the handwriting erasure method of the first aspect.

[0030] This application can achieve the following technical effects: Since the dedicated worker thread is a background thread that runs independently of the page, the dedicated worker thread and the main page thread can run independently. While the main page thread renders and displays the handwriting elements, the dedicated worker thread will perform new path calculations. In this way, the new path calculations can be executed in parallel with the element rendering. The main page thread can render the handwriting elements based on the handwriting calculation results already calculated by the dedicated worker thread while the dedicated worker thread is performing calculation tasks. This enables real-time rendering of handwriting erasure and reduces the occurrence of rendering stuttering. Attached Figure Description

[0031] To more clearly illustrate the technical solutions of the embodiments of this application, the drawings used in the description of the embodiments of this application will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0032] Figure 1 This is a schematic diagram of a multi-layered canvas.

[0033] Figure 2 A schematic flowchart illustrating a handwriting erasure method provided in an embodiment of this application;

[0034] Figure 3 A schematic diagram illustrating the relationship between the dedicated worker thread and the main page thread provided in this application embodiment;

[0035] Figure 4 A schematic diagram of the space of the page and R-tree data structure provided in the embodiments of this application;

[0036] Figure 5 A schematic flowchart illustrating the intersection operation provided in an embodiment of this application;

[0037] Figure 6 A schematic diagram of the rendering queue provided in an embodiment of this application;

[0038] Figure 7 This is a schematic diagram of the structure of a handwriting erasure device provided in an embodiment of this application;

[0039] Figure 8 This is a schematic diagram of the structure of a computer device provided in an embodiment of this application. Detailed Implementation

[0040] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application. All other embodiments obtained by those skilled in the art based on the embodiments in this application without inventive effort are within the scope of protection of this application.

[0041] It should be noted that, unless there is a conflict, the various features in the embodiments of this application can be combined with each other, all of which are within the protection scope of this application. Furthermore, although functional modules are divided in the device schematic diagram and a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in a different order than the module division in the device or the order in the flowchart. Moreover, the terms "first," "second," and "third" used in this application do not limit the data or execution order, but only distinguish identical or similar items with essentially the same function and effect.

[0042] The technical solution of this application is applicable to handwriting processing scenarios. Handwriting is typically drawn and displayed on a page, which mainly relies on a JavaScript thread and a GUI rendering thread. The JavaScript thread handles user interactions on the page, adjusting the data on the page based on user interactions to present a dynamically changing page to the user. The GUI rendering thread renders the page. The JavaScript thread adopts a single-threaded execution mechanism; when the JavaScript thread runs, the GUI rendering thread is suspended until the JavaScript thread finishes running, at which point the GUI rendering thread will run again. That is, the JavaScript thread and the GUI rendering thread are mutually exclusive.

[0043] Because the JavaScript thread and the GUI rendering thread are mutually exclusive, writing and erasing simultaneously on the same canvas will frequently switch canvas states, causing rendering stutters. Therefore, in handwriting processing scenarios, a feasible technical solution is to set up the page as multiple canvases, such as... Figure 1As shown, from top to bottom, the layers are: operation layer c1, erase layer c2, and drawing layer c3. During the erasure process, the operation layer records the user's erasure actions to form erase path data. Based on this data, an erase path matching the background color is first drawn in the erase layer. Then, the stroke paths contained within the erased path are removed from the existing stroke paths to obtain new stroke paths. These new stroke paths are then redrawn in the drawing layer, and the erase path drawn in the erase layer is cleared. This technique temporarily overlays the canvas with an erase path identical to the background, and the actual strokes are only generated when the erasure operation stops, failing to achieve true real-time rendering of the strokes. The new handwriting path is calculated by the JavaScript thread. When there are many handwritings on the page and the erasure path is complex, at the moment the erasure operation stops, the handwriting paths contained in the erasure path are removed from the existing handwriting paths to obtain the new handwriting path. This requires a lot of JavaScript calculation tasks. The GUI rendering thread needs to wait for all JavaScript calculation tasks to be completed before it can start rendering. The JavaScript calculation tasks will block the rendering tasks. Therefore, rendering stuttering may still occur when the erasure operation stops.

[0044] In view of this, this application proposes a handwriting processing scheme. When performing handwriting erasure, the task of calculating the new handwriting path is assigned to a dedicated worker thread that runs independently of the main page thread. The handwriting calculation task performed by the dedicated worker thread and the rendering task performed by the main page thread do not interfere with each other. The main page thread can render the handwriting element based on the handwriting calculation result already calculated by the dedicated worker thread while the dedicated worker thread is performing the calculation task. Therefore, real-time rendering of handwriting erasure can be achieved, reducing the occurrence of rendering stuttering.

[0045] The technical solution of this application is described in detail below. The technical solution of this application can be applied to any computer device with graphics rendering and drawing capabilities.

[0046] See Figure 2 , Figure 2 This is a flowchart illustrating a handwriting erasure method provided in an embodiment of this application, as shown below. Figure 2 As shown, the method includes the following steps:

[0047] S101, receive the erase operation applied to the current page.

[0048] Here, the first handwriting element is displayed on the current page. The first handwriting element is the visual representation of the handwriting on the current page. The handwriting on the current page can be presented as visual elements such as text, symbols, and graphics.

[0049] The erasure operation applied to the current page refers to the user's actions on the current page obtained in the handwriting erasure mode. The handwriting erasure mode refers to the mode for erasing handwriting elements on the page, which can be triggered by the user through function buttons on the current page or by the user through preset user actions. The erasure operation applied to the current page can be the operation of moving the mouse cursor on the current page, or the operation of touching and sliding an object (such as a finger, stylus, etc.) on the current page. This application does not limit the specific form of the erasure operation applied to the current page.

[0050] S102, through a dedicated working thread, perform path calculation on the erase path corresponding to the erase operation and the first handwriting path corresponding to the first handwriting element displayed on the current page to obtain the second handwriting path.

[0051] Here, a dedicated worker thread is a background thread that runs independently of the main page thread. The main page thread is the thread responsible for handling user interaction events, updating the user interface (UI), and executing page code. The main page thread can also be called the UI thread, which includes the JavaScript thread and the GUI rendering thread.

[0052] The relationship between dedicated worker threads and the main page thread can be described as follows: Figure 3 As shown, the main page thread includes a JavaScript thread and a GUI rendering thread. Dedicated worker threads assist the JavaScript thread in the main page thread to complete computational tasks. The JavaScript thread in the main page thread determines the erase path data corresponding to the erase operation, sends the erase path data and the original handwriting path data on the page to the dedicated worker thread, which calculates new handwriting path data based on the erase path data and the original handwriting path data, and sends the new handwriting path data to the JavaScript thread in the main page thread. The JavaScript thread in the main page thread also performs differential updates based on the new handwriting path data and the original handwriting path data, and generates a rendering queue. The GUI rendering thread in the main page thread completes handwriting rendering based on the rendering queue. Because the dedicated worker thread is a background thread that runs independently of the main page thread, handwriting calculation and rendering can be performed in parallel. The handwriting calculation task will not block the rendering task. There is no need to wait for the erasure operation to stop before the handwriting calculation task can start. The handwriting calculation task can be performed while the rendering task is performed. The amount of computation for real-time handwriting calculation is also smaller than that for handwriting calculation after the erasure operation stops, so real-time rendering is possible.

[0053] In one specific implementation, the dedicated worker thread can be a Web-worker.

[0054] Before performing path calculations on the erase path corresponding to the erase operation and the first handwriting path corresponding to the first handwriting element displayed on the current page through a dedicated worker thread to obtain the second handwriting path, the original handwriting path data representing the first handwriting path corresponding to the first handwriting element and the erase path data representing the erase operation corresponding to the erase operation can be transferred to the dedicated worker thread.

[0055] The second handwriting path is obtained by performing path calculations on the erase path corresponding to the erase operation and the first handwriting path corresponding to the first handwriting element displayed on the current page. This means performing path overlap calculations on the first handwriting path corresponding to the first handwriting element and the erase path corresponding to the erase operation to determine the handwriting path covered by the erased path, and then removing the handwriting path covered by the erased path from the first handwriting path to obtain the second handwriting path.

[0056] In some possible cases, the stroke paths corresponding to stroke elements on a page can be stored using an R-tree data structure. An R-tree is a data structure specifically designed for handling spatial relationships between objects in high-dimensional space. It uses a tree structure to represent the containment relationships between spatial regions. In an R-tree, the parent node represents a larger region, and the child nodes under the parent node represent sub-regions contained within that larger region. In this application, an R-tree data structure is used to represent page layout relationships. The parent node in the R-tree represents a large local page region (hereinafter referred to as the large local page region). The child nodes under the parent node represent sub-local page regions contained within the large local page region. The stroke paths corresponding to stroke elements on the page are stored in the leaf nodes of the R-tree data structure. Leaf nodes in the R-tree data structure refer to nodes that have no child nodes. For example, refer to... Figure 4 The page layout can be as follows Figure 4 As shown in J1, the dark gray area R1 in J1 represents the viewport area of ​​the page, that is, the currently displayed page area visible to the user. The R-tree data structure corresponding to J1 is as follows: Figure 4 As shown in D1, R5 to R9 and R10 to R13 in D1 are leaf nodes.

[0057] When storing the stroke paths corresponding to stroke elements on a page using an R-tree data structure, the first stroke element displayed on the current page is stored in the R-tree data structure. In the process of obtaining the second stroke path by performing path calculations between the erase path corresponding to the erase operation and the first stroke path corresponding to the first stroke element displayed on the current page using a dedicated worker thread, the following steps A1-A3 can be executed:

[0058] A1. Using a dedicated worker thread, perform an intersection operation between the erase path corresponding to the erase operation and the nodes in the R-tree data structure to obtain the intersection result.

[0059] This can be achieved through a dedicated worker thread. Figure 5 The process shown involves performing an intersection operation between the erase path corresponding to the erase operation and the nodes in the R-tree data structure to obtain the intersection result, including the following steps A11-A16:

[0060] A11. Traverse the nodes in the R-tree data structure.

[0061] A12. Determine whether the target node being traversed is a leaf node.

[0062] If the target node encountered during traversal is a leaf node, it means that the target node stores the stroke path corresponding to the stroke element on the page, and proceed to step A13; if the target node encountered during traversal is not a leaf node, it means that the target node stores a page area containing the stroke path corresponding to the stroke element on the page, and proceed to step A14.

[0063] A13. Perform an intersection operation between the target node and the erasure path to obtain the result of the target handwriting calculation.

[0064] Here, the result of the target handwriting calculation is the intersection result of the handwriting path corresponding to the target node.

[0065] A14. Determine whether the page area corresponding to the target node being traversed intersects with the erase path corresponding to the erase operation.

[0066] If the page area corresponding to the traversed node intersects with the erase path corresponding to the erase operation, it means that there may be handwriting elements covered by the erase operation in the page area corresponding to the target node, and proceed to step A16; if the page area corresponding to the traversed target node does not intersect with the erase path corresponding to the erase operation, it means that there are no handwriting elements covered by the erase operation in the page area corresponding to the target node, and proceed to step A15.

[0067] A15. Skip the child nodes under the target node in the R tree data structure.

[0068] A16. Continue traversing the nodes in the R-tree data structure and execute step A12.

[0069] Using an R-tree data structure to store the stroke paths corresponding to stroke elements on a page can reduce the number of intersection operations when paths overlap, thereby improving computational efficiency.

[0070] A2. Using a dedicated worker thread, update the R-tree data structure based on the intersection operation result to obtain the updated R-tree data structure.

[0071] Specifically, a dedicated worker thread can be used to update the leaf nodes in the R-tree data structure that intersect with the erasure path based on the intersection operation result, resulting in an updated R-tree data structure. Specifically, the dedicated worker thread can determine the target handwriting calculation result from the intersection operation result, and based on this result, delete the leaf nodes completely covered by the erasure path in the R-tree data structure. Alternatively, the leaf nodes intersecting with the erasure path in the R-tree data structure can be split into at least two leaf nodes, ensuring that none of the at least two split leaf nodes contain the handwriting path covered by the erasure path, thus obtaining the updated R-tree data structure.

[0072] For example, refer to Figure 4 Update the previous R-tree data structure as follows: Figure 4 As shown in D1, the erase path is as follows Figure 4 As shown in L1, the erase path L1 intersects with node R13. The erase path corresponding to the erase operation intersects with... Figure 4 When performing intersection operations on the R-tree data structure, the handwriting calculation result of node R13 is obtained. Since the erased handwriting L1 does not completely cover the handwriting path in node R13, node R13 is split into two leaf nodes R13 and R14, resulting in a new R-tree data structure, as shown below. Figure 4 As shown in D2 in the diagram.

[0073] A3. Using a dedicated worker thread, determine the path of the second handwriting based on the updated R-tree data structure.

[0074] Specifically, a dedicated worker thread can be used to determine the node representing the window region (hereinafter referred to as the window node) in the updated R-tree data structure, and the handwriting path stored in the leaf node under the window node can be determined as the second handwriting path.

[0075] For example, the updated R-tree data structure is as follows: Figure 4 As shown in D2, the node representing the window area in D2 is node R1. Then, the handwriting paths stored in the leaf nodes R10 to R14 under node R1 can be determined as the second handwriting path.

[0076] Using an R-tree data structure to store the stroke paths corresponding to stroke elements on a page can reduce the number of intersection operations when paths overlap, thereby improving computational efficiency.

[0077] After obtaining the second handwriting path by performing path calculations on the erase path corresponding to the erase operation and the first handwriting path corresponding to the first handwriting element displayed on the current page through a dedicated worker thread, the new handwriting path data representing the second handwriting path can be transmitted to the main thread of the page.

[0078] S103 renders and displays the second handwriting element corresponding to the second handwriting path on the current page through the main page thread.

[0079] In the process of rendering and displaying the second handwriting element corresponding to the second handwriting path on the current page through the main thread of the page, the following steps B1-B3 can be executed:

[0080] B1. Generate the first rendering queue based on the second handwriting path through the main thread of the page.

[0081] Here, the first rendering queue is used to store the rendering operations required to render the second handwriting element corresponding to the second handwriting path in sequence. The rendering operations include element removal operations and element addition operations. Element removal operations refer to the operation of removing elements from the page, and element addition operations refer to the operation of adding elements to the page.

[0082] The first rendering queue can be generated by comparing the second handwriting path with the first handwriting path through the main thread of the page.

[0083] For example, the second handwriting path is stored in Figure 4 In D2, R1, the first handwriting path is stored in Figure 4 In D1 within R1, the generated first rendering queue can be as follows: Figure 6 As shown in Q1, the rendering queue in Q1 indicates that an element removal operation needs to be performed to remove the handwriting element s1, and multiple element addition operations need to be performed to add handwriting elements s2, s3 and other handwriting elements in R1 in sequence.

[0084] In some possible scenarios, during the process of generating the first rendering queue based on the second handwriting path via the main page thread, the main page thread can first determine the re-rendering area in the current page according to the erase path corresponding to the erase operation. The re-rendering area is a local page area containing the erase path. Then, the main page thread generates the first rendering queue corresponding to the re-rendering area based on the second handwriting path.

[0085] In one feasible implementation, the re-rendering area in the current page can be determined through the following steps a1-a2:

[0086] a1. Using the main thread of the page, determine the first outer bounding box and the intersecting stroke elements that intersect with the first outer bounding box in the current page.

[0087] Here, the first outer bounding box is the outer bounding box of the erase path corresponding to the erase operation. The first outer bounding box can be an outer rectangle that can completely enclose the erase path.

[0088] In one feasible implementation, the main thread of the page can determine the maximum and minimum coordinate values ​​of the erase path corresponding to the erase operation in the current page along two coordinate directions (i.e., the X-axis and Y-axis). Based on these maximum and minimum coordinate values, the first bounding box is determined. Specifically, the maximum and minimum coordinate values ​​of the erase path can be combined to obtain the coordinate values ​​of the four vertices of the bounding rectangle that completely encloses the erase path.

[0089] For example, the maximum and minimum coordinate values ​​of the erase path in both directions are cx. max cx min cy max cy min Then the coordinates of the four vertices of the bounding rectangle of the erase path are (cx min cy min (cx) max cy min (cx) min cy max ) and (cx max cy max ).

[0090] Intersecting handwriting elements refer to handwriting elements on the current page that overlap with the area covered by the first outer bounding box. For example, see [reference needed]. Figure 4 , Figure 4 L1 in the diagram represents the erase path, and the first outer bounding box is as follows: Figure 4 As shown in H1, the intersecting handwriting elements are Figure 4 S in the middle.

[0091] a2. Using the main thread of the page, determine the page area corresponding to the first outer bounding box and the intersecting stroke elements that intersect with the first outer bounding box as the re-rendering area in the current page.

[0092] For example, refer to Figure 4 The first external enclosure box is like Figure 4 As shown in H1, the intersecting handwriting elements are Figure 4 As shown by S in the diagram, the re-rendered area is... Figure 4 H1 and S are shown in the figure.

[0093] In steps a1-a2 above, the page area corresponding to the outer bounding box of the erase path and the page area corresponding to the handwriting element intersecting with the outer bounding box are determined as the re-rendering area, which can minimize the re-rendering area and improve rendering efficiency.

[0094] Alternatively, the re-rendering area can be determined on the current page using the following steps b1-b3:

[0095] b1. Using the main thread of the page, determine whether the erasure path intersects with the handwriting elements in the current page.

[0096] If the erase path intersects with the handwriting element on the current page, proceed to step b2; if the erase path does not intersect with the handwriting element on the current page, proceed to step b3.

[0097] b2. Using the main thread of the page, determine the page area corresponding to the second outer bounding box as the re-rendering area in the current page.

[0098] Here, the second outer bounding box is the outer bounding box of the intersecting erase paths and handwriting elements. The second outer bounding box can be an outer rectangle that can completely enclose the intersecting erase paths and handwriting elements.

[0099] In one feasible implementation, the main thread of the page can determine the intersecting erase paths and handwriting elements in the current page, treat the intersecting erase paths and handwriting elements as a whole page element, determine the maximum and minimum coordinate values ​​of the whole page element in two coordinate directions in the current page, and combine the maximum and minimum coordinate values ​​of the whole page element in two coordinate directions in the current page to obtain the bounding rectangle that can completely surround the intersecting erase paths and handwriting elements.

[0100] For example, the maximum and minimum coordinate values ​​of the erase path in both directions are jx, respectively. max jx min jy max jy min Then the coordinates of the four vertices of the bounding rectangle of the erase path are (jx) min jy min (jx) max jy min (jx) min jy max ) and (jx max jy max ).

[0101] For example, refer to Figure 4 , Figure 4 L1 in the text is the erase path. Figure 4 The intersecting erase paths and handwriting elements are Figure 4 In L1 and S, the second outer bounding box is as follows: Figure 4 As shown in H2, the re-rendered area is Figure 4 As shown in H2.

[0102] b3. Using the main thread of the page, determine the page area corresponding to the first outer bounding box as the re-rendering area in the current page.

[0103] For the meaning of the first outer bounding box and the method of determining the first outer bounding box, please refer to the description of step a1 above, which will not be repeated here.

[0104] In steps b1-b3 above, the page area related to erasing the handwriting is identified as the re-rendering area, which enables local rendering.

[0105] After determining the re-rendering area on the current page, the second handwriting path located in the re-rendering area can be compared with the first handwriting path located in the re-rendering area to generate the first rendering queue corresponding to the re-rendering area.

[0106] For example, the re-rendered area is Figure 4 As shown in H1, the first rendering queue corresponding to the generated re-rendered region can be as follows: Figure 6 As shown in Q2.

[0107] When generating the rendering queue, a rendering queue is generated for a local page area. This allows for local rendering, rendering only the page area that has changed, thus improving rendering efficiency.

[0108] B2. Using the main thread of the page, the element removal operation and the element addition operation associated with the element removal operation are merged into a single rendering operation in the first rendering queue to obtain the second rendering queue.

[0109] Here, the element addition operation associated with the element removal operation refers to the element addition operation that occurs as a result of the element removal operation. See also... Figure 4 and Figure 6 When the erase operation is applied to the handwriting element S, it will produce a specific result. Figure 6 The element removal operation for element s1 within the dashed box in the image is as follows: Element s1 belongs to the handwriting element S. After element s1 is erased, elements s2 and s3 remain. Elements s2 and s3 need to be rendered on the page. Therefore, element addition operations for element s2 and element s3 will be generated. The element removal operation Remove(s1), the element addition operation Add(s2), and the element addition operation Add(s2) for element s3 can be combined into a single rendering operation, resulting in a second rendering queue. The second rendering queue can be configured as follows: Figure 6 As shown in Q3.

[0110] B3. Execute the rendering operation according to the second rendering queue through the main thread of the page to obtain the second handwriting element and display it.

[0111] Specifically, the rendering operations in the second rendering queue can be executed sequentially through the main thread of the page, thereby rendering the second handwriting element on the current page and displaying the second handwriting element on the current page.

[0112] For example, displaying a second handwriting element can be as follows: Figure 6 As shown in R1.

[0113] By merging the related element removal and element addition operations in the rendering queue into a single rendering operation, asynchronous batch rendering can be achieved, reducing the number of rendering operations and improving rendering efficiency.

[0114] In this process, during the rendering and display of the second handwriting element on the main page thread, a dedicated worker thread performs path calculations on the erase path corresponding to the next erase operation and the second handwriting path to obtain a new handwriting path. The implementation principle of the dedicated worker thread obtaining the new handwriting path is the same as the implementation principle of obtaining the second handwriting path in step S102 above, and can be referred to the description of step S102 above.

[0115] In the above Figure 2 In the corresponding technical solution, after receiving an erase operation applied to the current page, a dedicated worker thread performs path calculations on the erase path corresponding to the erase operation and the first handwriting path corresponding to the first handwriting element displayed on the current page to obtain the second handwriting path. Then, the main page thread renders and displays the second handwriting element corresponding to the second handwriting path on the current page. Since the dedicated worker thread is a background thread that runs independently of the page, the dedicated worker thread and the main page thread can run independently. While the main page thread is rendering and displaying the handwriting element, the dedicated worker thread will perform new path calculations. In this way, the new path calculations can be executed in parallel with the element rendering. The main page thread can render new handwriting elements based on the handwriting calculation results already calculated by the dedicated worker thread while the dedicated worker thread is performing its calculation tasks. This enables real-time rendering of handwriting erasers and reduces the occurrence of rendering stuttering.

[0116] To facilitate a better understanding of the technical solution of this application, the following specific examples illustrate the detailed processing procedures of traditional handwriting erasure schemes and the handwriting erasure scheme of this application.

[0117] Suppose that an erasure process (referring to the process from the detection of an erasure operation to the detection of an erasure operation stopping) consists of 3 erasure operations, namely erasure operation 1, erasure operation 2 and erasure operation 3, with different erasure operations corresponding to different time points in an erasure process.

[0118] The specific process of erasing handwriting using traditional techniques, while simultaneously rendering the text, is as follows:

[0119] (1) The JavaScript thread executes the path calculation task 1 corresponding to the erase operation 1 and obtains the path calculation result 1. The GUI rendering thread waits for the JavaScript thread to execute the path calculation task 1.

[0120] (2) After path calculation task 1 is completed, the JavaScript thread generates rendering queue 1 based on path calculation result 1, the GUI rendering thread executes rendering task 1 corresponding to rendering queue 1, and the JavaScript thread waits for the GUI rendering thread to execute rendering task 1.

[0121] (3) After rendering task 1 is completed, the JavaScript thread executes the path calculation task 2 corresponding to the erase operation 2 according to the path calculation result 1, and obtains the path calculation result 2. The GUI rendering thread waits for the JavaScript thread to execute the path calculation task 2.

[0122] (4) After path calculation task 2 is completed, the JavaScript thread generates rendering queue 2 based on path calculation result 2, the GUI rendering thread executes rendering task 2 corresponding to rendering queue 2, and the JavaScript thread waits for the GUI rendering thread to execute rendering task 2.

[0123] (5) After rendering task 2 is completed, the JavaScript thread executes the path calculation task 3 corresponding to the erase operation 3 according to the path calculation result 2, and obtains the path calculation result 3. The GUI rendering thread waits for the JavaScript thread to execute the path calculation task 3.

[0124] (6) After the path calculation task 3 is completed, the JavaScript thread generates rendering queue 3 based on the path calculation result 3, and the GUI rendering thread executes the rendering task 3 corresponding to rendering queue 3.

[0125] As can be seen, because the JavaScript thread and the GUI rendering thread need to wait for each other to complete their tasks, rendering cannot be performed in real time, which will cause rendering lag.

[0126] The specific process of erasing handwriting using traditional techniques, and then rendering after the erasing operation has stopped, is as follows:

[0127] (1) The JavaScript thread executes the path calculation task 1 corresponding to the erase operation 1 and obtains the path calculation result 1. The GUI rendering thread waits for the JavaScript thread to execute the path calculation task 1.

[0128] (2) After path calculation task 1 is completed, the JavaScript thread executes path calculation task 2 corresponding to erase operation 2 based on path calculation result 2, and the GUI rendering thread waits for the JavaScript thread to execute path calculation task 2.

[0129] (3) After the path calculation task 2 is completed, the JavaScript thread executes the path calculation task 3 corresponding to the erase operation 3 according to the path calculation result 2, and the GUI rendering thread waits for the JavaScript thread to execute the path calculation task 3.

[0130] (4) After path calculation task 3 is completed, the JavaScript thread generates a rendering queue based on path calculation result 3, and the GUI rendering thread executes the rendering task corresponding to the rendering queue.

[0131] As can be seen, rendering still causes stuttering because the JavaScript thread needs to complete all computational tasks before rendering can proceed.

[0132] The specific process of erasing handwriting using the technical solution of this application, and rendering while erasing, is as follows:

[0133] (1) A dedicated worker thread executes the path calculation task 1 corresponding to the erase operation 1 and obtains the path calculation result 1.

[0134] (2) After the path calculation task 1 is completed, the dedicated worker thread sends the path calculation result 1 to the JavaScript thread. The JavaScript thread generates rendering queue 1 based on the path calculation result 1. The GUI rendering thread executes rendering task 1 corresponding to rendering queue 1. During the execution of rendering task 1 by the GUI rendering thread, the dedicated worker thread executes path calculation task 2 corresponding to erase operation 2 based on the path calculation result 1, and obtains path calculation result 2.

[0135] (3) After the path calculation task 2 is completed, the dedicated worker thread sends the path calculation result 2 to the JavaScript thread. The JavaScript thread generates rendering queue 2 based on the path calculation result 2. After the rendering task 1 is completed, the GUI rendering thread executes the rendering task 2 corresponding to rendering queue 2. During the execution of rendering task 2 by the GUI rendering thread, the dedicated worker thread executes the path calculation task 3 corresponding to the erase operation 3 based on the path calculation result 2, and obtains the path calculation result 3.

[0136] (4) After the path calculation task 3 is completed, the dedicated worker thread sends the path calculation result 3 to the JavaScript thread. The JavaScript thread generates the rendering queue 3 based on the path calculation result 3. After the rendering task 3 is completed, the GUI rendering thread executes the rendering task 3 corresponding to the rendering queue 3.

[0137] As can be seen, the dedicated worker thread performs new path calculations while the main page thread is rendering, which can shorten the rendering waiting time and thus enable real-time rendering of handwriting erasure, reducing the occurrence of rendering stuttering.

[0138] The method of this application has been described above; the apparatus of this application will be described below.

[0139] See Figure 7 , Figure 7 This is a schematic diagram of the structure of a handwriting erasure device provided in an embodiment of this application, as shown below. Figure 7 As shown, the handwriting erasure device 20 includes:

[0140] The erase operation receiving module 201 is used to receive an erase operation applied to the current page, wherein the current page displays a first handwriting element;

[0141] The thread running module 202 is used to perform path calculation on the erasure path corresponding to the erasure operation and the first handwriting path corresponding to the first handwriting element through a dedicated working thread to obtain the second handwriting path. The dedicated working thread is a background thread that runs independently of the main thread of the page.

[0142] The thread execution module 202 is further configured to render and display the second handwriting element corresponding to the second handwriting path in the current page through the main page thread; wherein, during the rendering and display of the second handwriting element by the main page thread, the dedicated worker thread performs path calculations on the erasure path corresponding to the next erasure operation of the erasure operation and the second handwriting path.

[0143] In one possible design, the first handwriting path is stored in an R-tree data structure, which stores the handwriting paths corresponding to handwriting elements on the page. The handwriting paths corresponding to handwriting elements on the page are stored in the leaf nodes of the R-tree data structure. The thread execution module 203 is specifically configured to: perform an intersection operation between the erase path corresponding to the erase operation and the nodes in the R-tree data structure using the dedicated working thread, obtaining the intersection result; update the R-tree data structure based on the intersection result using the dedicated working thread, obtaining the updated R-tree data structure; and determine the second handwriting path based on the updated R-tree data structure using the dedicated working thread.

[0144] In one possible design, the thread running module 203 is specifically used to: update the leaf nodes in the R-tree data structure that intersect with the erasure path according to the intersection operation result through the dedicated working thread, so as to obtain the updated R-tree data structure.

[0145] In one possible design, the aforementioned thread execution module 203 is specifically used to: generate a first rendering queue based on the second handwriting path through the main page thread; the first rendering queue is used to store rendering operations required to render the second handwriting element in sequence, the rendering operations including element removal operations and element addition operations; through the main page thread, merge the element removal operation and the element addition operation associated with the element removal operation into a single rendering operation in the first rendering queue to obtain a second rendering queue; through the main page thread, execute the rendering operation according to the second rendering queue to obtain the second handwriting element and display the second handwriting element.

[0146] In one possible design, the aforementioned thread execution module 203 is specifically used to: determine a re-rendering region in the current page based on the erasure path using the page main thread, wherein the re-rendering region is a local page region containing the erasure path; and generate a first rendering queue corresponding to the re-rendering region based on the second handwriting path using the page main thread.

[0147] In one possible design, the aforementioned thread execution module 203 is specifically used to: determine, through the main page thread, a first outer bounding box and intersecting handwriting elements intersecting with the first outer bounding box in the current page, wherein the first outer bounding box is the outer bounding box of the erase path; and through the main page thread, determine the page area corresponding to the first outer bounding box and the intersecting handwriting elements in the current page as the re-rendering area.

[0148] In one possible design, the aforementioned thread execution module 203 is specifically used for: if the erasure path intersects with the handwriting element in the current page, the main page thread determines the page area corresponding to the second bounding box as the re-rendering area in the current page, where the second bounding box is the bounding box of the intersecting erasure path and the handwriting element; if the erasure path does not intersect with the handwriting element in the current page, the main page thread determines the page area corresponding to the first bounding box as the re-rendering area in the current page, where the first bounding box is the bounding box of the erasure path.

[0149] It should be noted that, Figure 7 For any content not mentioned in the corresponding embodiments, please refer to the description of the foregoing method embodiments, which will not be repeated here.

[0150] The aforementioned device, upon receiving an erase operation applied to the current page, uses a dedicated worker thread to perform path calculations between the erase path corresponding to the erase operation and the first handwriting path corresponding to the first handwriting element displayed on the current page, obtaining a second handwriting path. Then, the main page thread renders and displays the second handwriting element corresponding to the second handwriting path on the current page. Since the dedicated worker thread is a background thread independent of the page's operation, it and the main page thread can run independently. The main page thread can render new handwriting elements based on the handwriting calculation results obtained by the dedicated worker thread while the dedicated worker thread is performing its calculation tasks, thus achieving real-time rendering of the handwriting eraser and reducing rendering stuttering.

[0151] See Figure 8 , Figure 8 This is a schematic diagram of the structure of a computer device 30 provided in an embodiment of this application. The computer device 30 includes a processor 301 and a memory 302. The memory 302 is connected to the processor 301, for example, via a bus.

[0152] Processor 301 is configured to support the computer device 30 in performing the corresponding functions in the methods described in the above method embodiments. Processor 301 may be a central processing unit (CPU), a network processor (NP), a hardware chip, or any combination thereof. The aforementioned hardware chip may be an application-specific integrated circuit (ASIC), a programmable logic device (PLD), or a combination thereof. The aforementioned PLD may be a complex programmable logic device (CPLD), a field-programmable gate array (FPGA), a generic array logic (GAL), or any combination thereof.

[0153] Memory 302 is used to store program code, etc. Memory 302 may include volatile memory (VM), such as random access memory (RAM); memory 302 may also include non-volatile memory (NVM), such as read-only memory (ROM), flash memory, hard disk drive (HDD), or solid-state drive (SSD); memory 302 may also include combinations of the above types of memory.

[0154] The memory 302 is used to store non-volatile software programs, non-volatile computer-executable programs, and modules, such as the program instructions / modules corresponding to the handwriting erasure method in the embodiments of this application. The processor executes various functional applications and data processing of the handwriting erasure method by running the non-volatile software programs, instructions, and modules stored in the memory, thereby realizing the function of the handwriting erasure method provided in the above method embodiments.

[0155] The memory 302 may include a program storage area and a data storage area, wherein the program storage area may store the operating system and applications required for at least one function. The data storage area may store data created based on the use of the handwriting erasure device. In some embodiments, the memory may include memory remotely located relative to the processor, which can be connected to the handwriting erasure device via a network. Examples of such networks include, but are not limited to, the Internet, intranets, local area networks, mobile communication networks, and combinations thereof.

[0156] The one or more modules are stored in the memory. When executed by the one or more processors, they perform the handwriting erasure method in any of the above method embodiments. For example, they perform the method steps described in the above method embodiments to realize the functions of the modules described in the above device embodiments.

[0157] This application also provides a computer-readable storage medium storing a computer program, the computer program including program instructions, which, when executed by a computer, cause the computer to perform the method described in the foregoing embodiments.

[0158] Those skilled in the art will understand that all or part of the processes in the above embodiments can be implemented by a computer program instructing related hardware. The program can be stored in a computer-readable storage medium, and when executed, it can include the processes of the embodiments of the above methods. The storage medium can be a magnetic disk, optical disk, read-only memory (ROM), or random access memory (RAM), etc.

[0159] The above-disclosed embodiments are merely preferred embodiments of this application and should not be construed as limiting the scope of this application. Therefore, any equivalent variations made in accordance with the claims of this application shall still fall within the scope of this application.

Claims

1. A method for erasing handwriting, characterized in that, include: Receive an erase operation applied to the current page, where a first handwriting element is displayed; A dedicated worker thread performs path calculations on the erasure path corresponding to the erasure operation and the first handwriting path corresponding to the first handwriting element to obtain the second handwriting path. The dedicated worker thread is a background thread that runs independently of the main page thread. The main thread of the page renders and displays the second handwriting element corresponding to the second handwriting path on the current page; wherein, during the rendering and display of the second handwriting element by the main thread of the page, the dedicated worker thread performs path calculations on the erase path corresponding to the next erase operation of the erase operation and the second handwriting path.

2. The method according to claim 1, characterized in that, The first handwriting path is stored in an R-tree data structure, which is used to store the handwriting paths corresponding to handwriting elements on the page. The handwriting paths corresponding to handwriting elements on the page are stored in the leaf nodes of the R-tree data structure. The step of using a dedicated working thread to perform path calculations on the erasure path corresponding to the erasure operation and the first handwriting path corresponding to the first handwriting element to obtain the second handwriting path includes: The dedicated working thread performs an intersection operation between the erase path corresponding to the erase operation and the nodes in the R-tree data structure to obtain the intersection operation result. The R-tree data structure is updated using the dedicated working thread based on the intersection operation result, resulting in the updated R-tree data structure. The second handwriting path is determined using the dedicated working thread based on the updated R-tree data structure.

3. The method according to claim 2, characterized in that, The step of updating the R-tree data structure based on the intersection operation result through the dedicated worker thread to obtain the updated R-tree data structure includes: The dedicated working thread updates the leaf nodes in the R-tree data structure that intersect with the erasure path based on the intersection operation result, thus obtaining the updated R-tree data structure.

4. The method according to claim 1, characterized in that, The step of rendering and displaying the second handwriting element corresponding to the second handwriting path on the current page through the main thread of the page includes: The main thread of the page generates a first rendering queue based on the second handwriting path. The first rendering queue is used to store the rendering operations required to render the second handwriting element in sequence. The rendering operations include element removal operations and element addition operations. Through the main thread of the page, the element removal operation and the element addition operation associated with the element removal operation are merged into a single rendering operation in the first rendering queue to obtain the second rendering queue. The main thread of the page executes a rendering operation according to the second rendering queue to obtain the second handwriting element and display the second handwriting element.

5. The method according to claim 4, characterized in that, The step of generating a first rendering queue based on the second handwriting path through the main thread of the page includes: The main thread of the page determines the re-rendering area in the current page according to the erasure path; the re-rendering area is a local page area containing the erasure path. The main thread of the page generates a first rendering queue corresponding to the re-rendered area based on the second handwriting path.

6. The method according to claim 5, characterized in that, The step of determining the re-rendering area in the current page based on the erasure path via the page's main thread includes: Through the main thread of the page, in the current page, determine the first outer bounding box and the intersecting handwriting elements that intersect with the first outer bounding box, wherein the first outer bounding box is the outer bounding box of the erase path; Through the main thread of the page, the page area corresponding to the first outer bounding box and the intersecting handwriting element in the current page is determined as the re-rendering area.

7. The method according to claim 5, characterized in that, The step of determining the re-rendering area in the current page based on the erasure path via the page's main thread includes: If the erasure path intersects with the handwriting element in the current page, the page area corresponding to the second outer bounding box in the current page is determined as the re-rendering area through the main thread of the page. The second outer bounding box is the outer bounding box of the intersecting erasure path and the handwriting element. If the erasure path does not intersect with the handwriting elements in the current page, the page area corresponding to the first outer bounding box in the current page is determined as the re-rendering area through the main thread of the page. The first outer bounding box is the outer bounding box of the erasure path.

8. The method according to claim 6 or 7, characterized in that, Before determining the page area corresponding to the first outer bounding box as the re-rendering area in the current page through the main thread of the page, the method further includes: Through the main thread of the page, the maximum and minimum coordinate values ​​of the erasure path corresponding to the erasure operation in the current page are determined in two coordinate directions of the current page; The first circumbound box is determined based on the maximum and minimum coordinate values.

9. A computer device, characterized in that, The device includes a memory and a processor, the memory being connected to the processor, the processor being configured to execute one or more computer programs stored in the memory, the processor causing the computer device to perform the method as described in any one of claims 1-8 when executing the one or more computer programs.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program, the computer program including program instructions that, when executed by a processor, cause the processor to perform the method as described in any one of claims 1-8.

Images