Dragging type cross-page advertisement typesetting method and system based on web page web end

Abstract

The invention discloses a dragging type cross-page advertisement typesetting method and system based on a webpage web end, and the method comprises the steps: determining a material placement layout of dragging materials according to a mouse dragging sliding track on a canvas coordinate system; determining layout coordinates of placement points of the dragged materials based on the material placement layout; when the layout coordinate of the placement point does not exceed the boundary of the material placement layout, judging whether the dragged material and the collided material are overlapped or not; if the materials are overlapped, determining a recommended placement position of the dragged material through a preset collision position recommendation rule according to a placement point layout coordinate of the dragged material and a layout coordinate of the collided material; and realizing cross-page advertisement typesetting of the dragged material based on the recommended placement position. According to the method and the device, the coordinate displacement of the mouse operation is bound to the material element operated by the mouse, and the placement position conforming to the layout rule is realized in a preset collision position recommendation mode, so that the problem of overlapping typesetting of cross-layout dragging materials is solved.

Description

Technical Field

[0001] The present invention belongs to the technical field of advertisement typesetting, and in particular relates to a drag-and-drop cross-page advertisement typesetting method and system based on a web page. Background Art

[0002] The web-based newspaper advertising material drag-and-drop layout system belongs to the front-end software technology. Most of the existing solutions only perform drag operations on one surface, but do not involve dragging across multiple pages. When advertising materials overlap, they are only processed manually, and the control algorithm for recommending matching of related positions is not involved. Therefore, how to solve the overlapping layout of dragged materials across pages has become an urgent problem to be solved.

[0003] The above contents are only used to assist in understanding the technical solution of the present invention and do not constitute an admission that the above contents are prior art. Summary of the invention

[0004] The main purpose of the present invention is to provide a method and system for dragging cross-page advertisement layout based on a web page, aiming to solve the technical problem of how to solve the overlapping layout of dragged materials across layouts.

[0005] To achieve the above object, the present invention provides a drag-and-drop cross-page advertisement layout method based on a web page, and the drag-and-drop cross-page advertisement layout method based on a web page comprises:

[0006] In the canvas coordinate system, the material placement layout of the dragged material is determined according to the mouse dragging and sliding trajectory;

[0007] Determining the layout coordinates of the placement point of the dragged material based on the material placement layout;

[0008] When the layout coordinates of the placement point do not exceed the boundary of the material placement layout, determining whether there is material overlap between the dragged material and the collided material;

[0009] If there is material overlap, the recommended placement position of the dragged material is determined according to the layout coordinates of the placement point of the dragged material and the layout coordinates of the collided material by using a preset collision position recommendation rule;

[0010] The cross-page advertisement layout of the dragged material is realized based on the recommended placement position.

[0011] Optionally, after the step of determining the material placement layout of the dragged material according to the mouse dragging sliding trajectory, the method further includes:

[0012] Determining whether there is an auxiliary edge between the dragged material and the adsorbed material based on the material placement layout;

[0013] If the auxiliary edge exists, the dragged material is placed on the material placement layout according to the auxiliary edge.

[0014] Optionally, after the step of judging whether there is an auxiliary edge between the dragged material and the adsorbed material based on the material placement layout, the step further includes:

[0015] If the auxiliary edge does not exist, placing the dragged material on the material placement layout;

[0016] The pixel position of the dragged material is obtained, and the layout coordinates of the placement point of the dragged material are determined according to the pixel position.

[0017] Optionally, after the step of determining the layout coordinates of the placement point of the dragged material based on the material placement layout, the method further includes:

[0018] Determine whether the layout coordinates of the placement point exceed the boundary of the material placement layout;

[0019] If the layout coordinates of the placement point exceed the boundary of the material placement layout, determining the boundary exceeding mode according to the layout coordinates of the placement point and the width of the material placement layout;

[0020] Determine a coordinate adjustment rule for the layout coordinates of the placement point based on the out-of-bounds mode;

[0021] The boundary placement coordinates of the drag material are recommended according to the coordinate adjustment rule, and the layout coordinates of the placement point of the drag material are updated according to the boundary placement coordinates.

[0022] Optionally, the step of determining whether there is material overlap between the dragged material and the collided material includes:

[0023] Constructing a collision algorithm according to the vertex coordinates of the dragged material and the vertex coordinates of the collided material;

[0024] It is determined based on the collision algorithm whether there is any overlap between the dragged material and the collided material.

[0025] Optionally, the step of determining the recommended placement position of the dragged material according to the layout coordinates of the placement point of the dragged material and the layout coordinates of the collided material by using a preset collision position recommendation rule comprises:

[0026] Determining that the dragged material is at an overlapping position of the collided material according to the layout coordinates of the placement point of the dragged material and the layout coordinates of the collided material;

[0027] If the overlapping position is left-right overlapping, the dragged material is attached to the left-right position of the collided material;

[0028] When the adjusted drag material does not exceed the boundary of the material placement layout, determining whether the layout coordinates of the adjusted placement point of the drag material and the layout coordinates of the collided material overlap in the upper and lower sides;

[0029] If there is no upper and lower overlap, the recommended placement position of the dragged material is determined according to the left and right positions.

[0030] Optionally, after the step of attaching the dragged material to the left and right sides of the collided material, the method further includes:

[0031] When the adjusted dragged material exceeds the boundary of the material placement layout, the adjusted dragged material is attached to the boundary of the material placement layout.

[0032] Optionally, after the step of determining whether the layout coordinates of the placement point of the dragged material adjusted and the layout coordinates of the collided material overlap in the upper and lower sides, the step further includes:

[0033] If there is an overlap between the upper and lower sides, the dragged material is attached to the upper and lower sides of the collided material according to the layout coordinates of the placement point of the dragged material adjusted and the layout coordinates of the collided material;

[0034] The recommended placement position of the dragged material is determined according to the adjusted left and right positions and the adjusted upper and lower positions.

[0035] In addition, to achieve the above-mentioned purpose, the present invention also proposes a drag-and-drop cross-page advertisement layout system based on a web page, and the drag-and-drop cross-page advertisement layout system based on a web page includes:

[0036] The drag module is used to determine the placement layout of the dragged material according to the mouse dragging sliding track on the canvas coordinate system;

[0037] A determination module, used to determine the layout coordinates of the placement point of the dragged material based on the material placement layout;

[0038] A judgment module, used for judging whether there is material overlap between the dragged material and the collided material when the layout coordinates of the placement point do not exceed the boundary of the material placement layout;

[0039] A recommendation module, for determining a recommended placement position of the dragged material according to a preset collision position recommendation rule based on the layout coordinates of the placement point of the dragged material and the layout coordinates of the collided material if there is material overlap;

[0040] A layout module is used to implement cross-page advertising layout of the dragged material based on the recommended placement position.

[0041] In addition, to achieve the above-mentioned purpose, the present invention also proposes a drag-and-drop cross-page advertising layout device based on a web page, the device comprising: a memory, a processor, and a drag-and-drop cross-page advertising layout program based on a web page stored on the memory and runnable on the processor, the drag-and-drop cross-page advertising layout program based on the web page being configured to implement the steps of the drag-and-drop cross-page advertising layout method based on the web page as described above.

[0042] In addition, to achieve the above-mentioned purpose, the present invention also proposes a medium, on which a drag-and-drop cross-page advertising layout program based on a web page is stored. When the drag-and-drop cross-page advertising layout program based on a web page is executed by a processor, the steps of the drag-and-drop cross-page advertising layout method based on a web page as described above are implemented.

[0043] The present invention first determines the material placement layout of the dragged material according to the mouse dragging sliding trajectory on the canvas coordinate system; determines the placement point layout coordinates of the dragged material based on the material placement layout, and then, when the placement point layout coordinates do not exceed the boundary of the material placement layout, determines whether there is material overlap between the dragged material and the collided material, and if there is material overlap, determines the recommended placement position of the dragged material according to the placement point layout coordinates of the dragged material and the layout coordinates of the collided material through a preset collision position recommendation rule, and then realizes the cross-page advertising layout of the dragged material based on the recommended placement position. The present invention binds the coordinate displacement of the mouse operation to the material element operated by the mouse, and realizes the placement position that meets the layout rules by means of a preset collision position recommendation, thereby solving the overlapping layout of the dragged material across the layout. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] Figure 1 It is a structural diagram of a drag-and-drop cross-page advertisement typesetting device based on a web page in a hardware operating environment involved in an embodiment of the present invention;

[0045] Figure 2 It is a flow chart of the first embodiment of the drag-and-drop cross-page advertisement typesetting method based on a web page of the present invention;

[0046] Figure 3 A schematic diagram of a canvas coordinate system of a first embodiment of a drag-and-drop cross-page advertisement layout method based on a web page of the present invention;

[0047] Figure 4 It is a schematic diagram of the execution sequence of dragging materials in the first embodiment of the drag-and-drop cross-page advertisement typesetting method based on a web page of the present invention;

[0048] Figure 5A schematic diagram of auxiliary edges of a material placement layout of a first embodiment of a drag-and-drop cross-page advertisement typesetting method based on a web page of the present invention;

[0049] Figure 6 A schematic diagram of a collision algorithm code of a first embodiment of a drag-and-drop cross-page advertisement typesetting method based on a web page of the present invention;

[0050] Figure 7 A schematic diagram of a code for a preset collision position recommendation rule of a first embodiment of a drag-and-drop cross-page advertisement typesetting method based on a web page of the present invention;

[0051] Figure 8 This is a schematic diagram of the drag material position recommendation effect of the first embodiment of the drag-and-drop cross-page advertisement typesetting method based on a web page of the present invention;

[0052] Fig. 9 This is a structural block diagram of the first embodiment of the drag-and-drop cross-page advertisement typesetting system based on a web page of the present invention.

[0053] The realization of the purpose, functional features and advantages of the present invention will be further explained in conjunction with embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0054] It should be understood that the specific embodiments described herein are only used to explain the present invention, and are not used to limit the present invention.

[0055] Reference Figure 1 , Figure 1 The present invention is a schematic diagram of the structure of a drag-and-drop cross-page advertisement layout device based on a web page in the hardware operating environment involved in the embodiment of the present invention.

[0056] like Figure 1As shown, the drag-and-drop cross-page advertising layout device based on the web page may include: a processor 1001, such as a central processing unit (CPU), a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. Among them, the communication bus 1002 is used to realize the connection and communication between these components. The user interface 1003 may include a display screen (Display), an input unit such as a keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface and a wireless interface. The network interface 1004 may optionally include a standard wired interface and a wireless interface (such as a wireless fidelity (Wireless-Fidelity, Wi-Fi) interface). The memory 1005 may be a high-speed random access memory (Random Access Memory, RAM), or a stable non-volatile memory (Non-VolatileMemory, NVM), such as a disk storage. The memory 1005 may also be a storage system independent of the aforementioned processor 1001.

[0057] Those skilled in the art will understand that Figure 1 The structure shown in does not constitute a limitation on the drag-type cross-page advertisement layout device based on a web page, and may include more or fewer components than shown in the figure, or a combination of certain components, or a different arrangement of components.

[0058] like Figure 1 As shown, the memory 1005 as a medium may include an operating system, a network communication module, a user interface module, and a drag-and-drop cross-page advertisement layout program based on a web page.

[0059] exist Figure 1 In the drag-and-drop cross-page advertisement layout device based on a web page shown, the network interface 1004 is mainly used for data communication with a network server; the user interface 1003 is mainly used for data interaction with a user; the processor 1001 and the memory 1005 in the drag-and-drop cross-page advertisement layout device based on a web page of the present invention can be set in the drag-and-drop cross-page advertisement layout device based on a web page, and the drag-and-drop cross-page advertisement layout device based on a web page calls the drag-and-drop cross-page advertisement layout program based on a web page stored in the memory 1005 through the processor 1001, and executes the drag-and-drop cross-page advertisement layout method based on a web page provided in an embodiment of the present invention.

[0060] The embodiment of the present invention provides a drag-and-drop cross-page advertisement layout method based on a web page, referring to Figure 2 , Figure 2The present invention is a flowchart of a first embodiment of a drag-and-drop cross-page advertisement layout method based on a web page.

[0061] In this embodiment, the drag-and-drop cross-page advertisement layout method based on a web page includes the following steps:

[0062] Step S10: On the canvas coordinate system, determine the material placement layout of the dragged material according to the mouse dragging sliding trajectory.

[0063] It is easy to understand that the execution subject of this embodiment can be a web-based drag-and-drop cross-page advertising layout system with functions such as data processing, network communication and program running, or it can be other computer devices with similar functions, etc. This embodiment is not limited.

[0064] In this embodiment, reference Figure 3 , Figure 3 This is a schematic diagram of the canvas coordinate system of the first embodiment of the drag-type cross-page advertising layout method based on a web page of the present invention; the canvas contains multiple material placement layouts, and the user can use the mouse to drag a certain drag material from the current material placement layout to the target material placement layout to realize the dragging of the material in multiple material placement layouts.

[0065] It should also be noted that when dragging on a large canvas, the overall canvas coordinates are used. There is a relative coordinate system for the position of each surface on the canvas, which is used to confirm the position of the surface.

[0066] The drag material can be one or more. If there are multiple drag materials, they need to be processed in order according to the positions of each drag material, first left and right, then up and down.

[0067] In the specific implementation, refer to Figure 4 , Figure 4 This is a schematic diagram of the execution sequence of dragging materials in the first embodiment of the drag-type cross-page advertisement layout method based on a web page of the present invention; A is area search; B is the recommended position of the auxiliary line; C is the boundary position recommendation; D is the collision algorithm; and E is the collision position recommendation.

[0068] Furthermore, after the step of determining the material placement layout of the dragged material according to the mouse dragging sliding trajectory, it is determined whether there is an auxiliary edge line between the dragged material and the adsorbed material based on the material placement layout; if there is an auxiliary edge line, the dragged material is placed on the material placement layout according to the auxiliary edge line. If there is no auxiliary edge line, the dragged material is placed on the material placement layout; the pixel position of the dragged material is obtained, and the layout coordinates of the placement point of the dragged material are determined according to the pixel position.

[0069] In this embodiment, when you drag an element close to other elements, the position where it will be attached is displayed. This solution does not calculate the graphics in real time, but traverses the coordinates of all current elements according to the position of the mouse, and extends the edges of the elements that may be attached according to the coordinates of the elements to save performance. Figure 4 , Figure 4 This is a schematic diagram of the auxiliary edges of the material placement layout of the first embodiment of the drag-type cross-page advertising layout method based on the web side of the present invention. A layout coordinate system is constructed according to the material placement layout. When the advertisement being dragged (i.e., the dragged material) is close to other advertisements (i.e., the adsorbed material) based on the layout coordinate system and the position is appropriate, the auxiliary edges are displayed.

[0070] Auxiliary line L1 means that the left side of the dragged material is close to the right side of material A, and the coordinate X (horizontal coordinate) is consistent with the coordinate of material A + the width of material A. Auxiliary line L3 means that the dragged material is close to the bottom of material B, and the coordinate Y (vertical coordinate) is consistent with the y coordinate + height of material B. Similarly, when the mouse is released, the relevant coordinate position will be directly bound. When there is no auxiliary line, the placement position is calculated according to the pixel position. Reference Figure 5 , Figure 5 This is a schematic diagram of auxiliary edges of a material placement layout in the first embodiment of the drag-and-drop cross-page advertisement layout method based on a web page of the present invention.

[0071] Step S20: Determine the layout coordinates of the placement point of the dragged material based on the material placement layout.

[0072] Furthermore, after determining the layout coordinates of the placement point of the dragged material according to the layout coordinate system, it is determined whether the placement point layout coordinates exceed the boundary of the material placement layout; if the placement point layout coordinates exceed the boundary of the material placement layout, the boundary exceeding mode is determined according to the placement point layout coordinates and the surface width of the material placement layout; based on the boundary exceeding mode, the coordinate adjustment rules of the placement point layout coordinates are determined; according to the coordinate adjustment rules, the boundary placement coordinates of the dragged material are recommended, and the placement point layout coordinates of the dragged material are updated according to the boundary placement coordinates.

[0073] It should also be noted that there are two ways to exceed the boundary. One is to drag the material to x<0 or x>page width, and the corresponding coordinate adjustment rules are: when x<0, set x to 0; when x>page width, set x to page width-material width.

[0074] Step S30: When the layout coordinates of the placement point do not exceed the boundary of the material placement layout, it is determined whether there is material overlap between the dragged material and the collided material.

[0075] In this embodiment, a collision algorithm is constructed according to the vertex coordinates of the dragged material and the vertex coordinates of the collided material; and based on the collision algorithm, it is determined whether there is material overlap between the dragged material and the collided material.

[0076] In the specific implementation, refer to Figure 6 , Figure 6 This is a schematic diagram of the collision algorithm code of the first embodiment of the drag-and-drop cross-page advertisement typesetting method based on a web page of the present invention. The collision algorithm is used in a loop to obtain the x coordinate, y coordinate, width, and height (x, y, width, height) of the collided material information. According to the 4 vertex coordinates of the dragged material and the 4 vertex coordinates of the collided material, the width overlap value of the dragged material and the collided material, and the height overlap value, it is determined whether there is material overlap between the dragged material and the collided material.

[0077] Step S40: If there is material overlap, the recommended placement position of the dragged material is determined according to the layout coordinates of the placement point of the dragged material and the layout coordinates of the collided material through a preset collision position recommendation rule.

[0078] Further, refer to Figure 7 , Figure 7 This is a schematic diagram of the preset collision position recommendation rule code of the first embodiment of the drag-and-drop cross-page advertisement typesetting method based on the web page of the present invention. The dragged material is determined to be in the overlapping position of the collided material according to the layout coordinates of the placement point of the dragged material and the layout coordinates of the collided material; if the overlapping position is a left-right overlap, the dragged material is attached to the left-right position of the collided material; when the adjusted dragged material does not exceed the boundary of the material placement layout, it is determined whether the layout coordinates of the adjusted placement point of the dragged material and the layout coordinates of the collided material have an upper and lower overlap; if there is no upper and lower overlap, the recommended placement position of the dragged material is determined according to the left and right positions. If there is an upper and lower overlap, the dragged material is attached to the upper and lower positions of the collided material according to the layout coordinates of the adjusted placement point of the dragged material and the layout coordinates of the collided material; the recommended placement position of the dragged material is determined according to the adjusted left and right positions and the adjusted upper and lower positions.

[0079] After the step of fitting the dragged material to the left and right sides of the collided material, when the adjusted dragged material exceeds the boundary of the material placement layout, the adjusted dragged material is fitted to the boundary of the material placement layout.

[0080] In the specific implementation, the relative positions of the horizontal center points of the dragged material and the collided material are compared. If the dragged material is on the left side of the collided material, it will be close to the left side of the collided material. However, if it exceeds the boundary of the gray area (that is, the boundary of the material area can exist on the layout), the x coordinate will be set to 0, close to the boundary.

[0081] Compare the relative positions of the horizontal center points of the dragged material and the collided material. If the dragged material is on the right side of the collided material, it will be close to the right side of the collided material. However, if it exceeds the boundary of the gray area for cutting (that is, the boundary of the material area can exist on the layout), the x coordinate will be the width of the cutting area, close to the boundary.

[0082] Compare the relative positions of the height center points of the dragged material and the collided material. If the dragged material is higher than the collided material, it will move upwards and stick to the top of the collided material next time. Otherwise, it will stick to the bottom of the collided material.

[0083] It should also be noted that the position adjustment rules of dragging materials should meet the requirements of left and right first, then up and down. Figure 8 , Figure 8 This is a schematic diagram of the drag material position recommendation effect of the first embodiment of the drag-and-drop cross-page advertisement typesetting method based on the web end of the present invention. The collision needs to be repeated 3 times. When there is no collision, check again whether it exceeds the boundary, and then get the recommended position.

[0084] Step S50: Implementing cross-page advertising layout of the dragged material based on the recommended placement position.

[0085] In the specific implementation, both general materials and cross-page materials perform the above-mentioned behaviors, but cross-page ads have the following special features:

[0086] (1) The border range container changes to twice the normal width, and the height remains unchanged.

[0087] (2) When such a layout exists, the two surfaces are merged to calculate the coordinates.

[0088] (3) The material is fixedly stored on the left page. Regardless of whether the entire publication is opened on the left or right, the relationship between the page number and the left or right opening is used to determine whether the material is fixedly bound to the left, and the upper left corner is strictly followed as the coordinate origin.

[0089] (4) Since the middle part of the two pages needs to be occupied, there is a behavior of exceeding the boundary. During the drag operation, the width of the middle layer is not determined. Therefore, the width of the middle layer is subtracted when calculating the pixel display.

[0090] It should be understood that in actual operation, the range width is subtracted, but when storing data, this width is added again according to the specific number of centimeters of the interlayer width of different layouts to provide completeness for subsequent data.

[0091] It should also be noted that the relationship between the centimeter data and the pixel data displayed on the screen is converted proportionally according to different newspaper ratios. In this way, the template for displaying the newspaper simulation effect on the screen can be used uniformly. The unit conversion problem is solved by obtaining the centimeter value of the total width and height of different layouts and the pixel width and height value of the fixed template and storing the ratio.

[0092] At the same time, the relationship between the screen display and the actual centimeter data is decoupled. Only the offset caused by the operation is added to the original data coordinates during each drag operation, ensuring the integrity of the data. (The actual operation is pixel value, and when storing, the centimeter value is used. The value is only converted to pixel display. The data converted to pixels is not directly stored after a series of calculations. Instead, the offset is incrementally updated on the original data to calibrate the deviation).

[0093] In this embodiment, on the canvas coordinate system, the material placement layout of the dragged material is first determined according to the mouse dragging sliding trajectory; the placement point layout coordinates of the dragged material are determined based on the material placement layout, and then when the placement point layout coordinates do not exceed the boundary of the material placement layout, it is determined whether there is material overlap between the dragged material and the collided material. If there is material overlap, the recommended placement position of the dragged material is determined according to the placement point layout coordinates of the dragged material and the layout coordinates of the collided material through the preset collision position recommendation rules, and then the cross-page advertising layout of the dragged material is realized based on the recommended placement position. This embodiment binds the coordinate displacement of the mouse operation to the material element operated by the mouse, and realizes the placement position that complies with the layout rules by means of the preset collision position recommendation, thereby solving the overlapping layout of the dragged material across the layout, ensuring the integrity of the operation data, and ensuring the operation order when multiple people are editing at the same time. At the same time, the performance is guaranteed to handle the dragging of materials of about 300 faces, and a single page will not freeze.

[0094] Reference Fig. 9 , Fig. 9 This is a structural block diagram of the first embodiment of the drag-and-drop cross-page advertisement typesetting system based on a web page of the present invention.

[0095] like Fig. 9 As shown, the drag-and-drop cross-page advertisement layout system based on a web page proposed in an embodiment of the present invention includes:

[0096] The drag module 1010 is used to determine the material placement layout of the dragged material according to the mouse dragging sliding track on the canvas coordinate system;

[0097] A determination module 1020, configured to determine the layout coordinates of the placement point of the dragged material based on the material placement layout;

[0098] A determination module 1030 is used to determine whether there is material overlap between the dragged material and the collided material when the layout coordinates of the placement point do not exceed the boundary of the material placement layout;

[0099] The recommendation module 1040 is used to determine the recommended placement position of the dragged material according to the layout coordinates of the placement point of the dragged material and the layout coordinates of the collided material by using a preset collision position recommendation rule if there is material overlap;

[0100] The layout module 1050 is used to implement the cross-page advertisement layout of the dragged material based on the recommended placement position.

[0101] Other embodiments or specific implementation methods of the drag-and-drop cross-page advertisement typesetting system based on the web page of the present invention can refer to the above-mentioned method embodiments, which will not be repeated here.

[0102] It should be noted that, in this article, the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, article or system including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, article or system. In the absence of further restrictions, an element defined by the sentence "comprises a ..." does not exclude the existence of other identical elements in the process, method, article or system including the element.

[0103] The serial numbers of the above embodiments of the present invention are only for description and do not represent the advantages or disadvantages of the embodiments.

[0104] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a medium (such as a read-only memory / random access memory, a magnetic disk, or an optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present invention.

[0105] The above are only preferred embodiments of the present invention, and are not intended to limit the patent scope of the present invention. Any equivalent structure or equivalent process transformation made using the contents of the present invention specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present invention.

Claims

1. A drag-and-drop cross-page advertisement layout method based on a web page, characterized in that: The drag-and-drop cross-page advertisement layout method based on a web page comprises the following steps: In the canvas coordinate system, the material placement layout of the dragged material is determined according to the mouse dragging and sliding trajectory; Determining the layout coordinates of the placement point of the dragged material based on the material placement layout; When the layout coordinates of the placement point do not exceed the boundary of the material placement layout, determining whether there is material overlap between the dragged material and the collided material; If there is material overlap, the recommended placement position of the dragged material is determined according to the layout coordinates of the placement point of the dragged material and the layout coordinates of the collided material by using a preset collision position recommendation rule; The cross-page advertisement layout of the dragged material is realized based on the recommended placement position.

2. The method according to claim 1, characterized in that After the step of determining the material placement layout of the dragged material according to the mouse dragging sliding track, the method further includes: Determining whether there is an auxiliary edge between the dragged material and the adsorbed material based on the material placement layout; If the auxiliary edge exists, the dragged material is placed on the material placement layout according to the auxiliary edge.

3. The method according to claim 2, characterized in that After the step of judging whether there is an auxiliary edge line between the dragged material and the adsorbed material based on the material placement layout, the method further includes: If the auxiliary edge does not exist, placing the dragged material on the material placement layout; The pixel position of the dragged material is obtained, and the layout coordinates of the placement point of the dragged material are determined according to the pixel position.

4. The method according to any one of claims 1 to 3, characterized in that: After the step of determining the layout coordinates of the placement point of the dragged material based on the material placement layout, the method further includes: Determine whether the layout coordinates of the placement point exceed the boundary of the material placement layout; If the layout coordinates of the placement point exceed the boundary of the material placement layout, determining the boundary exceeding mode according to the layout coordinates of the placement point and the width of the material placement layout; Determine a coordinate adjustment rule for the layout coordinates of the placement point based on the out-of-bounds mode; The boundary placement coordinates of the drag material are recommended according to the coordinate adjustment rule, and the layout coordinates of the placement point of the drag material are updated according to the boundary placement coordinates.

5. The method according to claim 4, characterized in that The step of determining whether there is material overlap between the dragged material and the collided material comprises: Constructing a collision algorithm according to the vertex coordinates of the dragged material and the vertex coordinates of the collided material; It is determined based on the collision algorithm whether there is any overlap between the dragged material and the collided material.

6. The method according to claim 5, characterized in that The step of determining the recommended placement position of the dragged material according to the layout coordinates of the placement point of the dragged material and the layout coordinates of the collided material by using a preset collision position recommendation rule comprises: Determining that the dragged material is at an overlapping position of the collided material according to the layout coordinates of the placement point of the dragged material and the layout coordinates of the collided material; If the overlapping position is left-right overlapping, the dragged material is attached to the left-right position of the collided material; When the adjusted drag material does not exceed the boundary of the material placement layout, determining whether the layout coordinates of the adjusted placement point of the drag material and the layout coordinates of the collided material overlap in the upper and lower sides; If there is no upper and lower overlap, the recommended placement position of the dragged material is determined according to the left and right positions.

7. The method according to claim 6, characterized in that After the step of attaching the dragged material to the left and right sides of the collided material, the method further includes: When the adjusted dragged material exceeds the boundary of the material placement layout, the adjusted dragged material is attached to the boundary of the material placement layout.

8. The method according to claim 7, characterized in that After the step of determining whether the layout coordinates of the placement point of the dragged material adjusted and the layout coordinates of the collided material overlap in the upper and lower sides, the method further includes: If there is an overlap between the upper and lower sides, the dragged material is attached to the upper and lower sides of the collided material according to the layout coordinates of the placement point of the dragged material adjusted and the layout coordinates of the collided material; The recommended placement position of the dragged material is determined according to the adjusted left and right positions and the adjusted upper and lower positions.

9. A drag-and-drop cross-page advertisement layout system based on a web page, characterized in that: The web-based drag-and-drop cross-page advertisement layout system includes: The drag module is used to determine the placement layout of the dragged material according to the mouse dragging sliding track on the canvas coordinate system; A determination module, used to determine the layout coordinates of the placement point of the dragged material based on the material placement layout; A judgment module, used for judging whether there is material overlap between the dragged material and the collided material when the layout coordinates of the placement point do not exceed the boundary of the material placement layout; A recommendation module, for determining a recommended placement position of the dragged material according to a preset collision position recommendation rule based on the layout coordinates of the placement point of the dragged material and the layout coordinates of the collided material if there is material overlap; A layout module is used to implement cross-page advertising layout of the dragged material based on the recommended placement position.

Images