Multi-icon splicing method and system, electronic equipment and storage medium

Abstract

The invention discloses a multi-icon splicing method and system, electronic equipment and a storage medium. The method comprises the following steps: acquiring a plurality of prop icons to be spliced; splicing the plurality of prop icons in a background area according to a preset splicing rule to obtain a spliced first prop icon; obtaining layout information of the spliced first prop icon; according to the layout information of the spliced first prop icon and a preset visual hierarchy rule, the stacking sequence attribute of the multiple prop icons is adjusted, and a spliced second prop icon is obtained. According to the method and the device, the plurality of prop icons can be spliced into the integral icon according to the preset rule to be displayed, so that the number of network requests initiated to the server by the front end can be reduced; and meanwhile, the user can quickly browse all prop information without tedious manual operation, so that the information acquisition efficiency is improved, and the user experience is optimized.

Description

Technical Field

[0001] This application relates to the technical field of picture splicing, and particularly to a method, system, electronic device and storage medium for splicing multiple icons. Background Art

[0002] In the current digital entertainment and gaming fields, as a common reward mechanism, prop packages are widely used in various applications and online games. Prop packages usually contain multiple different types of prop icons. In the prior art, when these prop icons are displayed on the front end, they are usually presented in a carousel or list display manner, that is, the icons of each prop are displayed one by one. However, this display manner has exposed a series of problems and limitations in practical applications, especially in terms of resource requests and user experience.

[0003] Firstly, from the perspective of resource requests, using the carousel or list display manner requires preparing independent icon resources for each prop; when the prop package contains a large number of props, it will cause the front end to initiate a large number of network requests to the server to obtain the icon resources of all props, increasing the burden on the server. Secondly, when using the carousel or list display manner to display multiple prop icons, users need to manually operate (such as swiping or clicking) to view all prop icons; although this interaction manner can present prop information one by one, it becomes particularly cumbersome when the number of props is large. Especially on mobile devices, due to the limited screen size, users need to perform multiple operations to view all props, that is, users need to wait for a specific time to see all props, which reduces the efficiency of information acquisition and results in a poor user experience. Therefore, how to effectively reduce the number of icon resource requests and improve the user experience while ensuring the integrity and accuracy of icon information is a technical problem that urgently needs to be solved. Summary of the Invention

[0004] The main purpose of this application is to overcome the shortcomings and deficiencies of the prior art, and provide a method, system, electronic device and storage medium for splicing multiple icons. By splicing multiple prop icons into a whole icon for display according to a preset rule, the number of network requests initiated by the front end to the server can be reduced; at the same time, users can quickly view all prop information without cumbersome manual operations, improving the efficiency of information acquisition and optimizing the user experience.

[0005] To achieve the above purpose, this application adopts the following technical solutions:

[0006] In the first aspect, this application provides a method for splicing multiple icons, including the following steps:

[0007] Obtain multiple prop icons to be spliced;

[0008] Splice the multiple prop icons within a background area according to a preset splicing rule to obtain a first spliced prop icon;

[0009] Obtain the layout information of the first spliced prop icon;

[0010] Adjust the stacking order attribute of the multiple prop icons according to the layout information of the first spliced prop icon and a preset visual hierarchy rule to obtain a second spliced prop icon.

[0011] As a preferred technical solution, the splicing of the icon resources of the multiple props within a background area according to a preset rule includes:

[0012] Based on the width and height of the background area and the shape of each prop icon, determine the maximum width and maximum height of each prop icon;

[0013] Splice the multiple prop icons within the background area according to the maximum width and maximum height of each prop icon and a preset splicing rule.

[0014] As a preferred technical solution, the preset splicing rule includes an icon arrangement method;

[0015] The icon arrangement method includes grid arrangement, circular arrangement or linear arrangement.

[0016] As a preferred technical solution, the shape of each prop icon includes a circle, an ellipse, a triangle, a rectangle or an octagon.

[0017] As a preferred technical solution, the adjusting the stacking order attribute of the multiple prop icons according to the layout information of the first spliced prop icon and a preset visual hierarchy rule to obtain a second spliced prop icon includes:

[0018] Analyze the layout information of the first spliced prop icon to obtain the position coordinates and size information of each prop icon within the background area;

[0019] Based on the visual hierarchy rule, the number of prop icons, and the position coordinates and size information of the prop icons, determine the stacking order attribute of the prop icons;

[0020] According to the stacking order attribute of the prop icons, adjust the stacking order of each prop icon to form a stacking effect to obtain a second spliced prop icon.

[0021] As a preferred technical solution, the visual hierarchy rule refers to the display priority of the arrangement order of prop icons.

[0022] As a preferred technical solution, the visual hierarchy rule is determined according to the rarity or level of the prop icon.

[0023] In a second aspect, the present application provides a multi-icon splicing system, which is applied to the multi-icon splicing method described above, and includes an icon acquisition module, a first splicing module, a layout information acquisition module, and a second splicing module;

[0024] The icon acquisition module is used to acquire a plurality of prop icons to be spliced;

[0025] The first splicing module is used to splice the plurality of prop icons in a background area according to a preset splicing rule to obtain a first spliced prop icon;

[0026] The layout information acquisition module is used to acquire the layout information of the first spliced prop icon;

[0027] The second splicing module is used to adjust the stacking order attribute of the plurality of prop icons according to the layout information of the first spliced prop icon and a preset visual hierarchy rule to obtain a second spliced prop icon.

[0028] As a preferred technical solution, the first splicing module is specifically further used for:

[0029] Based on the width and height of the background area and the shape of each prop icon, determine the maximum width and maximum height of each prop icon;

[0030] Splice the plurality of prop icons in the background area according to the maximum width and maximum height of each prop icon and a preset splicing rule.

[0031] Among them, the preset splicing rule includes an icon arrangement method;

[0032] The icon arrangement method includes grid arrangement, circular arrangement or linear arrangement.

[0033] The shape of each prop icon includes a circle, an ellipse, a triangle, a rectangle or an octagon.

[0034] As a preferred technical solution, the second splicing module is specifically further used for:

[0035] Analyze the layout information of the first spliced prop icon to obtain the position coordinates and size information of each prop icon in the background area;

[0036] Based on the visual hierarchy rule, the number of prop icons, and the position coordinates and size information of the prop icons, determine the stacking order attribute of the prop icons;

[0037] Adjust the stacking order of each prop icon according to the stacking order attribute of the prop icon to form a stacking effect, and obtain the second prop icon after splicing.

[0038] The visual hierarchy rule refers to the arrangement order or display priority of prop icons.

[0039] Among them, the visual hierarchy rule is determined according to the rarity or level of the prop icon.

[0040] In a third aspect, the present application provides an electronic device, which includes:

[0041] At least one processor; and a memory communicatively connected to the at least one processor;

[0042] Wherein, the memory stores computer program instructions executable by the at least one processor, and the computer program instructions are executed by the at least one processor so that the at least one processor can execute the multi-icon splicing method described above.

[0043] In a fourth aspect, the present application provides a computer-readable storage medium storing a program, which when executed by a processor, implements the multi-icon splicing method described above.

[0044] In summary, compared with the prior art, the effective effects brought by the technical solution provided by the present application at least include:

[0045] The present application proposes a multi-icon splicing method, which obtains a plurality of prop icons to be spliced; splices the plurality of prop icons in a background area according to a preset splicing rule to obtain a first prop icon after splicing; obtains the layout information of the first prop icon after splicing; adjusts the stacking order attribute of the plurality of prop icons according to the layout information of the first prop icon after splicing and a preset visual hierarchy rule to obtain a second prop icon after splicing. By splicing a plurality of prop icons into a whole icon for display according to a preset rule, the present application reduces the number of network requests sent by the front end to the server, thereby reducing the burden on the server; at the same time, by splicing a plurality of prop icons to form a whole display, users can quickly view all prop information without cumbersome manual operations, significantly improving the efficiency of information acquisition and optimizing the user interaction experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0046] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the following drawings are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0047] Figure 1 Flow chart of a multi - icon splicing method provided by an embodiment of the present application;

[0048] Figure 2 Flow chart of splicing icon resource information of multiple items in a background area according to a preset rule provided by an embodiment of the present application;

[0049] Figure 3 Flow chart of adjusting the stacking order attribute of multiple item icons provided by an embodiment of the present application;

[0050] Figure 4 Schematic diagram of obtaining a second spliced item icon provided by an embodiment of the present application;

[0051] Figure 5 Block diagram of a multi - icon splicing system provided by an embodiment of the present application;

[0052] Figure 6 Structural diagram of an electronic device provided by an embodiment of the present application. Detailed implementation manners

[0053] In order to enable those skilled in the art to better understand the solutions of the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those skilled in the art without creative efforts fall within the scope of protection of the present application.

[0054] Referring to "embodiment" in the present application means that the specific features, structures or characteristics described in connection with the embodiment may be included in at least one embodiment of the present application. The phrase appears in various positions in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment mutually exclusive with other embodiments. Those skilled in the art explicitly and implicitly understand that the embodiments described in the present application may be combined with other embodiments.

[0055] In the fields of digital entertainment and games, as a common reward mechanism, item packages are widely used in various application programs and online games. An item package usually contains multiple different types of item icons. In the prior art, when these item icons are displayed on the front - end, they are usually displayed in a carousel or list manner, that is, the icons of each item are displayed one by one; although the carousel or list display manner meets the basic display requirements to a certain extent, there are many limitations in actual applications.

[0056] First, from the perspective of resource management, the carousel or list display method requires preparing independent icon resources for each item, which undoubtedly increases the storage and transmission pressure on the server. When the item package contains a large number of items, this will cause the front-end to frequently initiate network requests to the server to obtain the icon resources of all items, not only increasing the burden on the server, but also possibly causing network congestion due to network latency or instability factors, resulting in slow or even failed loading of icon resources, thus seriously affecting the user experience. At the same time, a large number of network requests will also consume the user's traffic resources, especially in the mobile network environment, this problem is particularly prominent.

[0057] Secondly, from the perspective of user experience, the carousel or list display method is unable to display multiple item icons effectively. Users need to manually operate (such as swiping or clicking) to view all item icons. This method becomes particularly cumbersome when the number of item icons is large, especially on mobile devices. Due to the limited screen size, users need to perform multiple operations to view all items, which not only reduces the efficiency of information acquisition but also results in a poor user experience.

[0058] To solve the above problems, the present application provides a multi-icon splicing method. By splicing multiple item icons into a single integrated icon for display according to a preset rule, there is no need to prepare independent icon resources for each item, reducing the number of network requests initiated by the front-end to the server, thus alleviating the burden on the server. At the same time, by forming an integrated display by splicing multiple item icons, compared with the carousel or list display method, users can quickly view all item icon information without cumbersome manual operations, that is, all item icons can be presented at once, significantly improving the efficiency of information acquisition and optimizing the user's interaction experience.

[0059] The following will describe in detail the technical solutions provided by the embodiments in the present application in conjunction with the accompanying drawings.

[0060] Please refer to Figure 1 , in an embodiment of the present application, a multi-icon splicing method is provided, including the following steps:

[0061] S1. Obtain multiple item icons to be spliced.

[0062] Further, first, the front-end system determines the types and quantities of item icons to be spliced. Then, the front-end system sends a request to the back-end server, and this request contains detailed information about the required item icons. After receiving this request, the back-end server retrieves the corresponding item icon resources from the database or other storage media according to the information in the request. These resources usually exist in the form of image files and contain the complete visual information of each item icon.

[0063] To ensure the accuracy and integrity of the data, after the backend server retrieves the prop icon resources, preprocessing operations will be performed. The preprocessing operations include checking whether the format and resolution of the icon resources meet the requirements, as well as performing necessary format conversion or compression, etc.

[0064] After completing the preprocessing operations, the backend server will package the retrieved prop icon resources into a data packet and transmit it to the front-end system through the network. After receiving these data packets, the front-end system will perform unpacking processing and store the extracted prop icon resources in the local cache or memory for subsequent splicing operations.

[0065] S2. Splice the multiple prop icons within the background area according to a preset splicing rule to obtain the first spliced prop icon.

[0066] Further, please refer to Figure 2 , the step of splicing the icon resource information of the multiple props within the background area according to a preset rule includes:

[0067] S21. Based on the width and height of the background area and the shape of each prop icon, determine the maximum width and maximum height of each prop icon.

[0068] Among them, the shape of each prop icon includes a circle, an ellipse, a triangle, a rectangle, an octagon, etc.

[0069] Further, in the embodiments of the present application, first, it is necessary to obtain the width and height of the background area for placing multiple prop icons to determine the basis for the arrangement range of the prop icons. Secondly, analyze the shape characteristics of each prop icon. In the embodiments of the present application, it includes a circle, an ellipse, a triangle, a rectangle, an octagon, etc. Among them, the shape characteristics not only affect the visual effect of the prop icons during splicing but also determine the space they occupy.

[0070] Specifically, for each prop icon, calculate the size of its circumscribed rectangle or circumscribed circle according to its shape characteristics. For example, for circular and elliptical icons, their diameters can be directly obtained as the maximum width and maximum height; for irregular shapes such as triangles and octagons, calculate the width and height of their circumscribed rectangles as the maximum width and maximum height; for rectangular icons, directly obtain their width and height.

[0071] After determining the circumscribed dimensions of each prop icon, the circumscribed dimensions of each prop icon are adjusted according to the size limitations of the background area. Specifically, if the maximum width or maximum height of a certain prop icon exceeds the corresponding dimension of the background area, it needs to be scaled to ensure that it can be completely displayed within the background area; meanwhile, the consistency of the scaling ratio is considered to maintain the relative size and proportional relationship between the prop icons.

[0072] S22. Splice the multiple prop icons within the background area according to the maximum width and maximum height of each prop icon and a preset splicing rule.

[0073] Among them, the preset splicing rule includes an icon arrangement method;

[0074] The icon arrangement method includes grid arrangement, circular arrangement or linear arrangement.

[0075] Furthermore, according to the selected arrangement method and the size limitations of the background area, calculate the specific position of each prop icon within the background area, including determining the starting coordinates (such as the upper left corner or center point coordinates) of each prop icon and its spacing in the arrangement direction (such as row spacing or column spacing).

[0076] Splice each prop icon within the background area according to the calculated position information in the preset arrangement method.

[0077] In the embodiments of the present application, a suitable icon arrangement method can be selected according to actual needs or user preferences. For example, for the situation where a large number of prop icons need to be displayed, grid arrangement can be selected; for the situation where the central prop icon needs to be highlighted, circular arrangement can be selected; for the situation where prop icons need to be displayed in sequence, linear arrangement can be selected.

[0078] Grid arrangement means dividing the background area into multiple equal-sized grid cells, and placing one prop icon in each grid cell; the characteristic of the grid arrangement method is neat and orderly, so it is suitable for scenarios where a large number of prop icons need to be displayed and overall coordination is desired.

[0079] In grid arrangement, the size of each grid cell can be dynamically adjusted according to the size of the background area and the number of prop icons. Usually, the size of the grid cell will be slightly larger than the maximum width and maximum height of the prop icon to ensure that the prop icon can be completely displayed within the grid cell, while maintaining an appropriate spacing to avoid overlap or overcrowding between the icons.

[0080] The steps of splicing multiple prop icons within the background area by adopting the grid arrangement method according to the maximum width and maximum height of each prop icon include:

[0081] Calculate the size of each grid cell based on the width and height of the background area and the preset number of grids or spacing.

[0082] Divide the background area into multiple equally sized grid cells according to the calculated grid cell size.

[0083] Place each item icon into the corresponding grid cell one by one according to the maximum width and maximum height of each item icon and the size of the grid cell.

[0084] For example, assume the width of the background area is 800 pixels, the height is 600 pixels, and the preset number of grids is 4x3 (i.e., 4 columns and 3 rows). Then the size of each grid cell can be calculated by the following formula:

[0085] Grid cell width = background area width / number of grid columns = 800 / 4 = 200 pixels;

[0086] Grid cell height = background area height / number of grid rows = 600 / 3 = 200 pixels;

[0087] After calculating the grid cell size, the background area can be divided into multiple equally sized grid cells, and each icon can be placed into the corresponding grid cell according to the maximum width and maximum height of each item icon. If the icon size in a certain grid cell is smaller than the grid cell size, it can be centered or appropriate padding can be added to keep it beautiful.

[0088] The circular arrangement in this embodiment means placing the item icons on the circumference or inside the circle in sequence according to the preset center position and radius of the circle. The characteristic of the circular arrangement is beauty and dynamism, and it is suitable for scenarios where it is necessary to highlight the central item icon or create a circular layout effect.

[0089] In the circular arrangement, the position of the center of the circle is usually at the center of the background area, and the radius is determined according to the number and size of the item icons; and in order to maintain the overall coordination and beauty, the angle between adjacent item icons is usually evenly distributed according to the number of item icons.

[0090] The steps of splicing multiple item icons within the background area in a circular arrangement according to the maximum width and maximum height of each item icon include:

[0091] Determine the parameters of the circle according to the center position of the background area and the preset radius.

[0092] Calculate the angle between adjacent item icons according to the number and size of the item icons.

[0093] Place the item icons on the circumference or inside the circle in sequence according to the calculated included angle, maximum width, and maximum height of the item icons.

[0094] In specific implementation, first, the coordinates of the center point (such as the center point of the background area) need to be determined. Then, according to the distance (i.e., radius) and angle (i.e., included angle) between each item icon and the center point, the starting coordinates of each icon are calculated. This starting coordinate can be the upper-left corner coordinate of the icon or the center point coordinate of the icon.

[0095] For example, assume that the center point coordinates of the background area are (400, 300), the preset radius is 200 pixels, and 6 item icons need to be arranged. Then the included angle between adjacent item icons can be calculated by the following formula:

[0096] Included angle = 360 degrees / number of item icons = 360 degrees / 6 = 60 degrees;

[0097] Then, according to the maximum width and maximum height of each item icon (assuming they do not exceed the preset radius minus an appropriate spacing), and the calculated included angle, the icons are placed on the circumference in sequence. To ensure appropriate spacing between the icons, an additional spacing angle can also be considered when calculating the included angle, or the coordinates can be slightly adjusted when placing the icons.

[0098] The linear arrangement in this embodiment means arranging the item icons in sequence in the background area according to a preset direction (horizontal or vertical) and spacing; the characteristics of the linear arrangement method are simplicity and clarity, and it is suitable for scenarios that require displaying item icons in sequence or maintaining a straight layout or a horizontal layout effect.

[0099] In the linear arrangement, the arrangement direction and spacing can be custom-set according to actual needs; to maintain overall coordination and aesthetics, the spacing between adjacent item icons will be kept consistent.

[0100] The steps of splicing multiple item icons in the background area in a linear arrangement manner according to the maximum width and maximum height of each item icon include:

[0101] Determine the parameters of the linear arrangement according to the preset arrangement direction and spacing;

[0102] Arrange the item icons in the background area in sequence according to the calculated spacing and the maximum width and maximum height of each item icon.

[0103] When implementing a linear arrangement specifically, it is first necessary to determine the starting and ending coordinates of the straight line (such as the top or bottom, left or right of the background area), and then calculate the starting coordinates of each prop icon based on the width (or height) and spacing of each prop icon. For example, assume the width of the background area is 800 pixels and the height is 600 pixels. Five prop icons need to be arranged horizontally, and the spacing between the icons is 20 pixels. Then the starting coordinates of the first icon can be set as (x1, y1) = (50, 300) (assuming the icon is centered vertically in the background area), and the starting coordinates of the subsequent icons can be calculated using the following formula:

[0104] x2 = x1 + icon width 1 + spacing = 50 + icon width 1 + 20;

[0105] x3 = x2 + icon width 2 + spacing = x2 + icon width 2 + 20;

[0106] xn = xn - 1 + icon width n - 1 + spacing.

[0107] S3. Obtain the layout information of the first prop icon after splicing.

[0108] S4. Adjust the stacking order attribute of the multiple prop icons according to the layout information of the first prop icon after splicing and the preset visual hierarchy rules to obtain the second prop icon after splicing.

[0109] Further, please refer to Figure 3 , the steps of adjusting the stacking order attribute of the multiple prop icons according to the layout information of the first prop icon after splicing and the preset visual hierarchy rules to obtain the second prop icon after splicing include:

[0110] S41. Analyze the layout information of the first prop icon after splicing to obtain the position coordinates and size information of each prop icon within the background area.

[0111] Further, first analyze the layout information of the first prop icon after splicing. The purpose of this step is to obtain the position coordinates (X coordinate, Y coordinate) and size information (width, height) of each prop icon within the background area. The position coordinates determine the specific position of the prop icon within the background area, while the size information determines the size of the prop icon.

[0112] Specifically, the position coordinates (X coordinate, Y coordinate) of each prop icon within the background area are determined by the offset of its upper left vertex relative to the upper left corner of the background area; the offset can be accurately calculated through the layout algorithm in the front-end code.

[0113] S42. Determine the stacking order attribute of the item icons based on the visual hierarchy rules, the number of item icons, and the position coordinates and size information of the item icons.

[0114] An item icon is usually composed of one or more DOM elements, which are defined and styled through HTML and CSS. By setting the stacking order (z-index) attribute of the DOM elements, the stacking order of these elements on the page can be controlled, thereby achieving the desired visual effect.

[0115] Specifically, the stacking order (z-index) attribute determines the stacking order of DOM elements on the z-axis, that is, the front-to-back relationship of elements on the page, namely which elements will cover other elements.

[0116] Specifically, elements with a positive stacking order (z-index) attribute value will cover elements with a negative stacking order (z-index) attribute value; and elements with a larger stacking order (z-index) attribute value will cover elements with a smaller z-index attribute value.

[0117] The visual hierarchy rules refer to the arrangement order or display priority of item icons.

[0118] In the embodiments of the present application, the visual hierarchy rules are determined according to the rarity or level of the item icons. The higher the rarity or level of the item icon, the higher its visual hierarchy, it is placed in a more prominent position, and it should cover item icons with lower rarity or level.

[0119] Specifically, based on the visual hierarchy rules, the number of item icons, and the position coordinates and size information of the item icons, assign a stacking order value to each DOM element, where the stacking order value is used to determine the stacking order of elements in the DOM structure, and elements with a higher stacking order value will cover elements with a lower stacking order value.

[0120] S43. Adjust the stacking order of each item icon according to the stacking order attribute of the item icon to form a stacking effect, and obtain the spliced second item icon.

[0121] After determining the stacking order value of each DOM element, the stacking order of each item icon can be adjusted according to the stacking order value, forming a spliced second item icon with a stacking effect; please refer to Figure 4 ; which not only enriches the display form of the icons, but also enhances the overall aesthetics and attractiveness through the enhancement of the visual hierarchy, further improving the user's visual experience.

[0122] After the previous steps, multiple prop icons have been spliced according to the preset rules and the stacking order has been adjusted to form the second spliced prop icon. The spliced icon combination consists of a series of DOM elements. Therefore, if you want to save it as a picture or share it with other users, you need to convert it into a picture resource.

[0123] In this application, through Html2Canvas, the DOM elements of the spliced icon combination are converted into picture resources for output.

[0124] Html2Canvas is a powerful JavaScript library that allows developers to directly render the DOM elements on a web page into an off-screen Canvas (drawing board), and then convert this drawing board into a picture format (such as PNG, JPEG, etc.); its specific steps include:

[0125] 1. Select the target DOM element:

[0126] First of all, it is necessary to select the target DOM element, that is, the container element where the second spliced prop icon combination is located.

[0127] 2. Call Html2Canvas for rendering:

[0128] After selecting the target DOM element, Html2Canvas can be called for rendering; using the API provided by Html2Canvas, it is allowed to specify the target DOM element and call the rendering function. Html2Canvas will traverse the target DOM element and its child elements, collect their style information and position information, and create a virtual drawing board corresponding to the DOM structure in memory. Then, it will draw an image as consistent as possible with the original DOM element on the virtual drawing board.

[0129] 3. Obtain the drawing board and convert it into a picture:

[0130] Once the rendering is completed, Html2Canvas will return a drawing board object containing the rendering result. Therefore, the toDataURL method or toBlob method provided by the Canvas API can be used to convert the drawing board content into picture data. Usually, the toDataURL method will return a Base64-encoded string representing the picture data; while the toBlob method will return a Blob object that can be directly used for downloading or uploading.

[0131] Among them, the function of the toDataURL method is to convert the image on the Canvas drawing board into a data URL; the data URL is usually a Base64-encoded string that represents the data content of the picture.

[0132] The `toBlob` method is part of the HTML5 Canvas API, which allows the content of a canvas to be converted into a Blob object. A Blob (Binary Large Object) object is a file-like object representing immutable, raw data, which can be used to efficiently handle binary data such as images, audio, video, etc. in web applications.

[0133] When the `toBlob` method is called, the canvas generates a Blob object of the corresponding format based on the current drawing content. The MIME type of the generated Blob object (such as "image / png" or "image / jpeg") can be specified, and (for the JPEG format) a number representing the quality (ranging from 0 to 1). If the MIME type is not specified, the default is usually "image / png".

[0134] 4. Output the image:

[0135] Finally, various ways can be selected to output this image data as needed. For example, we can set the image data as the `src` attribute of a certain element to display the image on the page; we can also trigger a download operation to allow users to save the image locally; or, the image data can be passed to other JavaScript functions through the API for further processing (such as uploading to the server, sending to other users' devices, etc.).

[0136] In summary, a multi-icon splicing method provided by this application can splice multiple prop icons into a whole icon for display according to preset rules, without preparing independent icon resources for each prop, reducing the number of network requests initiated by the front end to the server, thus reducing the burden on the server and reducing the risk of degradation of the user experience caused by network latency or instability. At the same time, it also effectively saves the user's traffic resources, especially in the mobile network environment, and this advantage is particularly obvious. At the same time, by splicing multiple prop icons to form a whole display, users can quickly view all prop information without cumbersome manual operations. Especially on mobile devices, due to the limited screen size, the traditional display method often requires users to perform multiple operations to view all props, while this application can present all prop icons at once, significantly improving the efficiency of information acquisition and optimizing the user's interaction experience.

[0137] It should be noted that for the foregoing method embodiments, for the sake of simplicity of description, they are all expressed as a series of action combinations. However, those skilled in the art should know that this application is not limited by the described action sequence, because according to this application, some steps can be performed in other sequences or simultaneously.

[0138] Based on the same idea as a multi-icon splicing method in the above embodiment, this application also provides a multi-icon splicing system, which can be used to execute the above multi-icon splicing method. For the sake of convenience of description, in the structural schematic diagram of an embodiment of the multi-icon splicing system, only the parts related to the embodiment of this application are shown. Those skilled in the art can understand that the illustrated structure does not constitute a limitation on the system, and it may include more or fewer components than those illustrated, or combine some components, or arrange different components.

[0139] Please refer to Figure 5 , in another embodiment of this application, a multi-icon splicing system is provided. The system includes an icon acquisition module 101, a first splicing module 102, a layout information acquisition module 103, and a second splicing module 104;

[0140] The icon acquisition module 101 is used to acquire a plurality of prop icons to be spliced;

[0141] The first splicing module 102 is used to splice the plurality of prop icons in the background area according to a preset splicing rule to obtain a first spliced prop icon;

[0142] The layout information acquisition module 103 is used to acquire the layout information of the first spliced prop icon;

[0143] The second splicing module 104 is used to adjust the stacking order attribute of the plurality of prop icons according to the layout information of the first spliced prop icon and a preset visual hierarchy rule to obtain a second spliced prop icon.

[0144] As a preferred technical solution, the first splicing module 102 is specifically further used for:

[0145] Based on the width and height of the background area and the shape of each prop icon, determine the maximum width and maximum height of each prop icon;

[0146] Splice the plurality of prop icons in the background area according to the maximum width and maximum height of each prop icon and a preset splicing rule.

[0147] Among them, the preset splicing rule includes an icon arrangement method;

[0148] The icon arrangement methods include grid arrangement, circular arrangement, or linear arrangement.

[0149] The shape of each item icon includes a circle, an ellipse, a triangle, a rectangle, or an octagon.

[0150] As a preferred technical solution, the second splicing module 104 is specifically further configured to:

[0151] Analyze the layout information of the spliced first item icon, and obtain the position coordinates and size information of each item icon in the background area;

[0152] Based on the visual hierarchy rule, the number of item icons, and the position coordinates and size information of the item icons, determine the stacking order of the item icons;

[0153] According to the stacking order in the item icons, adjust the stacking order of each item icon to form a stacking effect, and obtain the spliced second item icon.

[0154] The visual hierarchy rule refers to the arrangement order or display priority of item icons.

[0155] Among them, the visual hierarchy rule is determined according to the rarity or level of the item icons.

[0156] It should be noted that a multi-icon splicing system of the present application corresponds one-to-one with a multi-icon splicing method of the present application. The technical features and beneficial effects described in the embodiments of the above multi-icon splicing method are all applicable to the embodiments of a multi-icon splicing system. For specific content, reference can be made to the description in the method embodiments of the present application, which will not be repeated here. This is hereby declared.

[0157] In addition, in the implementation manner of the multi-icon splicing system in the above embodiment, the logical division of each program module is only an example. In actual application, according to needs, for example, considering the configuration requirements of the corresponding hardware or the convenience of software implementation, the above functions can be allocated to different program modules to complete, that is, the internal structure of the multi-icon splicing system is divided into different program modules to complete all or part of the functions described above.

[0158] Please refer to Figure 6 , in another embodiment, an electronic device for implementing a multi-icon splicing method is provided, including a processor, a memory, and a bus, and may further include a computer program stored in the memory and executable on the processor.

[0159] Exemplarily, in this embodiment, the computer program can be divided into one or more modules. The one or more modules are stored in the memory and executed by the processor to complete the present application. The one or more module elements can be a series of computer program instruction segments capable of performing specific functions, and these instruction segments are used to describe the execution process of the computer program in the device.

[0160] The electronic device can be a computing device such as a desktop computer, a notebook, a palm computer, and a cloud server, etc. The device may include, but is not limited to, a processor and a memory.

[0161] In some embodiments, the processor can be composed of integrated circuits. For example, it can be composed of a single packaged integrated circuit, or can also be composed of multiple integrated circuits with the same or different functions packaged together, including one or more central processing units (CPUs). It can also be other general-purpose processors, digital signal processors (DSPs), application specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. The general-purpose processor can be a microprocessor or the processor can also be any conventional processor, etc. The processor is the control center of the device, connecting various components of the entire device through various interfaces and circuits; by running or executing the programs or modules stored in the memory, and by calling the data stored in the memory, it performs various functions of the electronic device and processes data.

[0162] The memory can be used to store the computer program and / or modules. The processor realizes various functions of the device by running or executing the computer program and / or modules stored in the memory, and by calling the data stored in the memory. The memory mainly includes a program storage area and a data storage area. Among them, the program storage area can store an operating system, application programs required for at least one function, etc.; in addition, the memory can include high-speed random access memory, and can also include non-volatile memory, such as a hard disk, a memory, a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, at least one magnetic disk storage device, a flash device, or other volatile solid-state storage devices.

[0163] Among them, in some embodiments, the memory may be an internal storage unit of the electronic device, such as the mobile hard disk of the electronic device. In some other embodiments, the memory may also be an external storage device of the electronic device, such as a plug-in mobile hard disk, a Smart Media Card (SMC), a Secure Digital (SD) card, a Flash Card, etc. equipped on the electronic device. Further, the memory may also include both the internal storage unit and the external storage device of the electronic device. The memory can be used not only to store application software installed on the electronic device and various types of data, such as the code of the multi-icon splicing program, etc., but also to temporarily store the data that has been output or will be output.

[0164] Figure 6 Only the electronic device with components is shown. Those skilled in the art can understand that Figure 6 the shown structure does not constitute a limitation on the electronic device, and it may include fewer or more components than shown, or combine certain components, or have different component arrangements.

[0165] A multi-icon splicing program stored in the memory of the electronic device is a combination of multiple instructions. When running in the processor, it can achieve:

[0166] Obtain multiple prop icons to be spliced;

[0167] Splice the multiple prop icons in the background area according to a preset splicing rule to obtain a first spliced prop icon;

[0168] Obtain the layout information of the first spliced prop icon;

[0169] Adjust the stacking order attribute of the multiple prop icons according to the layout information of the first spliced prop icon and a preset visual hierarchy rule to obtain a second spliced prop icon.

[0170] Correspondingly, the present application also provides a computer-readable storage medium. The computer-readable storage medium includes a stored computer program. Among them, when the computer program runs, it controls the device where the computer-readable storage medium is located to execute a multi-icon splicing method as described in any one of the above embodiments.

[0171] The computer program includes computer program code, which may be in the form of source code, object code, executable files, or some intermediate forms, etc. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, USB flash drive, mobile hard disk, magnetic disk, optical disc, computer memory, read-only memory (ROM), random access memory (RAM), flash memory, mobile hard disk, multimedia card, card-type memory (such as SD or DX memory, etc.), magnetic memory, magnetic disk, optical disc, and so on.

[0172] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing relevant hardware through a computer program. The program can be stored in a non-volatile computer-readable storage medium. When the program is executed, it can include the processes of the embodiments of the above methods. Among them, any reference to memory, storage, database, or other media used in the various embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDR SDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0173] The technical features of the above embodiments can be combined arbitrarily. For the sake of brevity of description, 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, it should be considered as the scope recorded in this specification.

[0174] The above embodiments are preferred embodiments of the present application, but the embodiments of the present application are not limited to the above embodiments. Any other changes, modifications, substitutions, combinations, and simplifications made without departing from the spirit and principle of the present application shall be equivalent replacement methods and are all included in the protection scope of the present application.

Claims

1. A method for splicing multiple icons, characterized in that, Including the following steps: Obtain a plurality of prop icons to be spliced; Splice the plurality of prop icons within a background area according to a preset splicing rule to obtain a first spliced prop icon; Obtain the layout information of the first spliced prop icon; Adjust the stacking order attribute of the plurality of prop icons according to the layout information of the first spliced prop icon and a preset visual hierarchy rule to obtain a second spliced prop icon.

2. The multi-icon splicing method according to claim 1, wherein The splicing of the icon resources of the plurality of props within a background area according to a preset rule includes: Based on the width and height of the background area and the shape of each prop icon, determine the maximum width and maximum height of each prop icon; Splice the plurality of prop icons within the background area according to the maximum width and maximum height of each prop icon and a preset splicing rule.

3. The multi-icon splicing method according to claim 2, wherein The preset splicing rule includes an icon arrangement method; The icon arrangement method includes grid arrangement, circular arrangement, or linear arrangement.

4. The multi-icon splicing method according to claim 2, wherein, The shape of each prop icon includes a circle, an ellipse, a triangle, a rectangle, or an octagon.

5. The multi-icon splicing method according to claim 1, characterized in that, The adjusting the stacking order attribute of the plurality of prop icons according to the layout information of the first spliced prop icon and a preset visual hierarchy rule to obtain a second spliced prop icon includes: Analyze the layout information of the first spliced prop icon to obtain the position coordinates and size information of each prop icon within the background area; Based on the visual hierarchy rule, the number of prop icons, and the position coordinates and size information of the prop icons, determine the stacking order attribute of the prop icons; According to the stacking order attribute of the prop icons, adjust the stacking order of each prop icon to form a stacking effect to obtain a second spliced prop icon.

6. The multi-icon splicing method according to claim 5, wherein The visual hierarchy rule refers to the arrangement order or display priority of prop icons.

7. The multi-icon splicing method according to claim 6, characterized in that, The visual hierarchy rule is determined according to the rarity or level of the prop icons.

8. A multi-icon splicing system, characterized in that, Including an icon acquisition module, a first splicing module, a layout information acquisition module, and a second splicing module; The icon acquisition module is used to obtain a plurality of prop icons to be spliced; The first splicing module is used to splice the plurality of prop icons within a background area according to a preset splicing rule to obtain a first spliced prop icon; The layout information acquisition module is used to obtain the layout information of the first spliced prop icon; The second splicing module is used to adjust the stacking order attribute of the plurality of prop icons according to the layout information of the first spliced prop icon and a preset visual hierarchy rule to obtain a second spliced prop icon.

9. An electronic device, characterized in that, The electronic device includes: At least one processor; and a memory communicatively connected to the at least one processor; Wherein, the memory stores computer program instructions executable by the at least one processor, and the computer program instructions are executed by the at least one processor so that the at least one processor can execute a multi-icon splicing method according to any one of claims 1-7.

10. A computer-readable storage medium storing a program, characterized in that, When the program is executed by the processor, it implements a multi-icon splicing method according to any one of claims 1-7.

Images