Batch updating method for point symbolization Sprite graphs

Abstract

The invention discloses a batch updating method for a point symbolization sprite chart. The batch updating method comprises the following steps: preparing a to-be-updated sprite chart, a json file corresponding to the sprite chart and an icon file needing to be updated to the sprite chart; analyzing the json file, segmenting all icons contained in the original elf diagram into single diagrams, placing the single diagrams and the updated icons in the same directory, traversing the icon files one by one, and obtaining the length and the height of the icon files; calculating the sum of the areas of all the icons according to the lengths and the widths, and performing square extraction on the sum of the areas to obtain an initial total width; classifying and grouping according to the height from small to large to obtain an identifier set pngmap; and generating a new elf chart and a json file corresponding to the new elf chart after traversal is completed. By applying the method, the function of dynamically and quickly increasing and updating the icons according to actual use requirements in the process of using the elf diagram used by the point symbol icons in the web application program is realized.

Description

Technical Field

[0001] The present invention belongs to the technical field of geographic information, and relates to a method for batch updating of point symbolized sprite images, and specifically to a technical method for dynamically updating symbol icons in sprite images used for symbolizing point data in the process of making and arranging electronic maps. Background Art

[0002] Sprites are multiple small images stitched together in one image, where all small icons or graphic elements are merged into one large image file. This large image file is usually a rectangle that contains all the small icons, which are arranged in a row or column, and different small icons are separated by appropriate intervals or margins. Its working principle is to set this large image file as the background of an element through the CSS background-image property. When using it, use the CSS background-position property to specify which small icons are displayed in the element and their position in the large image file.

[0003] It is widely used in Internet icon display functions. In the field of geographic information, it is usually used for the symbolic display of point data in the process of making electronic maps in software such as SupperMap and MapBox. Its advantages mainly include:

[0004] 1. Reduced HTTP requests: Merging multiple image elements into one file reduces the HTTP request for each image, thereby reducing page loading time.

[0005] 2. Improve performance: Loading one large image file at a time is more efficient than loading smaller image files multiple times, especially on mobile devices or with slow network connections.

[0006] 3. Save bandwidth: Reduce unnecessary network traffic and help reduce bandwidth costs.

[0007] 4. Simplify CSS: By using a single background image and background position properties, you can reduce the complexity of the CSS code.

[0008] 5. Easy to manage: All icons are contained in one file, which is easier to manage and maintain.

[0009] However, in the prior art, the disadvantage of the sprite image is that modifying or adding a new icon may require editing the entire sprite image, and the spacing and position between the icons must be carefully handled, which is more complicated to handle manually. In addition, if a large number of icons are updated, the manual processing is complicated and the generated sprite image is less beautiful and practical. Summary of the invention

[0010] In order to overcome the shortcomings of the above-mentioned prior art, the purpose of the present invention is to provide a method for batch updating of dot-symbolized sprite images (Sprite images), which can realize dynamic batch rapid updating of sprite images without manual processing when sprite images need to be updated, and can generate new sprite images with beautiful appearance.

[0011] In order to achieve the above object, the technical solution adopted by the present invention is:

[0012] A method for batch updating of dot symbolized sprite images (Sprite images), characterized in that:

[0013] Step 1: Prepare the sprite image to be updated and its corresponding json file, and the icon file to be updated;

[0014] Step 2: The json file of the sprite image contains the size of the image and the two-dimensional coordinate information. Parse it, split all the icons contained in the original sprite image into single icons according to the coordinates and width and height, and store them in the specified directory;

[0015] Step 3: Put the icon to be updated in the same directory as the icon after splitting in step 2, traverse the icon files in the directory one by one, calculate the initial width of the new sprite image and the png_map set sorted from small to large according to the weight coefficient of the icon height;

[0016] Step 4. According to the png_map set obtained in step 3, traverse the image information in the list corresponding to the key value in the order of key value. If the width of the current splicing position plus the current image width is less than initial_width, directly splice it into the result sprite map. If the width of the current splicing position plus the current image width is greater than initial_width, splice it into the result sprite map and set initial_width to the splicing position width plus the width of the current splicing icon. After that, the splicing position is reset to zero, and the height of the splicing position is added to the height of the current splicing image.

[0017] Step 5. Record the size and position of each stitched picture, organize them into corresponding structures, output them into json format data, and finally output new sprites and json files in the specified directory.

[0018] In step 3, the initial width of the new sprite image and the png_map set identified by sorting from small to large according to the weight coefficient of the icon height are calculated. The calculation steps are as follows:

[0019] 3-1. Calculate the total area of ​​all icons by multiplying the width and height and summing them up. Then square total_area and round it up to get the initial total width initial_width.

[0020] 3-2. Sort the icons by height from small to large, and group them to obtain a set png_map of image information lists whose keys are heights and values ​​are corresponding key value heights.

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

[0022] 1. Sprite images are widely used in WEB applications. They are effective web page optimization technologies that can improve web page performance and user experience by reducing HTTP requests and optimizing image loading. However, their own principles make it difficult to add a single icon. The present invention can quickly update and generate new sprite images when updating icons of different sizes in batches, thus reducing the time for manual processing.

[0023] 2. The algorithm provided by the present invention is not strongly dependent on programming languages, can be adapted to various programming languages, and does not rely on other third-party platform toolkits.

[0024] 3. The present invention provides a graphic merging idea, which can merge batches of pictures into one picture to generate a picture with a relatively appropriate width and height and relatively beautiful appearance. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] Figure 1 This is a flowchart of the execution of the sprite image update algorithm of the present invention.

[0026] Figure 2 The data structure definition in the json file of the target image for the algorithm to run the operation.

[0027] Figure 3 This is the implementation logic of the picture cropping algorithm of the present invention.

[0028] Figure 4 This is the implementation logic of the picture stitching algorithm of the present invention. DETAILED DESCRIPTION

[0029] The present invention will be further described below with reference to the accompanying drawings, i.e., embodiments.

[0030] like Figure 1 , as a flowchart of the entire sprite image update algorithm. The steps are divided into five steps: Step 1, provide the sprite image to be updated: sprite.png and its corresponding json: sprite.json and the icon file to be updated;

[0031] Step 2: Split the original sprite image according to the json data, such as Figure 2 The method written in

[0032] {"arrowLeft":{ / / icon file name;

[0033] "pixelRatio":1, / / resolution level;

[0034] "width":16, / / width (pixels);

[0035] "height":16, / / height (pixels);

[0036] "x": 44, / / x-axis position of the sprite (pixels);

[0037] "y": 11 / / y-axis position of the sprite (pixels);

[0038] }}.

[0039] Read the original json file, get the specific location of each icon, crop the original sprite according to its x, y coordinates, and place the cropped single icon and the updated icon in the same specified directory;

[0040] Step 3, in the directory where the cropped icons are stored in step 2, traverse the files one by one, record the width and height of each icon file, and calculate the key-value pair set of png_map and the initial width initial_width of the new sprite. The specific operation process is as follows Figure 3 ;

[0041] 3-1 The initial_width value is calculated by multiplying the width and height and summing up the total area of ​​all icons, total_area, and then taking the square root of total_area and rounding it up.

[0042] 3-2png_map key-value pair set is based on the data of sorting and grouping the traversed icons in ascending order of height as key, and the value is a list of image information corresponding to the key value height;

[0043] Step 4: Set the initial values ​​of the width of the stitching position temp_width, the height of the current image temp_height, and the current stitching height top to 0, and set the initial value of the final width source_width to initial_width

[0044] According to the png_map set obtained in step 3, traverse the image list corresponding to the height key value in png_map one by one from small to large:

[0045] 4-1 If the width of the splicing position temp_width plus the width of the current image is less than initial_width, it is directly spliced ​​into the result sprite map, temp_width is added to the current image width value, temp_height is set to the height value of the current image, and the traversal continues;

[0046] 4-2 If the width of temp_width plus the width of the current image is greater than initial_width, the source_width value takes the maximum value of initial_width and temp_width, and temp_width is initialized to 0, and the top value is accumulated by temp_width, and then the image is spliced ​​into the sprite map, temp_width is accumulated by the current image width value, and temp_height is set to the height value of the current image, and the traversal continues;

[0047] like Figure 4 As shown,

[0048] Sum the areas of all icons and then take the square root to get the initial width Initial_Width = 26;

[0049] Initial_Width=24, the total width of the first two icons is less than 24, so they are directly spliced ​​and the splicing position is moved back. However, when the third icon is spliced ​​in, the width exceeds 24, so it is spliced, but the splicing position starts in a new row, and the height is determined by the last spliced ​​icon plus the current row height;

[0050] Combine 4-1 and 4-2 to regenerate and update the overall logic for the entire sprite graph.

[0051] Step 5: Organize the size and position of each spliced ​​image recorded in step 4 into a corresponding structure, output it into json format data, and finally output the new sprite image and json file in the specified directory.

Claims

1. A method for batch updating of dot symbolized sprite images (‌Sprite images), characterized in that: Step 1: Prepare the sprite image to be updated and its corresponding json file, and the icon file to be updated; Step 2: The json file of the sprite image contains the size of the image and the two-dimensional coordinate information. Parse it, split all the icons contained in the original sprite image into single icons according to the coordinates and width and height, and store them in the specified directory; Step 3: Put the icon to be updated in the same directory as the icon after splitting in step 2, traverse the icon files in the directory one by one, calculate the initial width of the new sprite image and the png_map set sorted from small to large according to the weight coefficient of the icon height; Step 4. According to the png_map set obtained in step 3, traverse the image information in the list corresponding to the key value in the order of the key value. If the width of the current splicing position plus the current image width is less than initial_width, directly splice it into the result sprite map. If the width of the current splicing position plus the current image width is greater than initial_width, splice it into the result sprite map and set initial_width to the splicing position width plus the width of the current splicing icon. Then, the splicing position is reset to zero, and the height of the splicing position is added to the height of the current splicing image. Step 5. Record the size and position of each stitched picture, organize them into corresponding structures, output them into json format data, and finally output new sprites and json files in the specified directory.

2. A method for updating a batch of dot-symbolized sprite images according to claim 1, characterized in that: In step 3, the initial width of the new sprite image and the png_map set identified by sorting from small to large according to the weight coefficient of the icon height are calculated. The calculation steps are as follows: 3-1. Calculate the total area of ​​all icons by multiplying the width and height and summing them up. Then square total_area and round it up to get the initial total width initial_width. 3-2. Sort the icons by height from small to large, and group them to obtain a set png_map of image information lists whose keys are heights and values ​​are corresponding key value heights.

Images