Rendering method and device of size-unlimited virtual canvas, storage medium and computer equipment

Abstract

The invention discloses a rendering method and device for a size-unlimited virtual canvas, a storage medium and computer equipment, and the method comprises the steps: determining a current viewport absolute coordinate of a current viewport in the virtual canvas in response to a viewport change operation on the virtual canvas; determining a target element falling into the current viewport in the drawn elements according to the element absolute coordinates of the drawn elements in the virtual canvas and the absolute coordinates of the current viewport; and obtaining a target element bitmap of the target element obtained through off-screen pre-rendering, and performing virtual canvas rendering on the current viewport based on the target element bitmap. According to the method, only the elements in the viewport are processed, so that full-amount redrawing is avoided, the rendering speed is increased, memory occupation is reduced, smooth real-time interaction experience is brought to a user, and the performance problem of processing a large-size canvas in a traditional scheme is solved.

Description

Technical Field

[0001] This application relates to the field of image rendering technology, and in particular to a rendering method, apparatus, storage medium, and computer equipment for a virtual canvas of unlimited size. Background Technology

[0002] In existing graffiti drawing systems, a fixed-width and-height canvas needs to be created during canvas initialization to accommodate drawing elements. While this traditional approach is adequate for most scenarios, it has significant limitations when dealing with long / extra-long or wide / extra-wide canvases. When a long / extra-long canvas is required, the system must set its height during canvas initialization; similarly, for wide / extra-wide canvases, the width must be set during initialization.

[0003] When performing operations such as drawing, rotating, and scaling on elements on the canvas, the actual existence of extremely long / wide canvases exacerbates performance issues due to the clear-and-redraw mechanism. Firstly, traditional methods often employ a full single-canvas redraw, requiring a clear and redraw of all visible elements with each scroll or transformation. With a large number of elements, each redraw necessitates traversing path points, calculating curves, and applying brush effects, resulting in high computational complexity and a linear decrease in performance with the number of elements. Secondly, traditional rendering methods require maintaining a complete canvas bitmap; the memory usage of an infinitely long canvas increases linearly with its length, making effective management difficult. Summary of the Invention

[0004] In view of this, embodiments of this application provide a rendering method, apparatus, storage medium, and computer device for a virtual canvas of any size.

[0005] According to one aspect of this application, a rendering method for a virtual canvas of unlimited size is provided, the method comprising: In response to a viewport change operation on the virtual canvas, determine the current absolute coordinates of the current viewport within the virtual canvas; Based on the absolute coordinates of each drawn element in the virtual canvas and the absolute coordinates of the current viewport, determine the target element among the drawn elements that falls into the current viewport; Obtain the target element bitmap of the target element obtained through off-screen pre-rendering, and perform virtual canvas rendering for the current viewport based on the target element bitmap.

[0006] Optionally, the method further includes: When a new element is created, obtain the absolute coordinates of the drawing viewport that created the new element, and determine the absolute coordinates of the new element based on the absolute coordinates of the drawing viewport and the relative coordinates of the new element in the virtual canvas. The element attribute information of the new element is determined based on the absolute coordinates of the element, and the element attribute information of the new element is stored in the attribute database as a drawn element.

[0007] Optionally, determining the absolute coordinates of the new element based on the absolute coordinates of the drawing viewport and the relative coordinates of the new element in the virtual canvas includes: Iterate through the relative coordinates of each pixel of the new element in the drawing viewport, and determine the absolute coordinates of each pixel of the new element in the virtual canvas based on the absolute coordinates of the drawing viewport and the relative coordinates of the pixels. Based on the absolute coordinates of each pixel of the new element, construct the minimum bounding box of the new element, and determine the absolute coordinates of the new element based on the absolute coordinates of the bounding box of the minimum bounding box. The element attribute information of the new element is determined based on the absolute coordinates of the element.

[0008] Optionally, the step of determining the absolute coordinates of the bounding box based on the minimum bounding box includes: The target brush width is determined based on the vertex coordinates of the minimum bounding box and the drawing mode of the new element. The minimum bounding box is expanded according to the target brush width to update the vertex coordinates of the minimum bounding box, and the absolute coordinates of the bounding box are determined according to the updated vertex coordinates.

[0009] Optionally, after determining the element attribute information of the new element, the method further includes: The bounding box size of the new element is determined based on the absolute coordinates of the bounding box, and the element canvas of the new element is created based on the bounding box size of the new element; The target brush image is determined according to the drawing mode of the new element, and the target brush image is drawn one by one on the element canvas based on each pixel of the new element to obtain the element bitmap of the new element, so as to realize the off-screen pre-rendering of the new element. Generate a unique identifier for the element bitmap of the new element, write the unique identifier into the element attribute information, and associate and store the element bitmap of the new element with the unique identifier.

[0010] Optionally, before drawing the target brush image pixel by pixel on the element canvas to obtain the element bitmap of the new element, the method further includes: Determine the canvas coordinates of each pixel of the new element on the element's canvas; Curve smoothing is performed on each pixel of the new element to correct the canvas coordinates of each pixel of the new element, and the drawing path of the new element is subdivided into pixels based on the canvas coordinates to obtain the drawing point coordinates of the new element. The step of drawing the target brush image pixel by pixel on the element canvas to obtain the element bitmap of the new element includes: Based on the drawing offset corresponding to the target brush image, the coordinates of the drawing points are offset, and the target brush image is drawn one by one on the element canvas according to the offset drawing point coordinates to obtain the element bitmap of the new element.

[0011] Optionally, associating and storing the element bitmap of the new element with the unique identifier includes: The element bitmap of the new element is associated with the unique identifier and stored in the bitmap cache pool; The step of obtaining the target element bitmap of the target element obtained through off-screen pre-rendering includes: Obtain the unique identifier of the target element corresponding to the target element, and query the unique identifier of the target element in the bitmap cache pool; If the bitmap cache pool contains the unique identifier of the target element, then the bitmap corresponding to the unique identifier of the target element is obtained as the target element bitmap; If the bitmap cache pool does not contain the unique identifier of the target element, then return to the step of creating the element canvas of the new element based on the bounding box size of the new element, perform off-screen pre-rendering on the target element, and store the obtained target element bitmap in the bitmap cache pool.

[0012] Optionally, the method further includes: Obtain transformation operation data for any drawn element, wherein the transformation operation data includes at least one of translation, scaling, and rotation; Based on the order of the transformation operation data, the absolute coordinates of the elements are transformed and calculated sequentially. The absolute coordinates of the elements in the element attribute information of any drawn element are updated based on the calculation results. The transformation operation data is then added to the element attribute information of any drawn element.

[0013] Optionally, determining the absolute coordinates of the current viewport in the virtual canvas in response to a viewport change operation on the virtual canvas includes: In response to a viewport change operation on the virtual canvas, the viewport offset corresponding to the viewport change operation is obtained; based on the viewport absolute coordinates before the viewport change operation and the viewport offset, the current viewport absolute coordinates in the virtual canvas are determined.

[0014] Optionally, determining the target element falling into the current viewport among the drawn elements based on the absolute coordinates of each drawn element in the virtual canvas and the absolute coordinates of the current viewport includes: Based on the absolute coordinates of the current viewport and the size of the buffer area, determine the absolute coordinates of the element rendering area of ​​the current viewport in the virtual canvas; The overlapping area is identified based on the absolute coordinates of the element rendering area and the absolute coordinates of each drawn element in the virtual canvas; the drawn elements with overlapping areas are identified as target elements falling into the current viewport. The virtual canvas rendering based on the target element bitmap for the current viewport includes: Clear the current display content of the virtual canvas, render the element rendering area based on the target element bitmap, and display the virtual canvas for the current viewport.

[0015] Optionally, before determining the absolute coordinates of the element rendering area in the virtual canvas based on the current viewport's absolute coordinates and the buffer area size, the method further includes: The size of the buffer area is determined based on the performance of the current equipment.

[0016] According to another aspect of this application, a rendering apparatus for a virtual canvas of unlimited size is provided, the apparatus comprising: The viewport determination module is used to determine the absolute coordinates of the current viewport in the virtual canvas in response to a viewport change operation on the virtual canvas. The element determination module is used to determine the target element that falls into the current viewport among the drawn elements based on the absolute coordinates of each drawn element in the virtual canvas and the absolute coordinates of the current viewport. The canvas rendering module is used to obtain the target element bitmap of the target element obtained through off-screen pre-rendering, and to perform virtual canvas rendering for the current viewport based on the target element bitmap.

[0017] Optionally, the device further includes: an attribute information storage module, used for: When a new element is created, obtain the absolute coordinates of the drawing viewport that created the new element, and determine the absolute coordinates of the new element based on the absolute coordinates of the drawing viewport and the relative coordinates of the new element in the virtual canvas. The element attribute information of the new element is determined based on the absolute coordinates of the element, and the element attribute information of the new element is stored in the attribute database as a drawn element.

[0018] Optionally, the attribute information storage module is specifically used for: Iterate through the relative coordinates of each pixel of the new element in the drawing viewport, and determine the absolute coordinates of each pixel of the new element in the virtual canvas based on the absolute coordinates of the drawing viewport and the relative coordinates of the pixels. Based on the absolute coordinates of each pixel of the new element, construct the minimum bounding box of the new element, and determine the absolute coordinates of the new element based on the absolute coordinates of the bounding box of the minimum bounding box. The element attribute information of the new element is determined based on the absolute coordinates of the element.

[0019] Optionally, the attribute information storage module is specifically used for: The target brush width is determined based on the vertex coordinates of the minimum bounding box and the drawing mode of the new element. The minimum bounding box is expanded according to the target brush width to update the vertex coordinates of the minimum bounding box, and the absolute coordinates of the bounding box are determined according to the updated vertex coordinates.

[0020] Optionally, the apparatus further includes: a bitmap pre-rendering module, used for: The bounding box size of the new element is determined based on the absolute coordinates of the bounding box, and the element canvas of the new element is created based on the bounding box size of the new element; The target brush image is determined according to the drawing mode of the new element, and the target brush image is drawn one by one on the element canvas based on each pixel of the new element to obtain the element bitmap of the new element, so as to realize the off-screen pre-rendering of the new element. Generate a unique identifier for the element bitmap of the new element, write the unique identifier into the element attribute information, and associate and store the element bitmap of the new element with the unique identifier.

[0021] Optionally, the bitmap pre-rendering module is further configured to: Determine the canvas coordinates of each pixel of the new element on the element's canvas; Curve smoothing is performed on each pixel of the new element to correct the canvas coordinates of each pixel of the new element, and the drawing path of the new element is subdivided into pixels based on the canvas coordinates to obtain the drawing point coordinates of the new element. Based on the drawing offset corresponding to the target brush image, the coordinates of the drawing points are offset, and the target brush image is drawn one by one on the element canvas according to the offset drawing point coordinates to obtain the element bitmap of the new element.

[0022] Optionally, the attribute information storage module is specifically used for: The element bitmap of the new element is associated with the unique identifier and stored in the bitmap cache pool; The element determination module is specifically used for: Obtain the unique identifier of the target element corresponding to the target element, and query the unique identifier of the target element in the bitmap cache pool; If the bitmap cache pool contains the unique identifier of the target element, then the bitmap corresponding to the unique identifier of the target element is obtained as the target element bitmap; If the bitmap cache pool does not contain the unique identifier of the target element, then return to the step of creating the element canvas of the new element based on the bounding box size of the new element, perform off-screen pre-rendering on the target element, and store the obtained target element bitmap in the bitmap cache pool.

[0023] Optionally, the attribute information storage module is further configured to: Obtain transformation operation data for any drawn element, wherein the transformation operation data includes at least one of translation, scaling, and rotation; Based on the order of the transformation operation data, the absolute coordinates of the elements are transformed and calculated sequentially. The absolute coordinates of the elements in the element attribute information of any drawn element are updated based on the calculation results. The transformation operation data is then added to the element attribute information of any drawn element.

[0024] Optionally, the viewport determination module is specifically used for: In response to a viewport change operation on the virtual canvas, the viewport offset corresponding to the viewport change operation is obtained; based on the viewport absolute coordinates before the viewport change operation and the viewport offset, the current viewport absolute coordinates in the virtual canvas are determined.

[0025] Optionally, the element determination module is further configured to: Based on the absolute coordinates of the current viewport and the size of the buffer area, determine the absolute coordinates of the element rendering area of ​​the current viewport in the virtual canvas; The overlapping area is identified based on the absolute coordinates of the element rendering area and the absolute coordinates of each drawn element in the virtual canvas; the drawn elements with overlapping areas are identified as target elements falling into the current viewport. The canvas rendering module is also used for: Clear the current display content of the virtual canvas, render the element rendering area based on the target element bitmap, and display the virtual canvas for the current viewport.

[0026] Optionally, the element determination module is further configured to: The size of the buffer zone is determined based on the performance of the current equipment.

[0027] According to another aspect of this application, a storage medium is provided that stores a computer program thereon, which, when executed by a processor, implements the above-described rendering method for a virtual canvas of unlimited size.

[0028] According to another aspect of this application, a computer device is provided, including a storage medium, a processor, and a computer program stored on the storage medium and executable on the processor, wherein the processor executes the program to implement the above-described rendering method for a virtual canvas of unlimited size.

[0029] By employing the above technical solutions, this application provides a rendering method, apparatus, storage medium, and computer device for a virtual canvas of unlimited size. When a user performs viewport changes on the virtual canvas, the absolute coordinates of the current viewport are first determined. Then, target elements falling into the viewport are selected based on the absolute coordinates of each drawn element. Finally, the bitmaps pre-rendered off-screen for these target elements are obtained, and rendering is completed for the current viewport based on these bitmaps. This application avoids a full redraw by processing only elements within the viewport, improving rendering speed, reducing memory usage, and providing users with a smooth real-time interactive experience. It also solves the performance problems of traditional solutions when processing large-size canvases.

[0030] The above description is only an overview of the technical solution of this application. In order to better understand the technical means of this application and to implement it in accordance with the contents of the specification, and to make the above and other objects, features and advantages of this application more obvious and understandable, the following are specific embodiments of this application. Attached Figure Description

[0031] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings: Figure 1 A flowchart illustrating a rendering method for a virtual canvas of any size provided in an embodiment of this application is shown. Figure 2A This illustration shows a flowchart of another rendering method for a virtual canvas of unlimited size provided in an embodiment of this application; Figure 2B This illustration shows a flowchart of another rendering method for a virtual canvas of unlimited size provided in an embodiment of this application; Figure 2C This illustration shows a flowchart of another rendering method for a virtual canvas of unlimited size provided in an embodiment of this application; Figure 3This illustration shows a structural schematic diagram of a rendering device for a virtual canvas of unlimited size provided in an embodiment of this application; Figure 4 A schematic diagram of the device structure of a computer device provided in an embodiment of this application is shown. Detailed Implementation

[0032] The present application will be described in detail below with reference to the accompanying drawings and embodiments. It should be noted that, unless otherwise specified, the embodiments and features described in the embodiments of the present application can be combined with each other.

[0033] This embodiment provides a rendering method for a virtual canvas of any size, such as... Figure 1 As shown, the method includes: Step 101: In response to the viewport change operation on the virtual canvas, determine the current viewport absolute coordinates in the virtual canvas.

[0034] In this embodiment, during user interaction with the virtual canvas, operations such as scrolling and zooming that cause viewport changes will trigger a response to these viewport changes. The system will determine the absolute coordinates of the current viewport within the overall coordinate system of the virtual canvas, clarifying the specific location of the canvas area currently visible to the user within the entire virtual canvas. Specifically, the absolute coordinates of the current viewport can be determined using the coordinates of four vertices, which can be used to determine the current viewport position of the rectangle. This provides a basis for selecting elements to be rendered in subsequent steps, avoiding unnecessary calculations and rendering, and improving the system's targeting and efficiency.

[0035] Step 102: Based on the absolute coordinates of each drawn element in the virtual canvas and the absolute coordinates of the current viewport, determine the target element that falls into the current viewport among the drawn elements.

[0036] In this embodiment, various elements have been drawn on the virtual canvas, each with its corresponding absolute coordinates. The absolute coordinates of each drawn element are compared and calculated with the absolute coordinates of the current viewport. By determining whether the element coordinates are within the range defined by the current viewport coordinates, elements falling within the current viewport are selected as target elements. This allows only target elements falling within the current viewport to be rendered subsequently, instead of operating on all elements on the entire virtual canvas. This significantly reduces the range of elements that need to be processed, lowers the computational load and rendering pressure, and improves the system's running speed and response efficiency.

[0037] Step 103: Obtain the target element bitmap of the target element obtained through off-screen pre-rendering, and perform virtual canvas rendering for the current viewport based on the target element bitmap.

[0038] In this embodiment, during system operation, off-screen rendering is performed on each already drawn element in advance, rendering the elements into bitmaps and storing them. These bitmaps contain all visual information such as the element's shape, color, and texture. When a target element is determined, the off-screen pre-rendered bitmap corresponding to this target element is obtained from the off-screen pre-rendered element bitmap, i.e., the target element bitmap. Based on the obtained target element bitmap and combined with the coordinate information of the current viewport, these target elements are accurately drawn in the display area corresponding to the current viewport, completing the rendering of the virtual canvas under the current viewport. Off-screen pre-rendering completes the complex element drawing process in advance, and the pre-rendered bitmap is used directly when rendering is needed, avoiding complex operations such as recalculating the element's drawing path, curves, and brush effects every time rendering, improving rendering speed, reducing lag, and achieving a smoother real-time interactive experience.

[0039] This embodiment uses a virtual coordinate system to define the virtual canvas. This coordinate system can extend infinitely, unrestricted by the actual display area or memory size. Absolute coordinates are used to precisely represent the position of each element within the virtual canvas, allowing the canvas to theoretically have an infinite size. The current viewport's absolute coordinates are obtained through viewport transformation operations, and target elements falling within the viewport are selected based on these coordinates. This mechanism allows the system to focus only on elements within the currently visible area, without considering all elements of the infinitely large canvas. Regardless of the virtual canvas size, only elements relevant to the current viewport are processed, thus achieving virtual canvas rendering without size limitations. Furthermore, off-screen pre-rendering separates the element rendering process from the display, pre-generating and storing element bitmaps. This approach ensures that element rendering is not limited by canvas size; regardless of the canvas size, only the bitmaps of the target elements to be displayed need to be acquired and drawn.

[0040] By applying the technical solution of this embodiment, when a user performs viewport modification operations on the virtual canvas, the absolute coordinates of the current viewport are first determined. Then, based on the absolute coordinates of each drawn element, target elements falling into the viewport are selected. Finally, the bitmaps pre-rendered off-screen for these target elements are obtained, and rendering is completed for the current viewport based on these bitmaps. This embodiment avoids a full redraw by processing only elements within the viewport, improving rendering speed, reducing memory usage, and providing users with a smooth real-time interactive experience. It also solves the performance problem of traditional solutions when processing large canvases.

[0041] In this embodiment of the application, optionally, for elements drawn on a virtual canvas, information can be stored in the following way: when a new element is created, the absolute coordinates of the drawing viewport that created the new element are obtained, and the absolute coordinates of the new element are determined according to the absolute coordinates of the drawing viewport and the relative coordinates of the new element in the virtual canvas; the element attribute information of the new element is determined based on the absolute coordinates of the element, and the element attribute information is stored in the attribute database as a drawn element.

[0042] In this embodiment, when a new element is created on the virtual canvas, the absolute coordinates of the drawing viewport at the time of its creation are first obtained. Simultaneously, the new element has relative coordinates within the virtual canvas relative to the drawing viewport. By combining the absolute coordinates of the drawing viewport and the element's relative coordinates, the absolute coordinates of the new element within the entire virtual canvas are determined through specific calculations. By combining the absolute coordinates of the drawing viewport and the element's relative coordinates to determine its absolute coordinates, the newly created element can be accurately positioned within the infinitely large virtual canvas, ensuring the precision of its position. This provides a foundation for subsequent operations based on the element's position, such as filtering elements within the viewport. Next, the element's attribute information is constructed based on these absolute coordinates. Finally, the new element is treated as a drawn element, and this attribute information is stored in an attribute database for quick retrieval and use in subsequent rendering and other related operations.

[0043] In this embodiment of the application, optionally, determining the absolute coordinates of the new element based on the absolute coordinates of the drawing viewport and the relative coordinates of the new element in the virtual canvas includes: traversing the relative coordinates of each pixel of the new element in the drawing viewport; determining the absolute coordinates of each pixel of the new element in the virtual canvas based on the absolute coordinates of the drawing viewport and the relative coordinates of the pixels; constructing the minimum bounding box of the new element based on the absolute coordinates of the pixels of the new element; determining the absolute coordinates of the new element based on the absolute coordinates of the bounding box of the minimum bounding box; and determining the element attribute information of the new element based on the absolute coordinates of the element.

[0044] In this embodiment, when determining the absolute coordinates of a new element, each pixel of the new element in the drawing viewport can be traversed first to obtain the relative coordinates of each pixel with respect to the drawing viewport. Next, by combining the absolute coordinates of the drawing viewport with these relative pixel coordinates, the absolute coordinates of each pixel of the new element in the virtual canvas are calculated. Then, based on these absolute pixel coordinates, a minimum bounding box that completely encloses the new element is constructed. The absolute coordinates of this minimum bounding box in the virtual canvas are used to determine the absolute coordinates of the new element in the virtual canvas. For example, by traversing all pixels of the element and calculating minx, miny, maxx, and maxy, the absolute coordinates of the minimum bounding box are determined. Finally, based on these absolute coordinates, other element attribute information of the new element is further determined.

[0045] In this embodiment of the application, optionally, the step of determining the absolute coordinates of the bounding box of the minimum bounding box includes: determining the target brush width based on the vertex coordinates of the minimum bounding box and the drawing mode of the new element; expanding the minimum bounding box according to the target brush width to update the vertex coordinates of the minimum bounding box, and determining the absolute coordinates of the bounding box of the minimum bounding box based on the updated vertex coordinates.

[0046] In this embodiment, during the process of determining the absolute coordinates of a new element based on its minimum bounding box, the vertex coordinates of the minimum bounding box are first obtained. Simultaneously, the target brush width is determined by combining this with the pre-defined drawing mode of the new element. Different drawing modes correspond to different brush effects, thus affecting the brush width. After determining the target brush width, the minimum bounding box is expanded according to this width, that is, the boundaries of the bounding box are adjusted, and its vertex coordinates are updated. For example, the absolute vertex coordinates of the minimum bounding box before expansion are minx, miny, maxx, maxy; after expansion, they are minx-w / 2, miny-w / 2, maxx+w / 2, maxy+w / 2, where w is the target brush width. Finally, the absolute coordinates of the expanded minimum bounding box in the virtual canvas are determined based on the updated vertex coordinates, thereby more comprehensively and accurately defining the spatial range occupied by the new element in the virtual canvas. Considering the differences in brush width under different drawing modes, by determining the target brush width based on the drawing mode and expanding the minimum bounding box, the determined spatial range can be adapted to the actual drawing effect of the new element. For example, in the thick line drawing mode, the enlarged bounding box can completely cover the wider lines drawn by the brush, avoiding the omission of some drawing content due to the bounding box being too small, and ensuring the accuracy of element positioning and subsequent operations.

[0047] In this embodiment of the application, optionally, after determining the element attribute information of the new element, the method further includes: determining the bounding box size of the new element according to the absolute coordinates of the bounding box, and creating an element canvas of the new element based on the bounding box size of the new element; determining a target brush image according to the drawing mode of the new element, drawing the target brush image one by one on the element canvas based on each pixel of the new element to obtain an element bitmap of the new element, so as to realize off-screen pre-rendering of the new element; generating a unique identifier for the element bitmap of the new element, writing the unique identifier into the element attribute information, and associating and storing the element bitmap of the new element with the unique identifier.

[0048] In this embodiment, firstly, the size of the new element's bounding box is calculated based on the absolute coordinates of the determined minimum bounding box. Based on this calculated size, a custom element canvas is created for the new element, providing independent drawing space for subsequent drawing operations. Next, a suitable target brush image is selected according to the new element's pre-defined drawing mode. Then, the target brush image is drawn pixel by pixel on the created element canvas. This process completes the drawing of the new element on the element canvas, resulting in the element bitmap, achieving off-screen pre-rendering of the new element—that is, rendering is completed before it is directly displayed on the screen. Finally, a unique identifier is generated for the new element's bitmap and added to the element's attribute information. Simultaneously, the element bitmap and this unique identifier are associated and stored together, facilitating quick and accurate retrieval when the element bitmap is needed later, avoiding the significant computational overhead of real-time rendering and improving the system's rendering efficiency.

[0049] In this embodiment of the application, optionally, before drawing the target brush image one by one on the element canvas based on each pixel of the new element to obtain the element bitmap of the new element, the method further includes: determining the canvas coordinates of each pixel of the new element on the element canvas; performing curve smoothing processing on each pixel of the new element to correct the canvas coordinates of each pixel of the new element, and performing pixel-level subdivision of the drawing path of the new element based on the canvas coordinates to obtain the drawing point coordinates of the new element; The step of drawing the target brush image one by one on the element canvas based on each pixel of the new element to obtain the element bitmap of the new element includes: offsetting the coordinates of the drawing points according to the drawing offset corresponding to the target brush image, and drawing the target brush image one by one on the element canvas according to the offset drawing point coordinates to obtain the element bitmap of the new element.

[0050] In this embodiment, when drawing the element bitmap, the canvas coordinates of each pixel of the new element on the element canvas can be determined first. Then, these pixels are smoothed by curve processing to correct inaccurate canvas coordinates that may be caused by various reasons (such as drawing mode, initial calculation, etc.), ensuring a smooth drawing path and making the coordinates more consistent with the actual drawing requirements. Afterwards, based on the corrected canvas coordinates, the drawing path of the new element is subdivided at the pixel level to ensure continuous strokes without gaps. By smoothing the curve and subdividing the drawing path at the pixel level, the accuracy of the coordinates of the drawing points of the new element is improved, allowing the drawn element bitmap to present the shape and outline of the new element more finely and realistically, avoiding problems such as jagged edges and broken lines caused by inaccurate coordinates, thus improving the drawing quality. In addition, when drawing the element bitmap, considering that the target brush image may be offset during actual drawing, the coordinates of the previously obtained drawing points are offset according to the drawing offset corresponding to the target brush image. Introducing a drawing offset to adjust the coordinates of the drawing points better adapts to the drawing characteristics of different target brush images. This ensures that the brush images are presented in the expected position and manner during drawing, enhancing the flexibility and diversity of element drawing and meeting the needs of different drawing modes and styles. Then, based on the offset drawing point coordinates, the target brush images are drawn one by one on the element canvas, ultimately completing the element bitmap drawing of the new element. For example, each point can be drawn with a brush image at a position of (x - lineWidth × 1.65, y - lineWidth × 1.65) and a size of lineWidth × 3.3.

[0051] Optionally, in this embodiment of the application, the method further includes: acquiring transformation operation data for any drawn element, wherein the transformation operation data includes at least one of translation, scaling, and rotation; performing transformation calculations on the absolute coordinates of the elements sequentially according to the order of the transformation operation data, updating the absolute coordinates of the elements in the element attribute information of any drawn element based on the calculation results, and adding the transformation operation data to the element attribute information of any drawn element.

[0052] In this embodiment, a transform rectangle calculation mechanism (transRect) is used to efficiently process various transformations (such as translation, scaling, and rotation) of drawn elements (e.g., doodles, geometric shapes, eraser trajectories) on the canvas. The core idea is to transform complex path point coordinate transformations into simple rectangle transformation calculations, thereby simplifying the calculation process and improving rendering efficiency. Specifically, the transformation operation data applied to any drawn element is acquired. This data covers at least one of the following operation types: translation (changing the element's position in the virtual canvas), scaling (adjusting the element's size), and rotation (changing the element's rotation angle). After acquiring this transformation operation data, transformation calculations are performed sequentially on the absolute coordinates of the drawn element according to the order in which the data was input. For example, if a translation operation is performed before a scaling operation, the translated coordinates are calculated first based on the translation parameters, and then the scaling coordinates are calculated based on these translated coordinates. After the calculation is completed, the absolute coordinates of the drawn element recorded in the element attribute information are updated based on the new coordinate results. Simultaneously, the acquired transformation operation data is also added to the element attribute information of the drawn element, enabling subsequent querying and tracing of the element's transformation history. This helps restore a specific state or understand the element's evolution process when needed, enhancing the traceability and controllability of the system's element management. In traditional rendering processes, each path point of a drawn element (such as each stroke point in a doodle) requires complex transformation calculations (such as translation, scaling, and rotation). These calculations involve a large number of mathematical operations, and the computational complexity increases significantly, especially when there are many elements. By introducing the transform rectangle (transRect), transformation calculations are performed only on a simple rectangular area, instead of calculating each path point individually. The computational complexity of rectangle transformations is far lower than that of path point transformations, typically requiring only simple geometric transformations (such as translation and scaling). The transform rectangle (transRect) simplifies the subsequent rendering process and improves rendering efficiency by transforming complex path point coordinate transformations into simple rectangle transformation calculations.

[0053] In a specific application scenario, the transformation operation transRect is calculated using the following process: 1. Initialize the current transformation values: x=0, y=0, scaleX=1, scaleY=1.

[0054] 2. Iterate through the transformation operation data array and accumulate transformations: For each translation transformation (type='trans'): Calculate the translation amount relative to the origin (originX, originY).

[0055] Update the current translation and scaling factors.

[0056] For each scaling transformation (type='scale'): Calculate the scaling factor based on the transformation origin (originX, originY).

[0057] Update the current scaling factor.

[0058] For other transformation operations (such as rotation, erasure, etc.), the corresponding cumulative calculation is performed according to the specific operation type.

[0059] 3. Calculate the transformed rectangular region (transRect) based on the accumulated transformation values.

[0060] The transformation calculation uses originX and originY as the origin points to ensure that the scaling operation is performed around the specified points, rather than the canvas origin.

[0061] Furthermore, as a refinement and extension of the specific implementation of the above embodiments, and to fully illustrate the specific implementation process of this embodiment, another rendering method for a virtual canvas of unlimited size is provided, such as... Figure 2A As shown, the method includes: Step 201: In response to a viewport change operation on the virtual canvas, obtain the viewport offset corresponding to the viewport change operation; determine the current absolute coordinates of the current viewport in the virtual canvas based on the viewport absolute coordinates before the viewport change operation and the viewport offset.

[0062] In this embodiment, when a user performs a viewport manipulation operation on the virtual canvas (such as scrolling, zooming, or other operations that change the visible area), the system responds to this operation and obtains the corresponding viewport offset. This offset reflects the degree of change in the viewport's position or size. Combining the absolute viewport coordinates before the viewport manipulation operation (i.e., the accurate position coordinates of the viewport in the virtual canvas before the manipulation) and the obtained viewport offset, the system determines the current absolute viewport coordinates in the virtual canvas through simple coordinate calculations (such as adding coordinates or adjusting coordinates according to the zoom level), thus clarifying the specific position of the user's currently visible area in the virtual canvas.

[0063] Step 202: Determine the absolute coordinates of the element rendering area of ​​the current viewport in the virtual canvas based on the absolute coordinates of the current viewport and the size of the buffer area; identify overlapping areas based on the absolute coordinates of the element rendering area and the absolute coordinates of each drawn element in the virtual canvas; determine the drawn elements with overlapping areas as target elements falling into the current viewport.

[0064] In this embodiment, the absolute coordinates of the element rendering area in the virtual canvas are determined based on the current viewport's absolute coordinates and a pre-defined buffer area size (the buffer area is an additional area set up to preload elements that may enter the viewport when the viewport changes, avoiding issues such as screen flickering). This area includes not only the visible part of the current viewport but also the buffer area. Then, the absolute coordinates of the element rendering area are compared with the absolute coordinates of each drawn element in the virtual canvas to identify overlapping areas. By determining whether the coordinate ranges overlap, the drawn elements with overlapping areas are identified as target elements falling into the current viewport, which are the elements that need to be rendered and displayed in the viewport later. The buffer area setting allows elements that may enter the viewport to be preloaded during viewport changes, reducing screen flickering and stuttering. This provides a smoother and more comfortable visual experience for users when scrolling or zooming the canvas, enhancing user satisfaction with the virtual canvas interaction.

[0065] Step 203: Obtain the unique identifier of the target element corresponding to the target element, and query the unique identifier of the target element in the bitmap cache pool; if the unique identifier of the target element is contained in the bitmap cache pool, obtain the element bitmap corresponding to the unique identifier of the target element as the target element bitmap; if the unique identifier of the target element is not contained in the bitmap cache pool, return to the step of creating the element canvas of the new element based on the bounding box size of the new element, perform off-screen pre-rendering on the target element, and store the obtained target element bitmap in the bitmap cache pool.

[0066] In this embodiment, a unique identifier for each target element is obtained. This unique identifier is used to distinguish different drawn elements. The unique identifier of the target element is queried in the bitmap cache pool (an area used to store off-screen pre-rendered element bitmaps to improve rendering efficiency). If the bitmap cache pool contains the identifier, it means that the target element has already undergone off-screen pre-rendering and the corresponding element bitmap has been stored. In this case, the element bitmap is directly obtained as the target element bitmap. If the bitmap cache pool does not contain the identifier, it means that the target element has not yet undergone off-screen pre-rendering. In this case, the process returns to the step of creating an element canvas for a new element (i.e., the step in the previously mentioned off-screen pre-rendering process), performs off-screen pre-rendering on the target element, and stores the rendered target element bitmap in the bitmap cache pool for later use. By using off-screen pre-rendering and the bitmap cache pool, for elements that have already been rendered, when they need to be displayed again, the element bitmap can be directly obtained from the cache pool for rendering, avoiding repeated rendering calculations.

[0067] Step 204: Clear the current display content of the virtual canvas, render the element rendering area based on the target element bitmap, and display the virtual canvas for the current viewport.

[0068] In this embodiment, the currently displayed content of the virtual canvas is cleared, removing previously displayed content that may no longer be in the current viewport or needs updating. Then, based on the acquired target element bitmap, rendering is performed on the element rendering area, accurately drawing the target element in the corresponding position. Finally, the virtual canvas is displayed for the current viewport, presenting the rendered content to the user, allowing the user to see the screen after operations are performed according to the current viewport.

[0069] Additionally, it's important to note that when rendering an element's rendering area, if only a portion of the target element's absolute coordinates falls within the rendering area, then only that portion of the target element's bitmap should be rendered. This avoids wasting resources by rendering an excessively large area. Alternatively, to achieve a fast response to canvas scrolling, the entire content of the target element can be rendered, allowing for a quick response when the user interacts with the element to view the complete target.

[0070] Optionally, in this embodiment of the application, before determining the absolute coordinates of the element rendering area of ​​the current viewport in the virtual canvas based on the absolute coordinates of the current viewport and the size of the buffer area, the method further includes: determining the size of the buffer area based on the performance of the current device.

[0071] In this embodiment, the hardware performance indicators of the currently running device can also be detected and evaluated. These performance indicators include, but are not limited to, CPU processing power, GPU rendering power, and memory size. Based on a comprehensive consideration of these performance indicators, a suitable buffer area size is determined. For example, for devices with powerful performance and high processing power, a relatively large buffer area size can be set. This allows more elements that may enter the viewport to be loaded in advance when the viewport changes, further reducing screen flickering and stuttering, and providing a smoother interactive experience. Conversely, for devices with weaker performance, to avoid excessive memory and computing resources being consumed due to an excessively large buffer area, resulting in slow system operation or even stuttering, a relatively small buffer area size will be set, ensuring a certain level of smoothness while making reasonable use of device resources.

[0072] like Figure 2BAs shown in the rendering example of a virtual canvas of unlimited size, the user scrolls the page using the mouse wheel, touch swipes, etc., triggering pagination navigation `handlePageOffset(offset)` or relative scrolling `pageScroll(dy)`. `offset` and `dy` can be understood as "viewport offset". The Shark engine converts the user's "relative scrolling intention" or "pagination intention" into an "absolute page offset (pageOffset)". Debouncing: `setTimeout(rerenderDataRec, 100ms)` is used when scrolling events are very frequent. If rendering is triggered immediately with each scroll, performance will be very poor. Therefore, Shark uses a "debouncing" strategy. When the user scrolls quickly, `rerenderDataRec` is not executed immediately, but waits until the user "stops scrolling for a period of time (here, 100ms)" before triggering `rerenderDataRec`. This avoids unnecessary repeated rendering and improves performance. `rerenderDataRec()` can be understood as a function / module that "re-renders data records". It receives the `pageOffset` processed by Shark and first iterates through all elements that need to be rendered, calculating (or reusing) the `transRect` for each element. `transRect` can be understood as the element's "transformation rectangle" (such as position, size, scaling, and opacity), used to describe how the element should be presented on the page under the current `pageOffset`. If the element's `transRect` has been calculated before and this scrolling doesn't change it, it's reused directly without recalculation. After calculating the `transRect` of all elements, "viewport clipping" is performed: the `transRect` of each element is compared with the current `pageOffset` to determine if the element is within the "viewport area" (i.e., the screen area currently visible to the user). Only elements "within the viewport" need to be actually rendered on the page; elements outside the viewport can be temporarily ignored to save performance. For elements "within the viewport," the `drawImage` method is ultimately called to draw the image onto the page: `photoCanvas` or `tempCanvas` are off-screen Canvas (element bitmaps), and they are drawn into the final viewport. This allows the user to see the content that should be displayed at the current scroll position on the screen. After a series of calculations and clipping, `rerenderDataRec()` draws the content that should be displayed in the current viewport here, so the user can see the scrolled image.

[0073] like Figure 2CAs shown in the example, in an element bitmap drawing example, Shark (the engine) can be understood as the core engine component of the virtual canvas system, responsible for coordinating and managing the process. Element (e.g., Pen): represents the element component in the system; here, it's an example of a "Pen" element, which is the object being manipulated. preRenderPhotoCanvas can be understood as a module or service responsible for off-screen pre-rendering of the canvas. Viewport (penContext) represents the viewport component displaying the content. Specifically, when the user performs an operation that triggers an event to end drawing, this event is notified to Shark (the engine). After receiving the user's event, Shark (the engine) needs to instruct the Element (e.g., Pen) to perform the pre-rendering operation, so it sends a message to the Element (e.g., Pen) to call the preRenderPhotoCanvas() method. After receiving the pre-rendering instruction, the Element (e.g., Pen) first needs to calculate the rectContainer (which can be understood as the "container rectangle," i.e., the absolute coordinates of the element). Based on the calculated rectContainer, preRenderPhotoCanvas generates an element canvas photoCanvas and indicates that this is an off-screen bitmap. Off-screen bitmaps are bitmaps that are not directly displayed on the screen but are pre-rendered in memory for subsequent compositing, display optimization, and other purposes. The generated photoCanvas needs to be stored for later use. Here, the photoCanvas is written to a photoCanvasMap, using globalId as the key for indexing. photoCanvasMap can be understood as a bitmap cache pool, and globalId is a unique identifier for each canvas. After preRenderPhotoCanvas completes canvas generation and caching, it can calculate a transRect (which can be understood as a "transformed rectangle"). This calculation requires applying ctrls to accumulate transformations. ctrls represents the transformation set, storing all transformation operation data. Accumulated transformations mean that all previous transformations (such as translation, scaling, rotation, etc.) are accumulated and calculated to obtain the final transRect. Then, this calculation result is returned to Shark (the engine). After receiving the transRect, Shark (the engine) can instruct the viewport (penContext) to draw the image. Specifically, the `drawImage` method is called, with the parameters being the `photoCanvas` to be drawn on, and the drawing coordinates `transRect.x`, `transRect.y`, and `pageOffset`. `pageOffset` represents the page offset; subtracting it is for coordinate correction to ensure the image is drawn in the correct position.

[0074] Furthermore, as Figure 1 In terms of specific implementation, this application provides a rendering device for a virtual canvas of any size, such as... Figure 3 As shown, the device includes: The viewport determination module is used to determine the absolute coordinates of the current viewport in the virtual canvas in response to a viewport change operation on the virtual canvas. The element determination module is used to determine the target element that falls into the current viewport among the drawn elements based on the absolute coordinates of each drawn element in the virtual canvas and the absolute coordinates of the current viewport. The canvas rendering module is used to obtain the target element bitmap of the target element obtained through off-screen pre-rendering, and to perform virtual canvas rendering for the current viewport based on the target element bitmap.

[0075] Optionally, the device further includes: an attribute information storage module, used for: When a new element is created, obtain the absolute coordinates of the drawing viewport that created the new element, and determine the absolute coordinates of the new element based on the absolute coordinates of the drawing viewport and the relative coordinates of the new element in the virtual canvas. The element attribute information of the new element is determined based on the absolute coordinates of the element, and the element attribute information of the new element is stored in the attribute database as a drawn element.

[0076] Optionally, the attribute information storage module is specifically used for: Iterate through the relative coordinates of each pixel of the new element in the drawing viewport, and determine the absolute coordinates of each pixel of the new element in the virtual canvas based on the absolute coordinates of the drawing viewport and the relative coordinates of the pixels. Based on the absolute coordinates of each pixel of the new element, construct the minimum bounding box of the new element, and determine the absolute coordinates of the new element based on the absolute coordinates of the bounding box of the minimum bounding box. The element attribute information of the new element is determined based on the absolute coordinates of the element.

[0077] Optionally, the attribute information storage module is specifically used for: The target brush width is determined based on the vertex coordinates of the minimum bounding box and the drawing mode of the new element. The minimum bounding box is expanded according to the target brush width to update the vertex coordinates of the minimum bounding box, and the absolute coordinates of the bounding box are determined according to the updated vertex coordinates.

[0078] Optionally, the apparatus further includes: a bitmap pre-rendering module, used for: The bounding box size of the new element is determined based on the absolute coordinates of the bounding box, and the element canvas of the new element is created based on the bounding box size of the new element; The target brush image is determined according to the drawing mode of the new element, and the target brush image is drawn one by one on the element canvas based on each pixel of the new element to obtain the element bitmap of the new element, so as to realize the off-screen pre-rendering of the new element. Generate a unique identifier for the element bitmap of the new element, write the unique identifier into the element attribute information, and associate and store the element bitmap of the new element with the unique identifier.

[0079] Optionally, the bitmap pre-rendering module is further configured to: Determine the canvas coordinates of each pixel of the new element on the element's canvas; Curve smoothing is performed on each pixel of the new element to correct the canvas coordinates of each pixel of the new element, and the drawing path of the new element is subdivided into pixels based on the canvas coordinates to obtain the drawing point coordinates of the new element. Based on the drawing offset corresponding to the target brush image, the coordinates of the drawing points are offset, and the target brush image is drawn one by one on the element canvas according to the offset drawing point coordinates to obtain the element bitmap of the new element.

[0080] Optionally, the attribute information storage module is specifically used for: The element bitmap of the new element is associated with the unique identifier and stored in the bitmap cache pool; The element determination module is specifically used for: Obtain the unique identifier of the target element corresponding to the target element, and query the unique identifier of the target element in the bitmap cache pool; If the bitmap cache pool contains the unique identifier of the target element, then the bitmap corresponding to the unique identifier of the target element is obtained as the target element bitmap; If the bitmap cache pool does not contain the unique identifier of the target element, then return to the step of creating the element canvas of the new element based on the bounding box size of the new element, perform off-screen pre-rendering on the target element, and store the obtained target element bitmap in the bitmap cache pool.

[0081] Optionally, the attribute information storage module is further configured to: Obtain transformation operation data for any drawn element, wherein the transformation operation data includes at least one of translation, scaling, and rotation; Based on the order of the transformation operation data, the absolute coordinates of the elements are transformed and calculated sequentially. The absolute coordinates of the elements in the element attribute information of any drawn element are updated based on the calculation results. The transformation operation data is then added to the element attribute information of any drawn element.

[0082] Optionally, the viewport determination module is specifically used for: In response to a viewport change operation on the virtual canvas, the viewport offset corresponding to the viewport change operation is obtained; based on the viewport absolute coordinates before the viewport change operation and the viewport offset, the current viewport absolute coordinates in the virtual canvas are determined.

[0083] Optionally, the element determination module is further configured to: Based on the absolute coordinates of the current viewport and the size of the buffer area, determine the absolute coordinates of the element rendering area of ​​the current viewport in the virtual canvas; The overlapping area is identified based on the absolute coordinates of the element rendering area and the absolute coordinates of each drawn element in the virtual canvas; the drawn elements with overlapping areas are identified as target elements falling into the current viewport. The canvas rendering module is also used for: Clear the current display content of the virtual canvas, render the element rendering area based on the target element bitmap, and display the virtual canvas for the current viewport.

[0084] Optionally, the element determination module is further configured to: The size of the buffer zone is determined based on the performance of the current equipment.

[0085] It should be noted that other corresponding descriptions of the functional units involved in the rendering apparatus for a virtual canvas of unlimited size provided in this application embodiment can be found in the following references. Figure 1 The corresponding descriptions in the method shown in Figure 2 will not be repeated here.

[0086] This application also provides a computer device, which may specifically be a personal computer, a server, a network device, etc. Figure 4As shown, the computer device includes a bus, a processor, memory, and a communication interface, and may also include an input / output interface and a display device. The processor provides computing and control capabilities. The memory includes a non-volatile storage medium and internal memory. The non-volatile storage medium stores an operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium. The database stores location information. The network interface allows communication with external terminals via a network connection. When the computer program is executed by the processor, it implements the steps in the various method embodiments.

[0087] Those skilled in the art will understand that Figure 4 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the computer device to which the present application is applied. Specific computer devices may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0088] In one embodiment, a computer-readable storage medium is provided, which may be non-volatile or volatile, having stored thereon a computer program that, when executed by a processor, implements the steps in the above method embodiments.

[0089] In one embodiment, a computer program product is provided, including a computer program that, when executed by a processor, implements the steps in the above method embodiments.

[0090] It should be noted that the user personal information involved in the embodiments of this application is all authorized (with the knowledge and consent) by the relevant parties or fully authorized by all parties, and the executing entity can obtain it through various legal and compliant means. The collection, storage, use, processing, transmission, provision, and disclosure of the information, data, and signals involved all comply with the relevant laws and regulations of the relevant countries and regions, and do not violate public order and good morals. It should be noted that if any software tools or components other than those of this company appear in the embodiments of this application, they are merely illustrative examples and do not represent actual use.

[0091] 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 computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments described above. Any references to memory, databases, or other media used in the embodiments provided in this application can include at least one of non-volatile and volatile memory. Non-volatile memory can include read-only memory (ROM), magnetic tape, floppy disk, flash memory, optical memory, high-density embedded non-volatile memory, resistive random access memory (ReRAM), magnetic random access memory (MRAM), ferroelectric random access memory (FRAM), phase change memory (PCM), graphene memory, etc. Volatile memory can include random access memory (RAM) or external cache memory, etc. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM). The databases involved in the embodiments provided in this application may include at least one type of relational database and non-relational database. Non-relational databases may include, but are not limited to, blockchain-based distributed databases. The processors involved in the embodiments provided in this application may be general-purpose processors, graphics processors, digital signal processors, programmable logic devices, quantum computing-based data processing logic devices, etc., and are not limited to these.

[0092] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0093] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of this patent application. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this application should be determined by the appended claims.

Claims

1. A rendering method for a virtual canvas of unlimited size, characterized in that, The method includes: In response to a viewport change operation on the virtual canvas, determine the current absolute coordinates of the current viewport within the virtual canvas; Based on the absolute coordinates of each drawn element in the virtual canvas and the absolute coordinates of the current viewport, determine the target element among the drawn elements that falls into the current viewport; Obtain the target element bitmap of the target element obtained through off-screen pre-rendering, and perform virtual canvas rendering for the current viewport based on the target element bitmap.

2. The method according to claim 1, characterized in that, The method further includes: When a new element is created, obtain the absolute coordinates of the drawing viewport that created the new element, and determine the absolute coordinates of the new element based on the absolute coordinates of the drawing viewport and the relative coordinates of the new element in the virtual canvas. The element attribute information of the new element is determined based on the absolute coordinates of the element, and the element attribute information of the new element is stored in the attribute database as a drawn element.

3. The method according to claim 2, characterized in that, Determining the absolute coordinates of the new element based on the absolute coordinates of the drawing viewport and the relative coordinates of the new element in the virtual canvas includes: Iterate through the relative coordinates of each pixel of the new element in the drawing viewport, and determine the absolute coordinates of each pixel of the new element in the virtual canvas based on the absolute coordinates of the drawing viewport and the relative coordinates of the pixels. Based on the absolute coordinates of each pixel of the new element, construct the minimum bounding box of the new element, and determine the absolute coordinates of the new element based on the absolute coordinates of the bounding box of the minimum bounding box. The element attribute information of the new element is determined based on the absolute coordinates of the element.

4. The method according to claim 3, characterized in that, The step of using the absolute coordinates of the bounding box based on the minimum bounding box includes: The target brush width is determined based on the vertex coordinates of the minimum bounding box and the drawing mode of the new element. The minimum bounding box is expanded according to the target brush width to update the vertex coordinates of the minimum bounding box, and the absolute coordinates of the bounding box are determined according to the updated vertex coordinates.

5. The method according to claim 3, characterized in that, After determining the element attribute information of the new element, the method further includes: The bounding box size of the new element is determined based on the absolute coordinates of the bounding box, and the element canvas of the new element is created based on the bounding box size of the new element; The target brush image is determined according to the drawing mode of the new element, and the target brush image is drawn one by one on the element canvas based on each pixel of the new element to obtain the element bitmap of the new element, so as to realize the off-screen pre-rendering of the new element. Generate a unique identifier for the element bitmap of the new element, write the unique identifier into the element attribute information, and associate and store the element bitmap of the new element with the unique identifier.

6. The method according to claim 5, characterized in that, Before drawing the target brush image pixel by pixel on the element canvas to obtain the element bitmap of the new element, the method further includes: Determine the canvas coordinates of each pixel of the new element on the element's canvas; Curve smoothing is performed on each pixel of the new element to correct the canvas coordinates of each pixel of the new element, and the drawing path of the new element is subdivided into pixels based on the canvas coordinates to obtain the drawing point coordinates of the new element. The step of drawing the target brush image pixel by pixel on the element canvas to obtain the element bitmap of the new element includes: Based on the drawing offset corresponding to the target brush image, the coordinates of the drawing points are offset, and the target brush image is drawn one by one on the element canvas according to the offset drawing point coordinates to obtain the element bitmap of the new element.

7. The method according to claim 5, characterized in that, The step of associating and storing the element bitmap of the new element with the unique identifier includes: The element bitmap of the new element is associated with the unique identifier and stored in the bitmap cache pool; The step of obtaining the target element bitmap of the target element obtained through off-screen pre-rendering includes: Obtain the unique identifier of the target element corresponding to the target element, and query the unique identifier of the target element in the bitmap cache pool; If the bitmap cache pool contains the unique identifier of the target element, then the bitmap corresponding to the unique identifier of the target element is obtained as the target element bitmap; If the bitmap cache pool does not contain the unique identifier of the target element, then return to the step of creating the element canvas of the new element based on the bounding box size of the new element, perform off-screen pre-rendering on the target element, and store the obtained target element bitmap in the bitmap cache pool.

8. The method according to claim 3, characterized in that, The method further includes: Obtain transformation operation data for any drawn element, wherein the transformation operation data includes at least one of translation, scaling, and rotation; Based on the order of the transformation operation data, the absolute coordinates of the elements are transformed and calculated sequentially. The absolute coordinates of the elements in the element attribute information of any drawn element are updated based on the calculation results. The transformation operation data is then added to the element attribute information of any drawn element.

9. The method according to claim 1, characterized in that, The step of determining the absolute coordinates of the current viewport within the virtual canvas in response to a viewport change operation on the virtual canvas includes: In response to a viewport change operation on the virtual canvas, the viewport offset corresponding to the viewport change operation is obtained; based on the viewport absolute coordinates before the viewport change operation and the viewport offset, the current viewport absolute coordinates in the virtual canvas are determined.

10. The method according to any one of claims 1 to 9, characterized in that, The step of determining the target element falling into the current viewport among the drawn elements based on the absolute coordinates of each drawn element in the virtual canvas and the absolute coordinates of the current viewport includes: Based on the absolute coordinates of the current viewport and the size of the buffer area, determine the absolute coordinates of the element rendering area of ​​the current viewport in the virtual canvas; The overlapping area is identified based on the absolute coordinates of the element rendering area and the absolute coordinates of each drawn element in the virtual canvas; the drawn elements with overlapping areas are identified as target elements falling into the current viewport. The virtual canvas rendering based on the target element bitmap for the current viewport includes: Clear the current display content of the virtual canvas, render the element rendering area based on the target element bitmap, and display the virtual canvas for the current viewport.

11. The method according to claim 10, characterized in that, Before determining the absolute coordinates of the element rendering area in the virtual canvas based on the current viewport absolute coordinates and the buffer area size, the method further includes: The size of the buffer area is determined based on the performance of the current equipment.

12. A rendering device for a virtual canvas of unlimited size, characterized in that, The device includes: The viewport determination module is used to determine the absolute coordinates of the current viewport in the virtual canvas in response to a viewport change operation on the virtual canvas. The element determination module is used to determine the target element that falls into the current viewport among the drawn elements based on the absolute coordinates of each drawn element in the virtual canvas and the absolute coordinates of the current viewport. The canvas rendering module is used to obtain the target element bitmap of the target element obtained through off-screen pre-rendering, and to perform virtual canvas rendering for the current viewport based on the target element bitmap.

13. A storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the method of any one of claims 1 to 11.

14. A computer device, comprising a storage medium, a processor, and a computer program stored on the storage medium and executable on the processor, characterized in that, When the processor executes the computer program, it implements the method of any one of claims 1 to 11.

Images