A central marking method of an SVG file, a terminal and a computer readable storage medium

Abstract

The application discloses a center marking method of an SVG file, a terminal and a computer readable storage medium. An SVG processing marking system is developed, and a client (such as a web front end) is provided, so that only corresponding SVG files need to be submitted on the client, corresponding configuration parameters are adjusted, the required SVG center marking and corresponding adaptive rectangular processing can be completed, and the processed SVG files can be downloaded or stored.

Description

Technical Field

[0001] This invention belongs to the field of digital coloring, specifically relating to a method for center annotation of SVG files, a terminal, and a computer-readable storage medium. Background Technology

[0002] In number coloring games, SVG (Scalable Vector Graphics) files are used as image carriers. For the paths in the SVG image, suitable rectangles need to be found to place the numbers. For each element in the SVG image, its corresponding adapting rectangle has two requirements: the rectangle must be able to fit completely within the path without overlap or overflow; and the size of the rectangle should be as large as possible to facilitate subsequent filling of the number text.

[0003] Existing methods for filling matrices involve finding the center point of the path using the minimum bounding box of the SVG path element and then scaling it; or processing it manually. These methods have the following drawbacks.

[0004] First, the minimum bounding box of a path may not have its center located inside the path (e.g., a concave polygon). For complex and irregular paths, the bounding box may be too large, making it difficult to calculate the center location.

[0005] Secondly, the center position found using the minimum border method may not be visually centered, and it cannot guarantee that the adapting rectangle will be completely placed inside the path.

[0006] Third, manual annotation yields a more reasonable center position and fitting rectangle, but it requires a significant amount of time to process. Summary of the Invention

[0007] The purpose of this invention is to overcome the technical defects existing in the background art and to provide a method for center annotation of SVG files, a terminal, and a computer-readable storage medium. By developing an SVG processing and annotation system and providing a client (such as a web front-end), the required SVG center annotation and corresponding adaptation rectangle processing can be completed simply by submitting the corresponding SVG file on the client and adjusting the corresponding configuration parameters. The processed SVG file can then be downloaded or stored.

[0008] To solve the technical problem, the technical solution of the present invention is as follows: A method for center annotation in SVG, the method comprising: Rasterize the SVG file to obtain a binarized dataset; The binarized dataset is subjected to adaptation rectangle calculation to obtain the maximum adaptation rectangle data; The maximum fit rectangle data is written into the SVG file and then stored.

[0009] To resolve the issue of SVG file path parsing, users can adjust the image resolution through simple configuration.

[0010] In conventional SVG processing, center positioning is challenging. For complex and irregular paths, the center of the path's minimum bounding box may not be inside the path, resulting in a visually centered position. Conventional minimum bounding box methods can only capture the center of simple paths; manual annotation can solve the problem, but it is time-consuming. Simple elements (rect, circle, ellipse, polygon) and complex elements (path) in SVG images can be quickly parsed and their center points located.

[0011] This method can quickly find the center position of a path in an SVG file and find a suitable rectangle that can be placed inside the path and has the largest size.

[0012] Furthermore, prior to the step of rasterizing the SVG file, the method further includes: Read the submitted SVG file; The SVG file is parsed based on the DOM structure to obtain the elements of the SVG file; the elements of the SVG file include paths; Traverse all paths to obtain all path information of the SVG file, and retrieve the attribute information of the path.

[0013] Furthermore, the path's attribute information includes: starting point information, moving point information, and closing point information.

[0014] Furthermore, through rasterization, each of the paths is converted into binary data to obtain a binary dataset.

[0015] Furthermore, the resolution of the binarized dataset is the same as the resolution of the SVG file.

[0016] Furthermore, the binarized dataset is traversed using the width and height of the SVG file, and the maximum fitting rectangle data corresponding to each path is obtained within the path of the SVG file.

[0017] Furthermore, obtaining the maximum adaptation rectangle data corresponding to each path specifically includes: Create rL, rR, rT, and rB to store the position information of the left, right, top, and bottom edges of the final rectangle; Create a variable `maxArea` to record the area of ​​the largest rectangle; By calculating the edge information obtained by traversing the width and height of the SVG file, it is determined whether the area of ​​the currently traversed rectangle is greater than the area of ​​the largest rectangle recorded by the created maxArea variable, and the left, right, top, and bottom edge information that meet the condition of the largest rectangle is obtained. The left, right, top, and bottom edge information that meets the maximum rectangle condition is the maximum fitting rectangle data.

[0018] Furthermore, writing the maximum adaptation rectangle data into the SVG file and storing it specifically includes: writing the maximum adaptation rectangle data corresponding to each path in the obtained SVG file into the attribute of the path node of the SVG file through a file stream writing method and storing it.

[0019] A terminal, comprising at least: a memory, a communication bus, and a processor, wherein: the memory is used to store a center annotation program for an SVG; the communication bus is used to enable communication between the processor and the memory; and the processor is used to execute the center annotation program for an SVG stored in the memory to implement the steps of the aforementioned center annotation method for an SVG.

[0020] A computer-readable storage medium storing an adjustment program, wherein the center annotation program of the SVG, when executed by a processor, implements the steps of the above-described center annotation method for an SVG.

[0021] Compared with the prior art, the advantages of the present invention are as follows: This invention discloses a method for center annotation in SVG files, a terminal, and a computer-readable storage medium, solving the problem of path parsing in SVG files. Users can adjust the image resolution through simple configuration. In conventional SVG processing, center positioning is difficult. For complex and irregular paths, the center of the path's minimum bounding box may not be inside the path, and it will not be visually centered. Conventional minimum bounding box methods can only obtain the center of simple paths; manual annotation can solve the problem, but it is time-consuming. This method can quickly parse and locate the center point of both simple elements (rectangles, circles, ellipses, polygons) and complex elements (paths) in SVG files. For paths in SVG files, this method can quickly find the center position and locate a suitable rectangle that can be placed inside the path and has the largest possible size. Attached Figure Description

[0022] Figure 1 A flowchart illustrating the central annotation method for SVG files, a terminal, and a computer-readable storage medium according to the present invention; Figure 2 The present invention provides a method for center annotation of SVG files, a terminal, and a computer-readable storage medium. A detailed system block diagram is provided. Detailed Implementation

[0023] The specific implementation of the present invention is described below with reference to embodiments: It should be noted that the structures, proportions, sizes, etc. shown in this specification are only used to complement the content disclosed in the specification for those skilled in the art to understand and read, and are not intended to limit the conditions under which the present invention can be implemented. Any modifications to the structure, changes in the proportions, or adjustments to the size, without affecting the effects and objectives that the present invention can produce, should still fall within the scope of the technical content disclosed in the present invention.

[0024] Furthermore, the terms such as "upper," "lower," "left," "right," "middle," and "one" used in this specification are merely for clarity of description and are not intended to limit the scope of the invention. Any changes or adjustments to their relative relationships, without substantially altering the technical content, should also be considered within the scope of the invention.

[0025] Example 1: like Figure 1 As shown, an SVG center annotation method includes: Rasterize the SVG file to obtain a binarized dataset; Specifically: The SVG processing system 103 in the terminal reads the SVG file, parses the SVG file based on the DOM (Document Object Model) structure, and obtains various elements of the SVG file, such as paths, and obtains the specific attribute information of the paths, including (start point, movement point, and closing point). It iterates through all paths and converts each path into binary data through rasterization. The size of the rasterized image can be the same as the original SVG image; for example, if the original image is 500 pixels wide and 500 pixels high, the resulting binary data will also have a width and height of 500 pixels.

[0026] Since SVG is a vector image, binarized data of different resolutions can be obtained by adjusting the rasterization parameters. This binarized data maintains the same aspect ratio as the original SVG image at each resolution. Excessively high image resolutions can lead to low processing efficiency. The binarized data retains the following characteristics: for example, a pixel position (x, y) inside the corresponding path has a value of 0; outside the corresponding path has a value of 1. Taking a 500x500 image as an example, after processing, 250,000 binarized data points are obtained. Pixels with values ​​of 0 are inside the SVG path, and pixels with values ​​of 1 are outside the SVG path. Here, a two-dimensional array is used to store the binarized data, where n represents the image width and m represents the image height. The final two-dimensional array is represented as data[n][m]. If the path does not conform to the specifications, and an empty path node appears, resulting in an empty array after binarization, an error is reported.

[0027] The adaptation matrix is ​​calculated on the binarized dataset to obtain the maximum fit rectangle data: It can be understood that rL, rR, rT, and rB are created to store the position information of the left, right, top, and bottom edges of the final rectangle; Create a variable `maxArea` to record the area of ​​the largest rectangle; By calculating the edge information obtained by traversing the width and height of the SVG file, it is determined whether the area of ​​the currently traversed rectangle is greater than the area of ​​the largest rectangle recorded by the created maxArea variable, and the left, right, top, and bottom edge information that meet the condition of the largest rectangle is obtained. The left, right, top, and bottom edge information that meets the maximum rectangle condition is the maximum fitting rectangle data.

[0028] Specifically: The processed binary data is read, and the width and height of the SVG file are used for traversal. The largest suitable rectangle that meets the specified conditions is found within the path of the SVG file. In practical applications, dynamic programming algorithms are typically used to improve query efficiency.

[0029] Here, three empty arrays are created – left, right, and height, with size equal to the width of the SVG image. The elements of the right array are initialized with the image width (n from step 101). Then, rL, rR, rT, and rB are created to store the left, right, top, and bottom edges of the final rectangle. After initialization, the image is traversed row by row according to its height (m). In each traversal, the current left edge variable currentLeft is initialized to 0, the current right edge variable currentRight is set to the image width (n), and maxArea is used to store the area of ​​the largest rectangle. During the row-by-row traversal, the height is processed first. If the value of an element in a column is 1, the value at the corresponding index in the height array is incremented by one; otherwise, the value at the corresponding index in the height array is set to 0. Next, the left edge is processed. If the value of an element in a column is 1, the value at the corresponding index in the left array and the currently stored left edge variable currentLeft are compared, and the larger value is assigned to the element at the corresponding index in the left array to update the value of the left edge. If the value of an element in a column is 0, the value of the corresponding index in the left array is set to 0, and the current left edge variable currentLeft is set to the current column plus one, and the calculation is performed again.

[0030] Next, the right edge is processed. If the value of an element in a column is 1, the value at the corresponding index in the `right` array and the currently stored right edge variable `currentRight` are compared. The smaller value is assigned to the element at the corresponding index in the `right` array, thus updating the right edge value. If the value of an element in a column is 0, the value at the corresponding index in the `right` array is set to 0, the current right edge variable `currentRight` is set to the current column, the element at the corresponding index in the `right` array is set to the image width, and the calculation is recalculated.

[0031] At the end of each line of the iteration, the data for the largest rectangular area needs to be updated. The area of ​​the rectangle being calculated is obtained by subtracting the corresponding element of the left array from the corresponding element of the right array, and then multiplying the result by the corresponding element of the height array. If the currently calculated area is greater than the previously saved maxArea, then the value of maxArea is updated, along with the values ​​of rL, rR, rT, and rB. Finally, using this method, the rectangle with the largest area that can be filled into any path can be obtained.

[0032] The maximum fit rectangle data is written into the SVG file and then stored.

[0033] Specifically: In step S102, the maximum adaptation rectangle data corresponding to each path in the SVG image has been obtained. Here, the maximum adaptation rectangle data of the path is written to the attributes of the path node by writing a file stream. Here, the attributes in the SVG file are extended, and the id field is used to write the maximum adaptation rectangle data of the path.

[0034] The final form is as follows: <path id="”x_y_width_height”">path_content< / path> In the id attribute field, use '_' to separate the x-coordinate, y-coordinate, width, and height information for easier subsequent parsing.

[0035] To resolve the issue of SVG file path parsing, users can adjust the image resolution through simple configuration.

[0036] In conventional SVG processing, center positioning is challenging. For complex and irregular paths, the center of the path's minimum bounding box may not be inside the path, resulting in a visually centered position. Conventional minimum bounding box methods can only capture the center of simple paths; manual annotation can solve the problem, but it is time-consuming. Simple elements (rect, circle, ellipse, polygon) and complex elements (path) in SVG images can be quickly parsed and their center points located.

[0037] This method can quickly find the center position of a path in an SVG file and find a suitable rectangle that can be placed inside the path and has the largest size.

[0038] Furthermore, prior to the step of rasterizing the SVG file, the method further includes: Read the submitted SVG file; The SVG file is parsed based on the DOM structure to obtain the elements of the SVG file; the elements of the SVG file include paths; Traverse all paths to obtain all path information of the SVG file, and retrieve the attribute information of the path.

[0039] Furthermore, the path's attribute information includes: starting point information, moving point information, and closing point information.

[0040] Furthermore, through rasterization, each of the paths is converted into binary data to obtain a binary dataset.

[0041] Furthermore, the resolution of the binarized dataset is the same as the resolution of the SVG file.

[0042] Furthermore, the binarized dataset is traversed using the width and height of the SVG file, and the maximum fitting rectangle data corresponding to each path is obtained within the path of the SVG file.

[0043] Furthermore, obtaining the maximum adaptation rectangle data corresponding to each path specifically includes: S1: Create rL, rR, rT, and rB to store the position information of the left, right, top, and bottom edges of the final rectangle.

[0044] S2: Create a variable maxArea to record the area of ​​the largest rectangle.

[0045] S3: By calculating the edge information of the currently traversed rectangle, determine whether the area of ​​the currently traversed rectangle is greater than the area recorded by maxArea previously. This yields the left, right, top, and bottom edge information that meets the condition for the maximum rectangle.

[0046] S4: By modifying the id attribute field in the SVG file, the final rectangle information is written into the SVG file in the following format: <path id="”x_y_width_height”">path_content< / path> The x-coordinate, y-coordinate, width, and height of the largest fitting rectangle are separated by underscores '_' for easier parsing.

[0047] Furthermore, writing the maximum adaptation rectangle data into the SVG file and storing it specifically includes: writing the maximum adaptation rectangle data corresponding to each path in the obtained SVG file into the attribute of the path node of the SVG file through a file stream writing method and storing it.

[0048] Example 2: SVG files are large in size, and in order to achieve the desired display effect, most SVG files have complex paths and structures. Using conventional minimum bounding boxes or manual annotation methods, the final effect or processing time cannot meet the requirements.

[0049] SVG is a language defined using XML, used to describe two-dimensional vectors and vector / raster graphics.

[0050] In view of the above problems, the present invention develops a terminal and a computer-readable storage medium, and provides a client (such as a web application front-end), so that by simply submitting the corresponding SVG file on the client and adjusting the corresponding configuration parameters, the required SVG center annotation and corresponding adaptation rectangle processing can be completed, and the processed SVG file can be downloaded or stored.

[0051] The SVG processing and annotation method provided in this embodiment can be used... Figure 2 The system shown. (Reference) Figure 2As shown, the SVG files that need to be processed can be submitted to the system (terminal) by the user through a client (such as a web application front-end). The files submitted to the system (terminal) need to be generated according to requirements and conform to the W3C Scalable Vector Graphics (SVG) standard so that they can be parsed normally.

[0052] Client 101 is used to retrieve SVG files submitted by the user. It can provide an easy-to-use web page or API interface. Submitted SVG files undergo format validation to ensure they conform to the Scalable Vector Graphics (SVG) 2 standard, thus ensuring they are valid SVG files and preventing non-compliant files from being uploaded to the SVG processing system 103 in the terminal, which could lead to invalid calculations.

[0053] Upon receiving a processing request, the SVG processing system 103 in the terminal reads the SVG file and parses it based on the SVG 2 standard. The SVG processing system 103 has no specific requirements for its implementation platform; it can generally be deployed using cloud servers or function computing servers provided by cloud service providers (such as Alibaba Cloud), or it can be implemented using a self-built server.

[0054] Files processed by the SVG processing system 103 can be stored using the storage solution provided by architecture 102. This architecture can be Alibaba Cloud OSS object storage or AWS cloud S3 bucket; alternatively, it can provide a direct download method via HTTP protocol for users to store locally.

[0055] Terminals can be implemented in various forms. For example, the terminals described in this invention may include mobile terminals such as mobile phones, tablets, laptops, handheld computers, personal digital assistants (PDAs), portable media players (PMPs), navigation devices, wearable devices, smart bracelets, pedometers, etc., as well as fixed terminals such as digital TVs and desktop computers.

[0056] The preferred embodiments of the present invention have been described in detail above. However, the present invention is not limited to the above embodiments. Within the scope of knowledge possessed by those skilled in the art, various changes can be made without departing from the spirit of the present invention.

[0057] Many other changes and modifications can be made without departing from the concept and scope of this invention. It should be understood that this invention is not limited to the specific embodiments, and the scope of this invention is defined by the appended claims.

Claims

1. A method for center annotation in Scalable Vector Graphics (SVG) files, characterized in that, The method includes: Rasterize the SVG file to obtain a binarized dataset; The binarized dataset is subjected to adaptation rectangle calculation to obtain the maximum adaptation rectangle data; The maximum fit rectangle data is written into the SVG file and then stored. The resolution of the binarized dataset is the same as the resolution of the SVG file; For the binarized dataset, the width and height of the SVG file are traversed, and the maximum fitting rectangle data corresponding to each path is obtained within the path of the SVG file; The specific steps of obtaining the maximum adaptation rectangle data corresponding to each path include: Create rL, rR, rT, and rB to store the position information of the left, right, top, and bottom edges of the final rectangle; Create a variable `maxArea` to record the area of ​​the largest rectangle; By calculating the edge information obtained by traversing the width and height of the SVG file, it is determined whether the area of ​​the currently traversed rectangle is greater than the area of ​​the largest rectangle recorded by the created maxArea variable, and the left, right, top, and bottom edge information that meet the condition of the largest rectangle is obtained. The left, right, top, and bottom edge information that meets the maximum rectangle condition is the maximum fitting rectangle data; By performing a rasterization operation, each of the paths in the entire dataset is converted into binary data, resulting in a binary dataset. After writing the maximum adaptation rectangle data into the SVG file and storing it, the specific steps include: writing the maximum adaptation rectangle data corresponding to each path in the obtained SVG file into the attribute of the path node of the SVG file through a file stream writing method and storing it. Prior to the step of rasterizing the SVG file, the method further includes: Read the submitted SVG file; The SVG file is parsed based on the Document Object Model (DOM) structure to obtain the elements of the SVG file; the elements of the SVG file include paths. Traverse all paths to obtain all path information of the SVG file, and retrieve the attribute information of the path; The maximum adapting rectangle satisfies the condition that it is completely located inside the path and does not overlap with the path boundary.

2. The center annotation method for SVG files according to claim 1, characterized in that, The path's attribute information includes: starting point information, moving point information, and closing point information.

3. A terminal, characterized in that, The terminal includes at least: a memory, a communication bus, and a processor, wherein: the memory is used to store the center annotation program of the SVG file; the communication bus is used to realize the connection communication between the processor and the memory; the processor is used to execute the center annotation program of the SVG file stored in the memory to implement the steps of the center annotation method of the SVG file as described in any one of claims 1-2.

4. A computer-readable storage medium storing an adjustment program, wherein when the center annotation program of the SVG file is executed by a processor, it implements the steps of the center annotation method for an SVG file as described in any one of claims 1-2.

Images