Grid component generation method and device with visual interface and storage medium

Abstract

The invention relates to the field of component generation, and discloses a grid component generation method and device with a visual interface and a storage medium. The method comprises the steps that gridding processing is conducted on an interface according to preset grid parameters, and the interface with N grid units is obtained; reading coordinate data of the dragging component; traversing and selecting a target grid unit from the N grid units; calculating a horizontal and longitudinal difference value between the coordinate data and the target grid unit to obtain a horizontal coordinate difference value and a longitudinal coordinate difference value; judging whether components of occupied grid units exist in the target grid units or not; if not, performing distance detection processing on the target grid unit to generate an effective grid unit; after the N grid units are traversed, size constraint alignment processing is carried out on the dragged component according to the effective grid units, and a visual component adsorbing the grid units is generated. In the embodiment of the invention, the difference between actual effects of Web preview and applets is reduced, and the efficiency and precision of layout design are improved.

Description

Technical Field

[0001] The present invention relates to the field of component generation, and in particular to a method, device and storage medium for generating a grid component with a visualized interface. Background Art

[0002] With the booming development of the mini-program ecosystem, quickly building high-quality mini-program interfaces has become a key focus for developers. Existing mini-program development typically requires developers to manually write code to define interface layouts (for example, using WXML, WXSS, etc.). This is not only inefficient but also requires high technical skills and is prone to errors, especially when dealing with complex component alignment and responsive layouts.

[0003] Although there are some visual mini-programs or web page editors on the market that allow users to design layouts by dragging and dropping components, these editors still have shortcomings in the following aspects: When users drag components, it is difficult to accurately align components with other components or preset grids, and repeated fine-tuning is often required, which is time-consuming. From the web editing environment to the actual running environment of the mini-program, due to differences in layout constraint mechanisms or inaccuracies in the editor, the layout finally displayed on the mini-program may deviate from the design draft. In particular, when it is necessary to map the free dragging on the web side to the standardized layout on the mini-program side, there is a lack of effective intelligent assistance mechanisms.

[0004] Therefore, a new technology is needed to solve the current problem that the schemes generated by visual components are difficult to align accurately and the layout is irregular during the web to applet mapping process. Summary of the Invention

[0005] The main purpose of the present invention is to solve the technical problems that the current visualization component generation solution is difficult to align accurately and has irregular layout during the web to applet mapping process.

[0006] A first aspect of the present invention provides a method for generating a grid component for interface visualization, the method comprising:

[0007] Performing grid processing on the interface according to preset grid parameters to obtain an interface with N grid units, where N is a positive integer;

[0008] Read the coordinate data of the dragged component;

[0009] Traversing and selecting a target grid cell from the N grid cells;

[0010] Calculating the horizontal and vertical differences between the coordinate data and the target grid unit to obtain a horizontal coordinate difference and a vertical coordinate difference;

[0011] When the horizontal coordinate difference is less than the preset horizontal magnetic attraction threshold and the vertical coordinate difference is less than the preset vertical magnetic attraction threshold, it is determined whether the placement of the drag component in the target grid unit collides with an already placed component;

[0012] When there is a collision, the next target grid unit among the N grid units is selected according to the preset collision overlap rule;

[0013] When there is no collision, performing distance detection processing on the target grid unit based on the horizontal coordinate difference and the vertical coordinate difference to generate a valid grid unit;

[0014] After traversing N grid units, the drag component is size-constrained and aligned according to the valid grid units to generate a visual component that adsorbs the grid units.

[0015] Optionally, in a first implementation of the first aspect of the present invention, performing a distance search process on the target grid cell based on the horizontal coordinate difference and the vertical coordinate difference to obtain a valid grid cell includes:

[0016] Calculate the horizontal coordinate difference and the vertical coordinate difference according to a preset distance formula to obtain the target distance;

[0017] Determine whether the target distance is less than the preset minimum distance;

[0018] When it is less than the preset minimum distance, the target distance is assigned to the minimum distance, and the target grid unit is assigned to the matching unit framework to generate a valid grid unit.

[0019] Optionally, in a second implementation of the first aspect of the present invention, the grid parameters include: grid unit width, grid unit height, grid horizontal spacing, and grid vertical spacing; and gridding the interface according to the preset grid parameters to obtain an interface with N grid units includes:

[0020] Read the display width and display height of the interface;

[0021] Using the grid unit width and the grid horizontal spacing, set the cell horizontal value, and using the grid unit height and the grid vertical spacing, set the cell vertical value;

[0022] Calculate the number of cell rows according to the display width and the cell horizontal value, and calculate the number of cell columns according to the display height and the cell vertical value;

[0023] According to the preset starting offset, traverse the number of cell rows and the number of cell columns to calculate the coordinates of N grid cells;

[0024] The interface is rendered based on the coordinates of the N grid units to obtain an interface with N grid units.

[0025] Optionally, in a third implementation of the first aspect of the present invention, the grid parameters include: grid unit width, grid unit height, grid horizontal spacing, and grid vertical spacing; and performing size constraint alignment processing on the dragged component based on the valid grid units to generate a visual component adsorbed to the grid units includes:

[0026] Read the temporary width and temporary height of the drag component;

[0027] Calculating the remainder of the temporary width to the grid unit width according to a preset width remainder formula and the horizontal spacing of the grid to obtain a width remainder;

[0028] Calculating the remainder of the temporary height to the grid unit width according to a preset height remainder formula and the grid longitudinal spacing to obtain a height remainder;

[0029] Determining whether both the width remainder and the height remainder are valid;

[0030] If both are valid, then the horizontal multiple of the temporary width relative to the grid unit width is calculated, and the vertical multiple of the temporary height relative to the grid unit width is calculated;

[0031] Based on the horizontal multiple and the vertical multiple, a size standard calculation is performed on the drag component to obtain a standard width and a standard height;

[0032] Scaling the drag component according to the standard width and standard height to obtain a scaled drag component;

[0033] The zoom-and-drag component is aligned according to the coordinate parameters of the effective grid unit to obtain a visual component that adsorbs the grid unit.

[0034] Optionally, in a fourth implementation of the first aspect of the present invention, calculating the remainder of the temporary width to the grid unit width based on a preset width remainder formula and the horizontal grid spacing to obtain the width remainder includes:

[0035] RemW = (W + G_X) % (GS_W + G_X), where RemW is the width remainder, W is the temporary width, GS_W is the grid unit width, G_X is the horizontal grid spacing, and % is the remainder operator;

[0036] The step of calculating the remainder of the temporary height to the grid unit width according to a preset height remainder formula and the grid longitudinal spacing to obtain the height remainder comprises:

[0037] RemH=(H+G_Y)%(GS_H+G_Y), where RemH is the height remainder, H is the temporary height, GS_H is the grid unit height, G_Y is the grid vertical spacing, and % is the remainder operator.

[0038] Optionally, in a fifth implementation of the first aspect of the present invention, determining whether both the width remainder and the height remainder are valid includes:

[0039] Determining whether the width remainder is less than the lateral magnetic attraction threshold or whether the width remainder is greater than a difference between the grid unit width and the lateral magnetic attraction threshold;

[0040] When the width remainder is less than the horizontal magnetic attraction threshold or the width remainder is greater than the difference between the grid unit width and the horizontal magnetic attraction threshold, the width remainder is confirmed to be valid data;

[0041] Determining whether the height remainder is less than the longitudinal magnetic attraction threshold or the height remainder is greater than the difference between the grid unit height and the longitudinal magnetic attraction threshold;

[0042] When the height remainder is smaller than the longitudinal magnetic attraction threshold or the height remainder is larger than the difference between the grid unit height and the longitudinal magnetic attraction threshold, the height remainder is confirmed to be valid data.

[0043] Optionally, in a sixth implementation of the first aspect of the present invention, calculating the horizontal multiple of the temporary width relative to the grid unit width and calculating the vertical multiple of the temporary height relative to the grid unit width includes:

[0044] When the width remainder is less than the horizontal magnetic attraction threshold, a preset first formula is executed to obtain a horizontal multiple, wherein the first formula includes:

[0045] multX = floor((W + G_X) / (GS_W + G_X), where multX is the horizontal multiplier, W is the temporary width, GS_W is the grid unit width, G_X is the horizontal grid spacing, and floor(*) is the floor function;

[0046] When the width remainder is greater than the difference between the grid unit width and the horizontal magnetic attraction threshold, a preset second formula is executed to obtain a horizontal multiple, wherein the second formula includes:

[0047] multX = floor((W + G_X) / (GS_W + G_X) + 1), where multX is the horizontal multiplier, W is the temporary width, GS_W is the grid unit width, G_X is the horizontal grid spacing, and floor(*) is the floor function;

[0048] When the temporary height is less than the longitudinal magnetic attraction threshold, a preset third formula is executed to obtain a longitudinal multiple, wherein the third formula includes:

[0049] multY = floor((H + G_Y) / (GS_H + G_Y), where multY is the vertical multiplier, H is the temporary height, GS_H is the grid unit height, G_Y is the vertical grid spacing, and floor(*) is the floor function;

[0050] When the temporary height is less than the difference between the grid unit height and the longitudinal magnetic attraction threshold, the preset fourth formula is executed to obtain the longitudinal multiple, wherein the fourth formula includes:

[0051] multY=floor((H+G_Y) / (GS_H+G_Y)+1), where multY is the vertical multiplier, H is the temporary height, GS_H is the grid unit height, G_Y is the grid vertical spacing, and floor(*) is the floor rounding function.

[0052] Optionally, in a seventh implementation of the first aspect of the present invention, performing size specification calculation on the drag component based on the horizontal multiple and the vertical multiple to obtain a standard width and a standard height includes:

[0053] newW = (GS_W + G_X) * multX - G_X, where newW is the standard width, GS_W is the grid unit width, G_X is the horizontal grid spacing, and multX is the horizontal multiplier;

[0054] newH = (GS_H + G_Y) * multY - G_Y, where newH is the standard height, GS_H is the grid unit height, G_Y is the grid vertical spacing, and multY is the vertical multiple.

[0055] A second aspect of the present invention provides a device for generating a grid component for interface visualization, comprising: a memory and at least one processor, wherein the memory stores instructions, and the memory and the at least one processor are interconnected via lines; the at least one processor calls the instructions in the memory so that the device for generating a grid component for interface visualization executes the above-mentioned method for generating a grid component for interface visualization.

[0056] A third aspect of the present invention provides a computer-readable storage medium, wherein the computer-readable storage medium stores instructions, which, when executed on a computer, enable the computer to execute the above-mentioned method for generating a grid component for interface visualization.

[0057] In an embodiment of the present invention, positions and sizes during the editing process are standardized based on a unified grid system, forcing component sizes to conform to grid multiples. This ensures a neat and standardized overall layout, and the generated layout information is more accurately reflected on the target mini-program end, reducing the discrepancy between the web preview and the actual mini-program effect, and improving cross-end consistency. Furthermore, the use of intelligent adsorption and size constraints significantly reduces the time users spend on manual alignment and resizing, improving the efficiency and accuracy of layout design, and resolving the technical issues with current solutions for generating visual components, which are difficult to precisely align and exhibit irregular layouts during web-to-mini-program mapping. BRIEF DESCRIPTION OF THE DRAWINGS

[0058] Figure 1 A schematic diagram of an embodiment of a method for generating a grid component for interface visualization according to an embodiment of the present invention;

[0059] Figure 2 This is a schematic diagram of an embodiment of step 101 of a method for generating a grid component for interface visualization in an embodiment of the present invention;

[0060] Figure 3 This is a schematic diagram of a specific embodiment of step 107 of the method for generating a grid component for interface visualization in an embodiment of the present invention;

[0061] Figure 4 Schematic diagram of the display effect of the method for generating a grid component for interface visualization in an embodiment of the present invention;

[0062] Figure 5 This is a schematic diagram of an embodiment of a device for generating a grid component for interface visualization in an embodiment of the present invention. DETAILED DESCRIPTION

[0063] The embodiments of the present invention provide a method, device and storage medium for generating a grid component with a visualized interface.

[0064] The following describes embodiments of the present disclosure in more detail with reference to the accompanying drawings. Although certain embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as limited to the embodiments described herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are for illustrative purposes only and are not intended to limit the scope of protection of the present disclosure.

[0065] In the description of the embodiments disclosed herein, the term "including" and similar terms should be understood as open inclusion, i.e., "including but not limited to." The term "based on" should be understood as "based, at least in part, on." The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment." The terms "first," "second," etc. may refer to different or the same objects. Other explicit and implicit definitions may also be included below.

[0066] For ease of understanding, the specific process of the embodiment of the present invention is described below. Figure 1 An embodiment of a method for generating a grid component for interface visualization in an embodiment of the present invention includes:

[0067] 101. Gridding the interface according to preset grid parameters to obtain an interface with N grid units, where N is a positive integer;

[0068] In this embodiment, the grid parameters can set the length and width of each unit. Based on the size of the grid parameters, the selection interface is gridded. The entire interface is gridded according to the preset grid data, resulting in an interface with multiple grid units. Subsequent component adsorption and scaling are calculated based on the coordinates of the grid units.

[0069] See also Figure 2 , Figure 2 This is an embodiment of step 101 of the method for generating a grid component for interface visualization in an embodiment of the present invention. The grid parameters include: grid unit width, grid unit height, grid horizontal spacing, and grid vertical spacing. Step 101 includes the following specific implementation methods:

[0070] 1011. Read the display width and display height of the interface;

[0071] 1012. Set a cell horizontal value using the grid unit width and the grid horizontal spacing, and set a cell vertical value using the grid unit height and the grid vertical spacing;

[0072] 1013. Calculate the number of cell rows according to the display width and the cell horizontal value, and calculate the number of cell columns according to the display height and the cell vertical value;

[0073] 1014. According to a preset starting offset, traverse the number of cell rows and the number of cell columns to calculate the coordinates of N grid cells;

[0074] 1015. Render the interface based on the coordinates of the N grid units to obtain an interface with N grid units.

[0075] In steps 1011-1015, the grid parameters can be set to 78 pixels for the grid unit width, 78 pixels for the grid unit height, 10 pixels for the grid horizontal spacing, and 10 pixels for the grid vertical spacing. The display width of the read interface is first set to 800 pixels and the display height is set to 1600 pixels.

[0076] Then, calculate the cell horizontal value = grid unit width + grid horizontal spacing, the number of cell rows = floor (display width / cell horizontal value), the cell vertical value = grid unit height + grid vertical spacing, the number of cell columns = floor (display height / cell vertical value), the floor function is a rounding function, and the cell here is a whole unit including the grid and spacing.

[0077] Based on the starting offset being set to startX=0 and startY=0, a for loop is used to traverse the rows and columns of the cell rows and columns. The specific pseudo code can be as follows:

[0078]

[0079] Continue looping through each row and column of col and row until you reach the last row and column, using the starting offset address to calculate the coordinates of all grid cells. Then, write the coordinates of the grid cells into an array and render them, resulting in an interface with N grid cells.

[0080] 102. Read the coordinate data of the dragged component;

[0081] In this embodiment, the coordinate data of the dragged component is read, for example, the coordinates (compX, compY) of the upper left corner of the component.

[0082] 103. Traverse and select a target grid unit from the N grid units;

[0083] In this embodiment, the coordinate data of the N grid cells are traversed, and one grid cell coordinate (gridX, gridY) is read from the grid cell data each time. A for loop format can be used to traverse all grid cells.

[0084] 104. Calculate the horizontal and vertical differences between the coordinate data and the target grid unit to obtain a horizontal coordinate difference and a vertical coordinate difference;

[0085] In this embodiment, the horizontal coordinate difference dx=abs(compX-gridX) and the vertical coordinate difference dy=abs(compY-gridY) are calculated to realize the horizontal and vertical differences between the coordinate data and the target grid unit. The specific implementation method may vary slightly depending on the virtual environment and code.

[0086] 105. When the horizontal coordinate difference is less than a preset horizontal magnetic attraction threshold and the vertical coordinate difference is less than a preset vertical magnetic attraction threshold, determining whether the placement of the dragged component in the target grid unit collides with an already placed component;

[0087] In this embodiment, an if conditional statement is used. When the horizontal coordinate difference dx is less than the horizontal magnetic threshold MAGNETTISM_SIZE_X and the vertical coordinate difference dy is less than the vertical magnetic threshold MAGNETTISM_SIZE_Y, the settings of the horizontal magnetic threshold and the vertical magnetic threshold here can be associated with the grid unit width and the grid unit height. For example, if the magnetic parameter is set to 0.3, then the horizontal magnetic threshold = 0.3*grid unit width, and the vertical magnetic threshold = 0.3*grid unit height. The magnetic threshold of the relevant pixels can also be set by the user.

[0088] 106. When there is a collision, the next target grid unit is selected from the N grid units according to a preset collision overlap rule;

[0089] In this embodiment, if there is a collision overlap, based on the collision overlap rule, a user reminder message is set or placement is prevented, and then the next target grid unit among the N grid units is selected for judgment.

[0090] 107. When there is no collision, performing distance detection processing on the target grid unit based on the horizontal coordinate difference and the vertical coordinate difference to generate a valid grid unit;

[0091] In this embodiment, the distance metric of the horizontal coordinate difference and the vertical coordinate difference is calculated, and then it is determined whether the target grid unit is the grid unit with the smallest distance to the drag component. If it is the smallest grid unit, the target grid unit is determined as a valid grid unit.

[0092] See also Figure 3 , Figure 3 This is an embodiment of step 107 of the method for generating a grid component for interface visualization in an embodiment of the present invention. Step 107 includes the following specific implementation methods:

[0093] 1071. Calculate the horizontal coordinate difference and the vertical coordinate difference according to a preset distance formula to obtain a target distance.

[0094] 1072. Determine whether the target distance is less than the preset minimum distance;

[0095] 1073. When it is less than a preset minimum distance, the target distance is assigned to the minimum distance, and the target grid unit is assigned to the matching unit framework to generate a valid grid unit.

[0096] In steps 1071-1072, a minimum distance mindistance parameter is initialized, and the mindistance parameter is initially set to infinity. The current target distance distance = sqrt(dx*dx+dy*dy) is calculated. If the target distance distance is less than the minimum distance mindistance parameter, the target distance distance is assigned to the minimum distance mindistance parameter, and the matching unit frame bestFitGridPos = (gridX, gridY) is assigned to obtain a valid grid unit.

[0097] 108. After traversing N grid units, perform size constraint alignment processing on the drag component according to the valid grid units to generate a visual component that adsorbs the grid units.

[0098] In this embodiment, after traversing all grid cells, if the matching cell frame bestFitGridPos is not empty, the valid grid cells in the matching cell frame bestFitGridPos are used as adsorption objects, and the dragged component is aligned with the grid cell size constraints to generate a visual component of the adsorbed grid cell. For the display effect of the visual component, please refer to Figure 4 , Figure 4 Schematic diagram of the display effect of the grid component generation method for interface visualization in an embodiment of the present invention. Figure 4 A visual component for snapping grid cells in the web interface editing mapping applet, in Figure 4 A total of six components of different shapes can be adsorbed. When mapping and transferring the mini-program, the component's position is locked to the grid cell coordinates. The mini-program interface layout accurately displays according to the web interface editing state. This grid adsorption method significantly reduces editing time and improves editing accuracy. When the user drags a component, the system detects the position of the component's top-left corner in real time and compares it with all pre-calculated grid cell positions. If the horizontal and vertical distances between the component's position and a grid location are both less than the corresponding magnetic attraction thresholds (MAGNETTISM_SIZE_X, MAGNETTISM_SIZE_Y), and the grid location is not occupied by other components (or overlap is allowed), the grid location is considered a potential adsorption target. From all potential adsorption targets, the system selects the grid location closest to the component's current position. When the user releases the mouse or stops dragging, the component automatically "adsorbs" to the best-matching grid location, and its coordinates are updated to the exact coordinates of that grid location. If the target area is detected to be occupied and overlap is not allowed, the user can either undo the drag operation, return the component to its original location, or display a prompt.

[0099] Furthermore, the grid parameters include: grid unit width, grid unit height, grid horizontal spacing, and grid vertical spacing. Step 108 includes the following specific implementations:

[0100] 1081. Read the temporary width and temporary height of the drag component;

[0101] 1082. Calculate the remainder of the temporary width to the grid unit width according to a preset width remainder formula and the horizontal spacing of the grid to obtain a width remainder.

[0102] 1083. Calculate the remainder of the temporary height to the grid unit width according to a preset height remainder formula and the grid longitudinal spacing to obtain a height remainder.

[0103] 1084. Determine whether both the width remainder and the height remainder are valid;

[0104] 1085. When both are valid, calculate the horizontal multiple of the temporary width relative to the grid unit width, and calculate the vertical multiple of the temporary height relative to the grid unit width;

[0105] 1086. Based on the horizontal multiple and the vertical multiple, perform size standardization calculation on the drag component to obtain a standard width and a standard height;

[0106] 1087. Scaling the drag component according to the standard width and standard height to obtain a scaled drag component.

[0107] 1088. Align the zoom-and-drag component according to the coordinate parameters of the valid grid unit to obtain a visualization component that adsorbs the grid unit.

[0108] In steps 1081-1088, the temporary width W and temporary height H of the drag component are read.

[0109] The following algorithm is executed in step 1082:

[0110] 10821. RemW = (W + G_X) % (GS_W + G_X), where RemW is the width remainder, W is the temporary width, GS_W is the grid unit width, G_X is the horizontal grid spacing, and % is the remainder operator;

[0111] The following algorithm is executed in step 1083:

[0112] 10831. RemH = (H + G_Y) % (GS_H + G_Y), where RemH is the height remainder, H is the temporary height, GS_H is the grid unit height, G_Y is the grid vertical spacing, and % is the remainder operator.

[0113] The width remainder RemW and the height remainder RemH are calculated through steps 1082-1083, and the validity of the width remainder RemW and the height remainder RemH is analyzed. If both the width remainder RemW and the height remainder RemH are valid, the process proceeds to step 1085 to calculate the scaling factor of the dragged component and obtain the horizontal and vertical multiples.

[0114] In step 1086, the obtained horizontal multiple and vertical multiple are calculated using the following algorithm:

[0115] 10861. newW = (GS_W + G_X) * multX - G_X, where newW is the standard width, GS_W is the grid unit width, G_X is the horizontal grid spacing, and multX is the horizontal multiplier.

[0116] 10862. newH = (GS_H + G_Y) * multY - G_Y, where newH is the standard height, GS_H is the grid unit height, G_Y is the vertical grid spacing, and multY is the vertical multiple.

[0117] The standard width newW and standard height newH are calculated in step 1086, and the drag component is scaled and adjusted to obtain a scaled drag component.

[0118] The coordinates of the upper left corner of the zoom-and-drag component are aligned with the coordinate parameters of the valid grid unit. After confirming again that the zoom-and-drag component will not collide with the placed components, the zoom-and-drag component is adsorbed and aligned to obtain a visual component of the adsorbed grid unit.

[0119] It should be noted that the user's scaling operation is only considered valid when the resulting size is close to an integer multiple of the grid unit plus the spacing. The system calculates the remainder of the width and height after scaling relative to (grid unit size + spacing), and checks whether these remainders fall within the "close" range defined by the magnetic attraction strength (that is, the remainder is very small, or the remainder is close to the grid unit size + spacing). If the scaling of both width and height meets this condition, the system will calculate the nearest integer multiple of the grid size (round up or down, depending on whether the remainder is less than the threshold or greater than the size - threshold), and force the size of the component to be adjusted to this normalized size (N*(unit size + spacing) - spacing). If the scaling does not meet the conditions, the operation is undone. After the size is adjusted, a position adsorption is automatically performed to ensure that the upper left corner of the component is aligned with the grid.

[0120] Specifically, step 1084 includes the following specific implementation methods:

[0121] 10841. Determine whether the width remainder is less than the horizontal magnetic attraction threshold or whether the width remainder is greater than the difference between the grid unit width and the horizontal magnetic attraction threshold;

[0122] 10842. When the width remainder is less than the horizontal magnetic attraction threshold or the width remainder is greater than the difference between the grid unit width and the horizontal magnetic attraction threshold, the width remainder is confirmed to be valid data;

[0123] 10843. Determine whether the height remainder is less than the longitudinal magnetic attraction threshold or the height remainder is greater than the difference between the grid unit height and the longitudinal magnetic attraction threshold;

[0124] 10844. When the height remainder is less than the longitudinal magnetic attraction threshold or the height remainder is greater than the difference between the grid unit height and the longitudinal magnetic attraction threshold, the height remainder is confirmed to be valid data.

[0125] In steps 10841-10844, set the first if condition to be satisfied: Condition1 or Condition2.

[0126] The width remainder is less than the horizontal magnetic attraction threshold, that is, Condition 1 = (width remainder < horizontal magnetic attraction threshold), and the width remainder is greater than the difference between the grid unit width and the horizontal magnetic attraction threshold, that is, Condition 2 = (width remainder > grid unit width - horizontal magnetic attraction threshold).

[0127] Set the second if condition to be met: Condition3 or Condition4.

[0128] The height remainder is less than the longitudinal magnetic attraction threshold, that is, Condition 3 = (height remainder < longitudinal magnetic attraction threshold), and the height remainder is greater than the difference between the grid unit height and the longitudinal magnetic attraction threshold, that is, Condition 4 = (height remainder > grid unit height - longitudinal magnetic attraction threshold).

[0129] Only when the first and second if conditions are met, it is determined that the width remainder and the height remainder are both valid data.

[0130] Specifically, step 1085 includes the following specific implementation methods:

[0131] 10851. When the width remainder is less than the horizontal magnetic attraction threshold, a preset first formula is executed to obtain a horizontal multiple, wherein the first formula includes:

[0132] multX = floor((W + G_X) / (GS_W + G_X), where multX is the horizontal multiplier, W is the temporary width, GS_W is the grid unit width, G_X is the horizontal grid spacing, and floor(*) is the floor function;

[0133] 10852. When the width remainder is greater than the difference between the grid unit width and the horizontal magnetic attraction threshold, a preset second formula is executed to obtain a horizontal multiple, wherein the second formula includes:

[0134] multX = floor((W + G_X) / (GS_W + G_X) + 1), where multX is the horizontal multiplier, W is the temporary width, GS_W is the grid unit width, G_X is the horizontal grid spacing, and floor(*) is the floor function;

[0135] 10853. When the temporary height is less than the longitudinal magnetic attraction threshold, a preset third formula is executed to obtain a longitudinal multiple, wherein the third formula includes:

[0136] multY = floor((H + G_Y) / (GS_H + G_Y), where multY is the vertical multiplier, H is the temporary height, GS_H is the grid unit height, G_Y is the vertical grid spacing, and floor(*) is the floor function;

[0137] 10854. When the temporary height is less than the difference between the grid unit height and the longitudinal magnetic attraction threshold, the preset fourth formula is executed to obtain the longitudinal multiple, wherein the fourth formula includes:

[0138] multY=floor((H+G_Y) / (GS_H+G_Y)+1), where multY is the vertical multiplier, H is the temporary height, GS_H is the grid unit height, G_Y is the grid vertical spacing, and floor(*) is the floor rounding function.

[0139] In steps 10851-10854, different multiple calculation methods are set based on the different situations of condition 1-4 judged in step 1084 to avoid dragging the edge of the component across the gap to adsorb an incomplete grid.

[0140] In an embodiment of the present invention, positions and sizes during the editing process are standardized based on a unified grid system, forcing component sizes to conform to grid multiples. This ensures a neat and standardized overall layout, and the generated layout information is more accurately reflected on the target mini-program end, reducing the discrepancy between the web preview and the actual mini-program effect, and improving cross-end consistency. Furthermore, the use of intelligent adsorption and size constraints significantly reduces the time users spend on manual alignment and resizing, improving the efficiency and accuracy of layout design, and resolving the technical issues with current solutions for generating visual components, which are difficult to precisely align and exhibit irregular layouts during web-to-mini-program mapping.

[0141] Figure 5 Schematic diagram of a device for generating a mesh component for a visual interface, provided in an embodiment of the present invention. The device 500 for generating a mesh component for a visual interface may vary significantly depending on configuration or performance. The device may include one or more central processing units (CPUs) 510 (e.g., one or more processors), a memory 520, and one or more storage media 530 (e.g., one or more mass storage devices) storing applications 533 or data 532. The memory 520 and storage medium 530 may be either transient or persistent storage. The program stored in the storage medium 530 may include one or more modules (not shown), each of which may include a series of instruction operations within the device 500 for generating a mesh component for a visual interface. Furthermore, the processor 510 may be configured to communicate with the storage medium 530, executing the series of instruction operations stored in the storage medium 530 on the device 500 for generating a mesh component for a visual interface.

[0142] The interface visualization-based mesh component generation device 500 may further include one or more power supplies 540, one or more wired or wireless network interfaces 550, one or more input and output interfaces 560, and / or one or more operating systems 531, such as Windows Server, Mac OS X, Unix, Linux, FreeBSD, etc. It will be understood by those skilled in the art that Figure 5 The illustrated interface visualization grid component generation device structure does not constitute a limitation on the interface visualization-based grid component generation device, and may include more or fewer components than shown in the figure, or combine certain components, or arrange the components differently.

[0143] The present invention also provides a computer-readable storage medium, which may be a non-volatile computer-readable storage medium or a volatile computer-readable storage medium. The computer-readable storage medium stores instructions, which, when executed on a computer, enable the computer to execute the steps of the method for generating a grid component for interface visualization.

[0144] In the context of the present disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in conjunction with an instruction execution system, device or equipment. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium can include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0145] In addition, although adopting specific order to describe each operation, this should be understood as requiring such operation to be carried out in the specific order shown or in sequential order, or requiring that all illustrated operations should be carried out to obtain desired results. Under certain circumstances, multitasking and parallel processing may be advantageous. Similarly, although comprising some specific implementation details in the above discussion, these should not be interpreted as limiting the scope of the present disclosure. Some features described in the context of separate embodiment can also be implemented in a single implementation in combination. On the contrary, the various features described in the context of a single implementation also can be implemented in a plurality of implementations individually or in the mode of any suitable subcombination.

[0146] Although the subject matter has been described in language specific to structural features and / or methodological logical acts, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are merely example forms of implementing the claims.

Claims

1. A method for generating a grid component for interface visualization, characterized in that: Including steps: Performing grid processing on the interface according to preset grid parameters to obtain an interface with N grid units, where N is a positive integer; Read the coordinate data of the dragged component; Traversing and selecting a target grid cell from the N grid cells; Calculating the horizontal and vertical differences between the coordinate data and the target grid unit to obtain a horizontal coordinate difference and a vertical coordinate difference; When the horizontal coordinate difference is less than the preset horizontal magnetic attraction threshold and the vertical coordinate difference is less than the preset vertical magnetic attraction threshold, it is determined whether the placement of the drag component in the target grid unit collides with an already placed component; When there is a collision, the next target grid unit among the N grid units is selected according to the preset collision overlap rule; When there is no collision, performing distance detection processing on the target grid unit based on the horizontal coordinate difference and the vertical coordinate difference to generate a valid grid unit; After traversing N grid units, the drag component is size-constrained and aligned according to the valid grid units to generate a visual component that adsorbs the grid units.

2. The method for generating a grid component for interface visualization according to claim 1, characterized in that: The performing distance search processing on the target grid unit based on the abscissa difference and the ordinate difference to obtain a valid grid unit includes: Calculate the horizontal coordinate difference and the vertical coordinate difference according to a preset distance formula to obtain the target distance; Determine whether the target distance is less than the preset minimum distance; When it is less than the preset minimum distance, the target distance is assigned to the minimum distance, and the target grid unit is assigned to the matching unit framework to generate a valid grid unit.

3. The method for generating a grid component for interface visualization according to claim 1, characterized in that: The grid parameters include: grid unit width, grid unit height, grid horizontal spacing, and grid vertical spacing. The interface is gridded according to the preset grid parameters to obtain an interface with N grid units, including: Read the display width and display height of the interface; Using the grid unit width and the grid horizontal spacing, set the cell horizontal value, and using the grid unit height and the grid vertical spacing, set the cell vertical value; Calculate the number of cell rows according to the display width and the cell horizontal value, and calculate the number of cell columns according to the display height and the cell vertical value; According to the preset starting offset, traverse the number of cell rows and the number of cell columns to calculate the coordinates of N grid cells; The interface is rendered based on the coordinates of the N grid units to obtain an interface with N grid units.

4. The method for generating a grid component for interface visualization according to claim 1, characterized in that: The grid parameters include: grid unit width, grid unit height, grid horizontal spacing, and grid vertical spacing. The dragging component is size-constrained and aligned according to the valid grid units to generate a visual component that adsorbs the grid units. Read the temporary width and temporary height of the drag component; Calculating the remainder of the temporary width to the grid unit width according to a preset width remainder formula and the horizontal spacing of the grid to obtain a width remainder; Calculating the remainder of the temporary height to the grid unit width according to a preset height remainder formula and the grid longitudinal spacing to obtain a height remainder; Determining whether both the width remainder and the height remainder are valid; If both are valid, then the horizontal multiple of the temporary width relative to the grid unit width is calculated, and the vertical multiple of the temporary height relative to the grid unit width is calculated; Based on the horizontal multiple and the vertical multiple, a size standard calculation is performed on the drag component to obtain a standard width and a standard height; Scaling the drag component according to the standard width and standard height to obtain a scaled drag component; The zoom-and-drag component is aligned according to the coordinate parameters of the effective grid unit to obtain a visual component that adsorbs the grid unit.

5. The method for generating a grid component for interface visualization according to claim 4, characterized in that: The calculating the remainder of the temporary width to the grid unit width according to the preset width remainder formula and the horizontal spacing of the grid to obtain the width remainder includes: RemW = (W + G_X) % (GS_W + G_X), where RemW is the width remainder, W is the temporary width, GS_W is the grid unit width, G_X is the horizontal grid spacing, and % is the remainder operator; The step of calculating the remainder of the temporary height to the grid unit width according to a preset height remainder formula and the grid longitudinal spacing to obtain the height remainder comprises: RemH=(H+G_Y)%(GS_H+G_Y), where RemH is the height remainder, H is the temporary height, GS_H is the grid unit height, G_Y is the grid vertical spacing, and % is the remainder operator.

6. The method for generating a grid component for interface visualization according to claim 4, characterized in that: The determining whether both the width remainder and the height remainder are valid includes: Determining whether the width remainder is less than the lateral magnetic attraction threshold or whether the width remainder is greater than a difference between the grid unit width and the lateral magnetic attraction threshold; When the width remainder is less than the horizontal magnetic attraction threshold or the width remainder is greater than the difference between the grid unit width and the horizontal magnetic attraction threshold, the width remainder is confirmed to be valid data; Determining whether the height remainder is less than the longitudinal magnetic attraction threshold or the height remainder is greater than the difference between the grid unit height and the longitudinal magnetic attraction threshold; When the height remainder is smaller than the longitudinal magnetic attraction threshold or the height remainder is larger than the difference between the grid unit height and the longitudinal magnetic attraction threshold, the height remainder is confirmed to be valid data.

7. The method for generating a grid component for interface visualization according to claim 6, characterized in that: The calculating of the horizontal multiple of the temporary width relative to the grid unit width and the calculating of the vertical multiple of the temporary height relative to the grid unit width includes: When the width remainder is less than the horizontal magnetic attraction threshold, a preset first formula is executed to obtain a horizontal multiple, wherein the first formula includes: multX = floor((W + G_X) / (GS_W + G_X), where multX is the horizontal multiplier, W is the temporary width, GS_W is the grid unit width, G_X is the horizontal grid spacing, and floor(*) is the floor function; When the width remainder is greater than the difference between the grid unit width and the horizontal magnetic attraction threshold, a preset second formula is executed to obtain a horizontal multiple, wherein the second formula includes: multX = floor((W + G_X) / (GS_W + G_X) + 1), where multX is the horizontal multiplier, W is the temporary width, GS_W is the grid unit width, G_X is the horizontal grid spacing, and floor(*) is the floor function; When the temporary height is less than the longitudinal magnetic attraction threshold, a preset third formula is executed to obtain a longitudinal multiple, wherein the third formula includes: multY = floor((H + G_Y) / (GS_H + G_Y), where multY is the vertical multiplier, H is the temporary height, GS_H is the grid unit height, G_Y is the vertical grid spacing, and floor(*) is the floor function; When the temporary height is less than the difference between the grid unit height and the longitudinal magnetic attraction threshold, the preset fourth formula is executed to obtain the longitudinal multiple, wherein the fourth formula includes: multY=floor((H+G_Y) / (GS_H+G_Y)+1), where multY is the vertical multiplier, H is the temporary height, GS_H is the grid unit height, G_Y is the grid vertical spacing, and floor(*) is the floor rounding function.

8. The method for generating a grid component for interface visualization according to claim 7, characterized in that: The performing size specification calculation on the drag component based on the horizontal multiple and the vertical multiple to obtain the standard width and standard height includes: newW = (GS_W + G_X) * multX - G_X, where newW is the standard width, GS_W is the grid unit width, G_X is the horizontal grid spacing, and multX is the horizontal multiplier; newH = (GS_H + G_Y) * multY - G_Y, where newH is the standard height, GS_H is the grid unit height, G_Y is the grid vertical spacing, and multY is the vertical multiple.

9. A device for generating a grid component with a visual interface, characterized in that: The interface visualization grid component generation device includes: a memory and at least one processor, the memory storing instructions, the memory and the at least one processor being interconnected via a line; The at least one processor calls the instructions in the memory to enable the interface visualization grid component generation device to execute the interface visualization grid component generation method according to any one of claims 1 to 8.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method for generating a grid component for interface visualization according to any one of claims 1 to 8 is implemented.

Images