Canvas-based drawing method and device and storage medium

Abstract

The invention discloses a Canvas-based drawing method and device and a storage medium, and relates to the technical field of electronic digital data processing.The Canvas-based drawing method comprises the steps that in response to a revocation instruction of a current execution step, a target snapshot array with a first index smaller than the current execution step is obtained; generating a re-drawing cloth based on the target snapshot array; and according to an action memory array, between the target snapshot array and the current execution step, of a second index, executing a replay operation on the redrawing canvas to generate a target canvas. And the technical problem that the drawing performance may be reduced along with the increase of steps is solved. The technical effects of reducing memory occupation and improving drawing performance to support high-frequency large canvas operation are achieved.

Description

Technical Field

[0001] The present application relates to the technical field of electronic digital data processing, and in particular to a Canvas-based drawing method, device, and storage medium. Background Art

[0002] In scenarios where large canvases or multiple people are working together on a canvas, undo actions often occur. Related technologies typically record metadata for each drawing operation, and implement undo / redo through redrawing history. Each time a user performs an operation, such as drawing a line or adding a graphic, the type and parameters of the operation, such as coordinates, color, and thickness, are recorded. When an undo / redo operation occurs, the pointer is rewound or advanced to redraw all steps to the specified location. Because metadata for each operation needs to be recorded, redrawing performance may decrease as the number of steps increases. Summary of the Invention

[0003] The main purpose of this application is to provide a Canvas-based drawing method, device and storage medium, aiming to solve the technical problem that redrawing performance may decrease as the number of steps increases.

[0004] To achieve the above objectives, the present application provides a Canvas-based drawing method, which includes:

[0005] In response to a cancel instruction of a current execution step, obtaining a target snapshot array having a first index smaller than the current execution step;

[0006] generating a redraw canvas based on the target snapshot array;

[0007] According to the action memory array whose second index is between the target snapshot array and the current execution step, a replay operation is performed on the redrawing canvas to generate a target canvas.

[0008] In one embodiment, the step of performing a replay operation on the redrawing canvas to generate a target canvas based on the action memory array having a second index between the target snapshot array and the current execution step includes:

[0009] Obtain a second index whose value is greater than the first index and less than the current execution step;

[0010] The action parameters corresponding to the action memory arrays are sequentially executed on the redrawing canvas in the order of the size of the second indexes to generate the target canvas.

[0011] In one embodiment, the step of sequentially executing the action parameters corresponding to the action memory arrays on the redrawing canvas in order of the magnitude of the second indexes includes:

[0012] For each of the action memory arrays, the following steps are performed in sequence, including:

[0013] Set the transformation matrix of the Canvas context according to the canvas adjustment data in the action memory array;

[0014] Setting the drawing style of the Canvas context according to the brush adjustment data in the action memory array;

[0015] According to the drawing operation data in the action memory array, the Canvas API is called to execute the corresponding drawing command.

[0016] In one embodiment, before the step of obtaining a target snapshot array with a first index smaller than the current execution step in response to the undo instruction of the current execution step, the step includes:

[0017] In response to operation data for the canvas, an action memory array is generated based on action parameters corresponding to the operation data, where the action parameters include at least one of canvas adjustment data, brush adjustment data, and drawing operation data.

[0018] In one embodiment, the step of generating an action memory array based on action parameters corresponding to the operation data in response to the operation data on the canvas includes:

[0019] If the action parameter is drawing operation data, obtaining canvas adjustment data or brush adjustment data in an execution step corresponding to the drawing operation data;

[0020] determining a first parameter, a second parameter, and a third parameter corresponding to the drawing operation data, the canvas adjustment data, and the brush adjustment data, wherein if the canvas adjustment data and / or the brush adjustment data do not exist, the second parameter and / or the third parameter are default values;

[0021] The action memory array is formed according to the first parameter, the second parameter and the third parameter, and the second index of the action memory data array is recorded as the execution step.

[0022] In one embodiment, after the step of generating an action memory array based on action parameters corresponding to the operation data in response to the operation data on the canvas, the method further includes:

[0023] If the second index of the action memory array meets the interval requirement, obtaining all pixels of the canvas;

[0024] The second index and the full amount of pixels are stored as a snapshot array, wherein the first index value of the snapshot array is the same as the second index.

[0025] In one embodiment, the step of generating a redrawing canvas based on the target snapshot array includes:

[0026] Clear the canvas to get the initial canvas;

[0027] All pixels stored in the target snapshot array are loaded into the initial canvas to obtain the redrawing canvas.

[0028] In one embodiment, the action memory array is a ternary array including a first parameter, a second parameter, and a third parameter, wherein the first parameter corresponds to drawing operation data, the second parameter corresponds to canvas adjustment data, and the third parameter corresponds to brush adjustment data; the snapshot array is a binary array including a first index and a full amount of pixels.

[0029] In addition, to achieve the above-mentioned purpose, the present application also provides a Canvas-based drawing device, which includes: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the Canvas-based drawing method described above.

[0030] In addition, to achieve the above-mentioned purpose, the present application also provides a storage medium, which is a computer-readable storage medium, and a program for implementing a Canvas-based drawing method is stored on the computer-readable storage medium. The program for implementing a Canvas-based drawing method is executed by a processor to implement the steps of the Canvas-based drawing method as described above.

[0031] This application provides a Canvas-based drawing method. This method obtains a target snapshot array whose first index is less than the current execution step in response to an undo instruction; generates a redraw canvas based on the target snapshot array; and performs a replay operation on the redraw canvas to generate a target canvas based on an action memory array whose second index is between the target snapshot array and the current execution step. This method solves the technical problem that drawing performance may decrease as the number of steps increases. It achieves the technical effect of reducing memory usage and improving drawing performance to support high-frequency large-canvas operations. BRIEF DESCRIPTION OF THE DRAWINGS

[0032] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0033] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without any creative work.

[0034] Figure 1 A flowchart of the first embodiment of the Canvas-based drawing method of this application is provided;

[0035] Figure 2 This is a flowchart of steps A11-A13 in Example 3 of the Canvas-based drawing method of this application;

[0036] Figure 3 A flowchart illustrating a fourth embodiment of a Canvas-based drawing method of the present application is provided;

[0037] Figure 4 This is a schematic diagram of the hardware structure involved in the Canvas-based drawing device embodiment of this application.

[0038] The purpose, features and advantages of this application will be further explained with reference to the accompanying drawings in conjunction with the embodiments. DETAILED DESCRIPTION

[0039] It should be understood that the specific embodiments described herein are merely used to explain the technical solutions of the present application and are not intended to limit the present application.

[0040] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.

[0041] Currently, undo actions often occur in scenarios where large canvases or multiple people are working together on a canvas. Related technologies typically record metadata for each drawing operation, and implement undo / redo through redrawing history. Each time a user performs an operation, such as drawing a line or adding a graphic, the type and parameters of the operation, such as coordinates, color, and thickness, are recorded. When an undo / redo operation occurs, the pointer moves back or forward, redrawing all steps to the specified location. Because metadata for each operation needs to be recorded, redrawing performance may decrease as the number of steps increases.

[0042] This application responds to an undo instruction for the current execution step by obtaining a target snapshot array whose first index is less than the current execution step; generating a redraw canvas based on the target snapshot array; and performing a replay operation on the redraw canvas to generate a target canvas based on an action memory array whose second index is between the target snapshot array and the current execution step. This reduces memory usage and improves drawing performance to support high-frequency large-canvas operations.

[0043] It should be noted that the execution subject of this embodiment can be a terminal device, or a computing service device with data processing, network communication, and program execution functions, such as a tablet computer, personal computer, mobile phone, etc., or a Canvas-based drawing device capable of implementing the above functions, etc. This embodiment does not specifically limit this. The following uses a Canvas-based drawing device as an example to illustrate this embodiment and the following embodiments.

[0044] Based on this, the first embodiment of the present application proposes a drawing method based on Canvas, please refer to Figure 1 The Canvas-based drawing method includes steps S10 to S30:

[0045] Step S10 , in response to a cancel instruction of a current execution step, obtaining a target snapshot array whose first index is smaller than the current execution step.

[0046] In this embodiment, the current execution step is a position identifier in the user operation sequence, and the target snapshot array is an ordered set storing the canvas state of a specific execution step.

[0047] As an optional implementation, the system maintains a snapshot array of a two-tuple structure, where each element contains: First index: the execution step position corresponding to the full pixel capture. Full pixel: the ImageData object obtained through Canvas's getImageData().

[0048] When receiving the undo instruction, the system uses binary search to quickly locate the largest snapshot array whose first index is smaller than the current execution step, and uses it as the target snapshot array.

[0049] Step S20: generating a redrawing canvas based on the target snapshot array.

[0050] In this embodiment, redrawing the canvas refers to restoring the Canvas instance to the target snapshot recorded state.

[0051] As an optional implementation, the system calls the putImageData() method of Canvas to render the full pixel data of the target snapshot to the canvas, generating a redrawn canvas that is consistent with the execution steps of the target snapshot array.

[0052] Step S30 , performing a replay operation on the redrawing canvas according to the action memory array whose second index is between the target snapshot array and the current execution step, to generate a target canvas.

[0053] In this embodiment, the action memory array is a triplet set that records user operation parameters, and the second index identifies the position of the action element in the array. The action memory array is a triplet array, including a first parameter, a second parameter, and a third parameter. The first parameter corresponds to the drawing operation data, the second parameter corresponds to the canvas adjustment data, and the third parameter corresponds to the brush adjustment data. The snapshot array is a binary array, including the first index and the full set of pixels.

[0054] As an optional implementation, in this embodiment, the action memory array is a set of triples that record user operation parameters, and the second index identifies the position of the action element in the array. As an optional implementation, the system traverses the action elements (ternary array) in the specified interval and executes in sequence: Canvas transformation: parses the second parameter (canvas adjustment data) and sets the transformation matrix of the Canvas context. Brush configuration: parses the third parameter (brush adjustment data) and sets the drawing style. Drawing execution: parses the first parameter (drawing operation data) and executes the corresponding drawing command. The above operations are used to incrementally apply subsequent operations on the redrawn canvas to generate the target canvas.

[0055] As an example, traverse the action elements (ternary array) in the specified interval and execute the following in sequence: Canvas Transformation: Parse the second parameter (canvas adjustment data) and set the Canvas context's transformation matrix (such as scale, rotate, and translate). Brush Configuration: Parse the third parameter (brush adjustment data) and set the drawing style (such as strokeStyle, lineWidth, and globalCompositeOperation). Drawing Execution: Parse the first parameter (drawing operation data) and call the corresponding Canvas API (such as beginPath, fillRect, and drawImage). This then generates the target canvas.

[0056] For example, a user performs the following operations in a Canvas-based drawing tool (each execution step corresponds to a drawing operation, and brush / canvas adjustment data is recorded with the drawing operation. Default values ​​are used if no adjustments are made). Operation Phase: Recording Actions and Generating Snapshots. Execution Step 1: Draw a blue line. This is a vector drawing operation. The user does not adjust the brush or canvas. The action memory array uses the default brush parameters (black, 1px line width), and the canvas parameters use the default values ​​(no scaling, no rotation).

[0057] Step 2: Adjust the pen color to red and then draw a circle. The user first changes the pen color to red and then draws the circle. The action memory array records the type and parameters of this drawing operation, as well as the pen adjustment data (red). The canvas is not adjusted and uses the default value.

[0058] Execute Step 3: Use the Pixel Erase Tool (Bitmap Operation). This is a bitmap operation, in which the user erases the center area of ​​the canvas. The action memory array records the coordinates and range of the erase operation. The brush / canvas parameters inherit the previous step's state (red brush, default canvas).

[0059] The system detects a bitmap operation and triggers snapshot generation: it obtains the current full pixel data through Canvas, records the snapshot array, and associates it with the current execution step index 3.

[0060] Execute steps 4-22: Draw 19 shapes continuously (vector operations). This includes two canvas adjustments: Execute step 10: Scale the canvas to 1.2x and then draw a rectangle. The action memory array records the canvas adjustment data (scaling ratio) and drawing operation parameters. Execute step 15: Restore the canvas to the default scale and draw a triangle. The canvas adjustment data returns to the default value, and the pen color remains red (unadjusted). Because the interval between 20 operations has not yet been reached, no new snapshot is generated.

[0061] Execute step 23: draw the 20th drawing operation (trigger interval snapshot).

[0062] The user draws text, and the system detects 20 cumulative drawing operations (counting 20 times since step 3), triggering a snapshot: the current full pixel data is recorded and associated with step index 23.

[0063] Undo phase: Restore the snapshot and replay the operation. The user triggers the undo at step 25 (currently after the 25th drawing operation):

[0064] Locating the target snapshot: The system searches the snapshot array for the largest snapshot with an index less than 25 and finds the snapshot that executed step 23 (the most recent snapshot).

[0065] Generate a redrawn canvas: After clearing the canvas, render all the pixel data stored in the snapshot to the canvas, restoring it to the state of step 23 (the final image of the previous 23 drawing operations, including scaling adjustments and all graphics drawn with the red brush).

[0066] Replay the subsequent steps (24-25): In step 24, the user rotates the canvas to 30 degrees and then draws a star. The system reads the canvas adjustment data (30-degree rotation) from the action memory array, applies the canvas rotation, and then draws the star using the current brush parameters (red, 1px line width).

[0067] In step 25, the user draws a green line segment directly (the brush color is adjusted to green) without adjusting the brush or canvas. The system detects the brush adjustment data (green), updates the brush color, and then draws the line segment. During replay, each step is applied sequentially. If canvas or brush adjustment data exists, the Canvas state is updated first. If no adjustments are made, the default value or the state retained from the previous step is used, ultimately generating the target canvas after the undo (the state from step 24).

[0068] In this embodiment, snapshots are only generated during bitmap operations or interval operations, and only 2 full pixel snapshots are generated for 25 operations (traditional full snapshots require 25 times), which reduces memory usage and avoids memory overflow problems in large canvas scenarios. Pixel-level snapshots directly record the complete picture after bitmap operations such as erasing and filling, and can restore pixel details losslessly when undoing, solving the problem of "inability to accurately restore after erasing" in traditional methods. There is no need to redraw all historical operations when undoing, only a few incremental steps need to be processed (such as redrawing 2 steps for 25 operations), which reduces redrawing time and keeps operations smooth even when undoing / redoing frequently on a 4K resolution canvas. The action memory array uniformly records drawing operations and adjustment parameters, and uses default values ​​when no adjustment is made, ensuring that the order of "brush color-canvas scaling-drawing operation" is strictly reproduced during replay, avoiding picture deviations caused by missing parameters.

[0069] Based on any of the above embodiments, in the second embodiment of the present application, step S30 includes:

[0070] Step S31: Obtain a value that is greater than the first index and less than the second index of the current execution step.

[0071] In this embodiment, the first index is a position identifier of the target snapshot array in the snapshot sequence, and the second index is a position identifier of the operation element in the action memory array.

[0072] As an optional implementation, the system maintains two sorted arrays: a snapshot array that stores key canvas states, and an action memory array that records all actions. When the user triggers an undo action, the system quickly locates the first index of the target snapshot through a binary search. It then searches the action memory array for all second indices that are greater than the first index and less than the current step.

[0073] Step S32 , executing the action parameters corresponding to the action memory arrays on the redrawing canvas in order of the size of the second indexes, to generate the target canvas.

[0074] In this embodiment, redrawing the canvas is restoring the Canvas instance to the target snapshot state, and the action parameters include drawing operations, canvas transformations, and brush settings.

[0075] As an optional implementation, the system traverses the filtered second index set and performs the following operations in ascending order: parsing the canvas adjustment data corresponding to the index in the action memory array to set the Canvas context's transformation matrix (e.g., scale, rotate); parsing the brush adjustment data to configure the drawing style (e.g., color, line width); executing the drawing operation data and calling the Canvas API to complete the drawing (e.g., line drawing, fill). Through these steps, the system incrementally applies subsequent operations to the redrawn canvas, ultimately generating the target canvas.

[0076] For example, the user performs the following operations in the drawing tool: Draw a blue straight line (execute step 1, no canvas / brush adjustment). Adjust the brush color to red (this adjustment is not counted as an execution step separately, it is bound to the subsequent drawing). Draw a red circle (execute step 2, with brush adjustment data). Scale the canvas to 1.5 times (this adjustment is not counted as an execution step separately, it is bound to the subsequent drawing). Draw a green rectangle (execute step 3, with canvas and brush adjustment data). Perform pixel erase (execute step 4, bitmap operation, generate snapshot, the first index is 4). Rotate the canvas 30 degrees (this adjustment is not counted as an execution step separately, it is bound to the subsequent drawing). Draw a purple triangle (execute step 5).

[0077] When the user triggers the undo operation in step 6, the system retrieves the target snapshot with the first index of 4 and generates a redrawn canvas (restoring the state after the pixel erase in step 4). It then selects the second index of 5 (the only index greater than 4 and less than 5). The action parameters for index 5 in the action memory array are read: canvas adjustment data: rotate 30 degrees (apply canvas transformation); brush adjustment data: default value (use the brush state retained in the previous step); drawing operation data: draw a purple triangle (call the Canvas draw command). The resulting target canvas is restored to the state after the pixel erase in step 4, and the drawing operation in step 5 is completed.

[0078] This embodiment achieves efficient and accurate operation backtracking by clarifying the subordinate relationship between execution steps and parameters: eliminating redundant execution steps: using canvas / brush adjustments as auxiliary parameters of drawing operations to avoid invalid step recording and reduce the storage capacity of the action memory array; accurate state reproduction: each execution step carries complete operation parameters, ensuring that the coherent process of "drawing after adjusting parameters" can be accurately restored during replay; optimizing redrawing performance: only replaying the actual drawing operations after the target snapshot, combined with rapid parameter application, reduces the redrawing calculation amount compared to traditional solutions in high-frequency operation scenarios on large canvases; compatible with bitmap operations: the snapshot mechanism combined with parameterized replay enables pixel-level operations (such as erasing) to be processed uniformly with vector drawing, solving the problem that traditional methods cannot take into account both bitmap and vector operations.

[0079] Furthermore, step S32 includes: for each of the action memory arrays, performing the following steps in sequence, including: setting the transformation matrix of the Canvas context according to the canvas adjustment data in the action memory array; setting the drawing style of the Canvas context according to the brush adjustment data in the action memory array; and calling the CanvasAPI to execute the corresponding drawing command according to the drawing operation data in the action memory array.

[0080] In this embodiment, the action memory array is a triplet set that records user drawing operations, including canvas adjustment data, brush adjustment data, and drawing operation data.

[0081] As an optional implementation, the system traverses each action memory array and performs the following operations in a fixed order: Apply canvas transformation: parse the canvas adjustment data in the action memory array, and set the transformation matrix of the Canvas context, including parameters such as scale, rotation angle, and translation. Configure drawing style: parse the brush adjustment data, and set the drawing properties of the Canvas context, including stroke color, line width, fill style, and composite operation mode. Execute drawing commands: parse the drawing operation data, and call the corresponding CanvasAPI to perform specific drawing operations, such as path drawing, graphic filling, image rendering, or pixel operations. Through the above steps, the system applies the parameters in each action memory array to the Canvas context in turn to achieve accurate replay of the operation.

[0082] This embodiment achieves efficient operation replay through a parameterized execution mechanism: State consistency guarantee: strictly execute in the order of "canvas adjustment → brush adjustment → drawing operation" to ensure that the context state is correct before each operation. Parameter inheritance mechanism: automatically inherit the parameters of the previous step when there is no adjustment, avoiding redundant records and reducing storage overhead. Operation decoupling optimization: decompose complex operations into independent parameters, support flexible combination and replay, and improve system scalability. Performance improvement: compared with the traditional full redraw method, parameterized execution reduces the number of state checks and API calls, and significantly improves the response speed in large canvas scenarios.

[0083] Based on any of the above embodiments, in the third embodiment of the present application, before step S10, the following steps are included:

[0084] Step A10 : In response to operation data for the canvas, generating an action memory array based on action parameters corresponding to the operation data, wherein the action parameters include at least one of canvas adjustment data, brush adjustment data, and drawing operation data.

[0085] In this embodiment, the operation data is the instruction generated by the user interaction, and the action parameter is the parsed operation details.

[0086] As an optional implementation, the system monitors user operation events on the Canvas, analyzes the operation type, and generates corresponding action parameters: Canvas adjustment data: Captures canvas transformation operations (such as scaling and rotation) and records the transformation matrix parameters. Brush adjustment data: Captures drawing style modifications (such as color and line width) and records the current brush state. Drawing operation data: Captures specific drawing behaviors (such as drawing lines and filling), and records the operation type and geometric parameters.

[0087] The system groups the above parameters into action memory arrays, which contain at least one valid parameter type. If no specific adjustments are made, the corresponding parameters use the default values.

[0088] For example, the user performs the following operations in the drawing tool:

[0089] Action A: Draw a straight line using the default brush (no canvas / brush adjustments).

[0090] Generate action memory array: history{

[0091] canvasSetting:{scale:1,rotation:0}, / / Default canvas state

[0092] brushSetting:{color:'#000',lineWidth:1}, / / Default brush state

[0093] drawingOp:{type:'line',x1:10,y1:20,x2:50,y2:60} / / Required drawing operation}.

[0094] Step B: Adjust the brush color to red and draw a circle.

[0095] Generate action memory array: history{

[0096] canvasSetting:{scale:1,rotation:0}, / / Unadjusted canvas

[0097] brushSetting:{color:'#ff0000',lineWidth:1}, / / Explicitly record brush color adjustment

[0098] drawingOp:{type:'circle',x:100,y:100,radius:50} / / Drawing operation}.

[0099] Operation C: Zoom the canvas to 2x and then erase part of the area

[0100] Generate action memory array: history{

[0101] canvasSetting:{scale:2,rotation:0}, / / Explicitly record canvas scaling

[0102] brushSetting:{color:'#ff0000',lineWidth:1}, / / Inherit the brush state of the previous step

[0103] drawingOp:{type:'erase',x:80,y:80,radius:30} / / Bitmap operation}.

[0104] This embodiment achieves efficient operation storage through a parameterized recording mechanism: Minimize data redundancy: only record the parameters that have changed, and use the default values ​​when there is no adjustment, reducing storage overhead. Operation integrity guarantee: each action memory array contains the complete operation context to ensure independent replay. Flexible parameter combination: supports single type of operation (such as adjusting only the canvas) or compound operations (such as drawing after adjusting the brush). State consistency: parameters are recorded in the order in which the operations occur to ensure that the state is consistent with the original operation during replay.

[0105] Optionally, refer to Figure 2 , step A10, comprising:

[0106] Step A11: If the action parameter is drawing operation data, obtain canvas adjustment data or brush adjustment data in the execution step corresponding to the drawing operation data.

[0107] In this embodiment, the action parameter refers to the core parameter involved in the user operation, and the execution step is an identifier of the user operation numbered in sequence.

[0108] As an optional implementation, the system monitors the user's drawing operations on the Canvas in real time. Once a drawing instruction (such as drawing a line or drawing a shape) is detected, it immediately scans whether there are any canvas adjustments (such as scaling or rotation) or brush adjustments (such as color or line width modifications) before and during the operation. If so, the corresponding adjustment data is recorded; if not, the default value is used in subsequent steps.

[0109] Step A12: determining a first parameter, a second parameter, and a third parameter corresponding to the drawing operation data, the canvas adjustment data, and the brush adjustment data. If the canvas adjustment data and / or the brush adjustment data do not exist, the second parameter and / or the third parameter are set to default values.

[0110] In this embodiment, the first parameter, the second parameter, and the third parameter are components of the action memory array.

[0111] As an optional implementation, the system maps the acquired drawing operation data to the first parameter; if there is canvas adjustment data, it is converted into the second parameter. If there is no canvas adjustment data, the second parameter adopts the default canvas transformation matrix, scaling ratio, rotation angle and other default values; similarly, the brush adjustment data is converted into the third parameter. If there is no brush adjustment data, the third parameter adopts the default brush color, line width, style and other default values.

[0112] In step A13, the action memory array is formed according to the first parameter, the second parameter, and the third parameter, and the second index of the action memory data array is recorded as the execution step.

[0113] In this embodiment, the action memory array is used to store user operation parameters, and the second index is used to locate an element in the array.

[0114] As an optional implementation, the system combines the determined first parameter, second parameter, and third parameter into a triple data structure and adds it to the action memory array; at the same time, the execution step number corresponding to the operation is used as the second index of the element in the action memory array, so that the operation can be replayed and positioned according to the index later.

[0115] Exemplarily, a user performs a drawing operation in a Canvas-based drawing software.

[0116] The user first draws a line using the default brush (black, 1px line width) and the default canvas state (no scaling, no rotation) (step 1). The system detects this drawing operation data. Since no canvas adjustment data or brush adjustment data exists within this step, the system uses the drawing operation data (the line's start and end coordinates) as the first parameter, the canvas adjustment data as the default value (scaling factor 1, rotation angle 0) as the second parameter, and the brush adjustment data as the default value (black, 1px line width) as the third parameter. These parameters form the first element of the action memory array, with the second index of this element being 1.

[0117] Next, the user changes the brush color to red, the line width to 3px, and then draws a circle (step 2). The system obtains the drawing operation data (the circle's center coordinates and radius) as the first parameter. Since there is no canvas adjustment data in this step, the second parameter uses the default value. The brush adjustment data (red, 3px line width) is determined as the third parameter, forming the second element of the action memory array, with the second index of this element being 2.

[0118] Finally, the user scales the canvas to 1.5x and then draws a rectangle (step 3). The system takes the drawing operation data (the rectangle's upper-left corner coordinates, width, and height) as the first parameter, the canvas adjustment data (scaling factor 1.5) as the second parameter, and the brush adjustment data, using the previous red color and 3px line width, as the third parameter, forming the third element of the action memory array. The second index of this element is 3.

[0119] This embodiment achieves accurate and efficient operation recording through structured processing of user operation data. First, canvas and brush adjustment data are linked for drawing operations to ensure parameter integrity for each operation step. Second, a default value mechanism avoids data redundancy when no adjustment is performed, saving storage space. Finally, the corresponding setting of action memory arrays and indexes provides a clear data foundation for subsequent operation replay and undo / redo functions. In large canvas and high-frequency operation scenarios, this significantly improves system response speed and data processing efficiency, while ensuring the accuracy of operation restoration.

[0120] Based on any of the above embodiments, in the fourth embodiment of the present application, refer to Figure 3 , after step A10, including:

[0121] Step A20: If the second index of the action memory array meets the interval requirement, all pixels of the canvas are obtained.

[0122] In this embodiment, the interval requirement refers to a preset operation number threshold or a trigger condition of a specific operation type. The total number of pixels refers to the pixels of the entire canvas.

[0123] As an optional implementation, the system maintains a counter to record the second index of the current execution step. When the second index reaches a preset interval threshold (e.g., every 20 operations) or satisfies a specific operation type (e.g., bitmap operations such as image erasing and filling), the full pixel data of the current canvas is captured using the Canvas getImageData() method.

[0124] Step A30: Store the second index and the total number of pixels as a snapshot array, wherein the first index value of the snapshot array is the same as the second index.

[0125] In this embodiment, the snapshot array is used to store the canvas state at key time points, and the first index is a unique identifier of the snapshot in the array.

[0126] As an optional implementation, the system uses the second index value of the current action memory array as the first index of the snapshot array, and stores the captured full pixel data in association with it. For example, if the 30th action triggers a snapshot, the first index of the generated snapshot array will be 30, corresponding to the full pixel data of the canvas at step 30.

[0127] For example, the user performs the following operations in the drawing tool:

[0128] Execute step 1-19: Draw 19 line segments continuously (vector operation). The system records the action memory array but does not trigger a snapshot (the interval threshold is not reached). Execute step 20: Use the eraser tool (bitmap operation, triggering a snapshot). The system generates an action memory array with the second index being 20. It detects that the second index meets the interval requirement (bitmap operation) and calls getImageData() to retrieve the full set of pixels on the current canvas. The snapshot array is stored as: Snapshots{firstIndex:20, pixelData:current full set of pixels}. Execute step 21-39: Draw multiple circles (vector operation). No snapshot is triggered. Execute step 40: The interval threshold of 20 operations is reached. The system generates an action memory array with the second index being 40. It detects that the second index meets the interval requirement (number of times threshold) and captures the full set of pixels. The snapshot array is stored as: Snapshots{firstIndex:40, pixelData:current full set of pixels}.

[0129] This embodiment achieves a balance between memory and performance through an interval snapshot mechanism: Reduce memory usage: The full amount of pixels is captured only when a bitmap operation is performed or a threshold is reached, which reduces memory usage compared to saving a snapshot for each operation. Improve replay efficiency: When undoing an operation, you can directly restore to the most recent snapshot state, and then replay a small number of subsequent operations (such as only replaying steps 41-45 after restoring from index 40), which is faster than the traditional replay of all operations from the beginning. Accurate state recovery: The state after a bitmap operation (such as image erasing) is completely saved through the full amount of pixels, which solves the problem that traditional vector operation records cannot restore pixel-level modifications. Index consistency optimization: The first index of the snapshot array is consistent with the second index of the action memory array, which simplifies the subsequent interval calculation and operation positioning logic.

[0130] Based on any of the above embodiments, in the sixth embodiment of the present application, step S20 includes:

[0131] Step S21: Clear the canvas to obtain an initial canvas.

[0132] In this embodiment, clearing the canvas means clearing all the drawing contents of the current Canvas and restoring it to the initial state.

[0133] As an optional implementation, the system calls the clearRect() method of Canvas, starting from the upper left corner of the canvas, covering the entire canvas size, and resetting all pixels to transparent to obtain a clean initial canvas.

[0134] Step S22 : Loading all pixels stored in the target snapshot array into the initial canvas to obtain the redrawing canvas.

[0135] In this embodiment, the full amount of pixels stored in the target snapshot array refers to the complete canvas image data at a specific execution step.

[0136] As an optional implementation, the system calls the putImageData() method of Canvas to render the ImageData object stored in the target snapshot array onto the initial canvas. This process accurately restores the canvas state at the moment the snapshot was recorded, including all drawn graphics, colors, and pixel information, and ultimately generates a redrawn canvas that is consistent with the execution step of the target snapshot.

[0137] In this embodiment, all pixel information is fully restored through the ImageData object, ensuring that even complex bitmap operations (such as gradients and textures) can be restored losslessly. Memory optimization: Only snapshots of key time points are stored, combined with subsequent incremental replay, to reduce memory usage in large canvas scenarios.

[0138] The present application provides a Canvas-based drawing device, which includes: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the Canvas-based drawing method of the above-mentioned embodiment 1.

[0139] Reference below Figure 4 , which shows a schematic diagram of the structure of a Canvas-based drawing device suitable for implementing embodiments of the present application. The Canvas-based drawing device in the embodiments of the present application may include, but is not limited to, mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, personal digital assistants (PDAs), tablet computers, and vehicle-mounted terminals, as well as fixed terminals such as digital TVs and desktop computers. Figure 4 The Canvas-based drawing device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0140] like Figure 4As shown, the Canvas-based drawing device may include a processing device 1001 (e.g., a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes based on a program stored in a read-only memory (ROM) 1002 or a program loaded from a storage device 1003 into a random access memory (RAM) 1004. Various programs and data required for the operation of the Canvas-based drawing device are also stored in the RAM 1004. The processing device 1001, the read-only memory 1002, and the RAM 1004 are connected to each other via a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Typically, the following systems can be connected to the I / O interface 1006: input devices 1007 including, for example, a touch screen, touchpad, keyboard, mouse, image sensor, microphone, accelerometer, gyroscope, etc.; output devices 1008 including, for example, a liquid crystal display (LCD), speaker, vibrator, etc.; storage devices 1003 including, for example, a magnetic tape, hard disk, etc.; and communication devices 1009. The communication devices 1009 can allow the Canvas-based drawing device to communicate with other devices wirelessly or wired to exchange data. Although the figure shows a Canvas-based drawing device with various systems, it should be understood that it is not required to implement or have all of the systems shown. More or fewer systems may be implemented or have instead.

[0141] In particular, according to the embodiments disclosed in the present application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, the embodiments disclosed in the present application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program comprising program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.

[0142] The Canvas-based drawing device provided in this application, utilizing the Canvas-based drawing method described in the aforementioned embodiment, can address the technical issue of decreased redrawing performance as the number of steps increases. Compared to the prior art, the Canvas-based drawing device provided in this application offers the same beneficial effects as those provided in the aforementioned embodiment. Other technical features of this Canvas-based drawing device are the same as those disclosed in the aforementioned embodiment and are not further elaborated upon here.

[0143] It should be understood that the various parts disclosed in this application can be implemented using hardware, software, firmware, or a combination thereof. In the description of the above embodiments, specific features, structures, materials, or characteristics can be combined in any one or more embodiments or examples in a suitable manner.

[0144] The above description is merely a specific embodiment of the present application, but the scope of protection of the present application is not limited thereto. Any changes or substitutions that can be easily conceived by a person skilled in the art within the technical scope disclosed in this application should be included in the scope of protection of this application. Therefore, the scope of protection of this application should be based on the scope of protection of the claims.

[0145] The present application provides a computer-readable storage medium having computer-readable program instructions (ie, computer program) stored thereon, wherein the computer-readable program instructions are used to execute the Canvas-based drawing method in the above embodiment.

[0146] The computer-readable storage medium provided in this application can be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination thereof. More specific examples of computer-readable storage media can include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM), a flash memory, an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In this embodiment, the computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in combination with an instruction execution system, system, or device. The program code contained on the computer-readable storage medium can be transmitted using any appropriate medium, including but not limited to: an electric wire, an optical cable, a radio frequency (RF), etc., or any suitable combination thereof.

[0147] The computer-readable storage medium may be included in a Canvas-based drawing device, or may exist independently without being assembled into a Canvas-based drawing device.

[0148] The computer-readable storage medium carries one or more programs. When the one or more programs are executed by a Canvas-based drawing device, the Canvas-based drawing device: in response to an undo instruction of a current execution step, obtains a target snapshot array whose first index is less than the current execution step; generates a redrawing canvas based on the target snapshot array; and performs a replay operation on the redrawing canvas based on an action memory array whose second index is between the target snapshot array and the current execution step to generate a target canvas.

[0149] Computer program code for performing the operations of the present application can be written in one or more programming languages, or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code can be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving a remote computer, the remote computer can be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0150] The flow charts and block diagrams in the accompanying drawings illustrate the possible architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present application. In this regard, each box in the flow chart or block diagram can represent a module, program segment or a part of code, and the module, program segment or a part of code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order than that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flow chart, and the combination of the boxes in the block diagram and / or flow chart can be implemented by a dedicated hardware-based system that performs the specified function or operation, or can be implemented by a combination of dedicated hardware and computer instructions.

[0151] The modules described in the embodiments of the present application may be implemented in software or hardware, wherein the name of a module does not necessarily limit the unit itself.

[0152] The computer-readable storage medium provided in this application is a computer-readable storage medium that stores computer-readable program instructions (i.e., a computer program) for executing the aforementioned Canvas-based drawing method. This computer-readable storage medium can address the technical issue of decreased redrawing performance as the number of steps increases. Compared to the prior art, the beneficial effects of the computer-readable storage medium provided in this application are the same as those of the Canvas-based drawing method provided in the aforementioned embodiments, and are not further elaborated here.

[0153] An embodiment of the present application provides a computer program product, including a computer program, which implements the steps of the above-mentioned Canvas-based drawing method when executed by a processor.

[0154] The computer program product provided in this application can solve the technical problem that redrawing performance may decrease as the number of steps increases. Compared with the prior art, the beneficial effects of the computer program product provided in the embodiments of this application are the same as the beneficial effects of the Canvas-based drawing method provided in the above embodiments, and will not be repeated here.

[0155] The above are only preferred embodiments of the present application and do not limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent processing scope of the present application.

Claims

1. A drawing method based on Canvas, characterized in that: The Canvas-based drawing method includes: In response to a cancel instruction of a current execution step, obtaining a target snapshot array having a first index smaller than the current execution step; generating a redraw canvas based on the target snapshot array; According to the action memory array whose second index is between the target snapshot array and the current execution step, a replay operation is performed on the redrawing canvas to generate a target canvas.

2. The method according to claim 1, wherein The step of performing a replay operation on the redrawing canvas to generate a target canvas based on the action memory array whose second index is between the target snapshot array and the current execution step includes: Obtain a second index whose value is greater than the first index and less than the current execution step; The action parameters corresponding to the action memory arrays are sequentially executed on the redrawing canvas in the order of the size of the second indexes to generate the target canvas.

3. The method according to claim 2, wherein The step of sequentially executing the action parameters corresponding to the action memory arrays on the redrawing canvas in order of the size of the second indexes includes: For each of the action memory arrays, the following steps are performed in sequence, including: Set the transformation matrix of the Canvas context according to the canvas adjustment data in the action memory array; Setting the drawing style of the Canvas context according to the brush adjustment data in the action memory array; According to the drawing operation data in the action memory array, the Canvas API is called to execute the corresponding drawing command.

4. The method according to claim 1, wherein Before the step of obtaining a target snapshot array with a first index smaller than the current execution step in response to the undo instruction of the current execution step, the method includes: In response to operation data for the canvas, an action memory array is generated based on action parameters corresponding to the operation data, where the action parameters include at least one of canvas adjustment data, brush adjustment data, and drawing operation data.

5. The method according to claim 4, wherein The step of generating an action memory array based on action parameters corresponding to the operation data in response to the operation data on the canvas includes: If the action parameter is drawing operation data, obtaining canvas adjustment data or brush adjustment data in an execution step corresponding to the drawing operation data; determining a first parameter, a second parameter, and a third parameter corresponding to the drawing operation data, the canvas adjustment data, and the brush adjustment data, wherein if the canvas adjustment data and / or the brush adjustment data do not exist, the second parameter and / or the third parameter are default values; The action memory array is formed according to the first parameter, the second parameter and the third parameter, and the second index of the action memory data array is recorded as the execution step.

6. The method according to claim 4, wherein After the step of generating an action memory array based on action parameters corresponding to the operation data in response to the operation data on the canvas, the method further includes: If the second index of the action memory array meets the interval requirement, obtaining all pixels of the canvas; The second index and the full amount of pixels are stored as a snapshot array, wherein the first index value of the snapshot array is the same as the second index.

7. The method according to claim 1, wherein The step of generating a redrawing canvas based on the target snapshot array includes: Clear the canvas to get the initial canvas; All pixels stored in the target snapshot array are loaded into the initial canvas to obtain the redrawing canvas.

8. The method according to claim 1, wherein The action memory array is a ternary array including a first parameter, a second parameter, and a third parameter. The first parameter corresponds to drawing operation data, the second parameter corresponds to canvas adjustment data, and the third parameter corresponds to brush adjustment data. The snapshot array is a binary array including a first index and a full amount of pixels.

9. A Canvas-based drawing device, characterized in that: The Canvas-based drawing device comprises: a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the Canvas-based drawing method according to any one of claims 1 to 8.

10. A storage medium, characterized in that: The storage medium is a computer-readable storage medium having a computer program stored thereon. When the computer program is executed by a processor, the steps of the Canvas-based drawing method according to any one of claims 1 to 8 are implemented.

Images