CN112346725B - Page design method, device, equipment and storage medium - Google Patents
Page design method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN112346725B CN112346725B CN202011221435.0A CN202011221435A CN112346725B CN 112346725 B CN112346725 B CN 112346725B CN 202011221435 A CN202011221435 A CN 202011221435A CN 112346725 B CN112346725 B CN 112346725B
- Authority
- CN
- China
- Prior art keywords
- size
- canvas layer
- layout container
- layout
- container
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000013461 design Methods 0.000 title claims abstract description 62
- 238000000034 method Methods 0.000 title claims abstract description 59
- 230000008859 change Effects 0.000 claims abstract description 21
- 238000004873 anchoring Methods 0.000 claims description 62
- 230000006870 function Effects 0.000 claims description 26
- 238000004590 computer program Methods 0.000 claims description 20
- 230000003993 interaction Effects 0.000 claims description 14
- 238000004422 calculation algorithm Methods 0.000 claims description 11
- 238000010586 diagram Methods 0.000 description 15
- 230000008569 process Effects 0.000 description 6
- 238000005516 engineering process Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 3
- 238000010422 painting Methods 0.000 description 3
- 238000004458 analytical method Methods 0.000 description 2
- 238000004364 calculation method Methods 0.000 description 2
- 238000013079 data visualisation Methods 0.000 description 2
- 238000000059 patterning Methods 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 230000001360 synchronised effect Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000004044 response Effects 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/34—Graphical or visual programming
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
The application relates to a page design method, a device, equipment and a storage medium, wherein the method comprises the following steps: generating at least one layout container on the canvas layer; when the size of the canvas layer is detected to be changed, the size of the layout container is adjusted according to the size change proportion of the canvas layer, so that the relative position of the layout container and the canvas layer is kept unchanged. The technical scheme provided by the embodiment of the application can improve the efficiency of page design.
Description
Technical Field
The present application relates to the field of electronic information technologies, and in particular, to a method, an apparatus, a device, and a storage medium for page design.
Background
Business intelligence (Business Intelligence, BI) data visualization analysis has been widely used in large enterprises, and when displaying the results of the data visualization analysis, the results are usually displayed on pages designed by a page designer.
When the page designer is utilized to design a page, the page designer comprises a plurality of functions, such as functions of page control generation based on canvas, page control dragging and dropping or scaling, page control position layout, page control editing and the like, wherein the page control generation function and the page control position layout function based on canvas are very important for page design. At present, a common technology for realizing the two functions adopts a determinant grid layout method, pages are virtually divided into a plurality of grids through the preset determinant number, each grid forms a layout container, and page controls are dragged and dropped by a mouse and placed in the layout container, so that page control generation and page control position layout are realized.
However, in the prior art, when the page is adjusted according to the actual service requirement, the number of rows and columns is required to be repeatedly modified to adjust the position layout of the control, so that the flexibility of the page control generating function and the page control position layout function based on canvas is poor, and the efficiency of page design is reduced.
Disclosure of Invention
Based on the above, the embodiment of the application provides a page design method, a device, equipment and a storage medium, which can improve the efficiency of page design.
In a first aspect, a page design method is provided, the method including:
generating at least one layout container on the canvas layer; when the size of the canvas layer is detected to be changed, the size of the layout container is adjusted according to the size change proportion of the canvas layer, so that the relative position of the layout container and the canvas layer is kept unchanged.
In one embodiment, the relative position of the layout container and the canvas layer remains unchanged, including:
the distance and anchoring direction between the anchor points of the layout container and the anchor points of the canvas layer remain consistent.
In one embodiment, scaling the layout container according to the dimension change ratio of the patterning layer includes:
Determining an anchor point of the layout container and an anchor point of the canvas layer; acquiring a first distance between an anchor point of a layout container and an anchor point of a canvas layer before the size of the canvas layer changes; acquiring the size of the canvas layer after the size of the canvas layer is changed; and adjusting the current size of the layout container in the anchoring direction according to the size of the canvas layer after the size is changed until the second distance between the anchoring point of the adjusted layout container and the anchoring point of the adjusted canvas layer is equal to the first distance.
In one embodiment, the method further comprises:
and responding to the control operation instruction, moving the target functional control into the target layout container, and generating and displaying the HTML page content.
In one embodiment, the method further comprises:
and when the size of the target layout container is changed, adjusting the display size of the HTML page content according to the size proportion of the target layout container.
In one embodiment, generating at least one layout container on a canvas layer comprises:
acquiring at least one container generation operation instruction based on the picture layout layer; the container generating operation instruction comprises a starting position, an ending position and an operation path of the operation; and generating at least one layout container according to the starting position, the ending position and the operation path by adopting a moving path algorithm.
In one embodiment, the method further comprises:
when the trigger operation is acquired based on the picture layout layer, judging whether a region corresponding to a trigger position of the trigger operation contains a functional control or not; and if the function control is included, acquiring a setting instruction based on the canvas design interface and/or the canvas interaction interface, and setting attribute information of the function control according to the setting instruction.
In a second aspect, there is provided a page designing apparatus including:
a generation module for generating at least one layout container on the canvas layer;
and the adjusting module is used for adjusting the size of the layout container according to the size change proportion of the canvas layer when the size of the canvas layer is detected to be changed, so that the relative position of the layout container and the canvas layer is kept unchanged.
In a third aspect, there is provided a computer device comprising a memory and a processor, the memory storing a computer program which, when executed by the processor, performs the method steps of any of the embodiments of the first aspect described above.
In a fourth aspect, a computer-readable storage medium is provided, on which a computer program is stored which, when executed by a processor, carries out the method steps in any of the embodiments of the first aspect described above.
The page design method, the device, the equipment and the storage medium generate at least one layout container on a canvas layer; when the size of the canvas layer is detected to be changed, the size of the layout container is adjusted according to the size change proportion of the canvas layer, so that the relative position of the layout container and the canvas layer is kept unchanged. When the size of the canvas layer changes, the relative positions of the layout container and the picture layer are kept unchanged, and the size of the layout container can be adjusted in a self-adaptive mode according to the change of the size of the picture layer, so that page contents can be flexibly adjusted according to actual service requirements, and page design efficiency is improved.
Drawings
FIG. 1 is a block diagram of a computer device according to an embodiment of the present application;
FIG. 2 is a flow chart of a page design method according to an embodiment of the present application;
FIG. 3 is a schematic diagram of a layout container according to an embodiment of the present application;
FIG. 4 is a flowchart of a page design method according to an embodiment of the present application;
FIG. 5 is a flowchart of a page design method according to an embodiment of the present application;
FIG. 6 is a flowchart of a page design method according to an embodiment of the present application;
FIG. 7 is a schematic diagram of a page designer according to an embodiment of the present application;
FIG. 8 is a flowchart of a page design method according to an embodiment of the present application;
FIG. 9 is a block diagram of a page design apparatus according to an embodiment of the present application;
FIG. 10 is a block diagram of a page design apparatus according to an embodiment of the present application;
FIG. 11 is a block diagram of a page design apparatus according to an embodiment of the present application;
FIG. 12 is a block diagram of a page design apparatus according to an embodiment of the present application;
FIG. 13 is a block diagram of a page design apparatus according to an embodiment of the present application;
fig. 14 is a block diagram of a page design apparatus according to an embodiment of the present application.
Detailed Description
For the purpose of making the objects, technical solutions and advantages of the present application more apparent, the embodiments of the present application will be described in further detail with reference to the accompanying drawings.
The page design method provided by the application can be applied to a page designer, wherein the page designer can be a computer device, a server or a terminal, and the embodiment of the application is not particularly limited. As shown in fig. 1, the page designer may include a processor and memory connected by a system bus. Wherein the processor of the page designer is configured to provide computing and control capabilities. The memory of the page designer includes a non-volatile storage medium and an internal memory. The nonvolatile storage medium stores an operating system, a computer program, and a database. The internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage media. The computer program is executed by a processor to implement a page design method.
The following describes the technical scheme of the present application and how the technical scheme of the present application solves the above technical problems in detail by examples and with reference to the accompanying drawings. The following embodiments may be combined with each other, and the same or similar concepts or processes may not be described in detail in some embodiments. It should be noted that, in the page design method provided by the present application, the execution body in fig. 2-8 is a page designer, where the execution body may also be a page design device, where the device may be implemented in a manner of software, hardware or a combination of software and hardware to become part or all of the page designer.
In one embodiment, as shown in fig. 2, which shows a flowchart of a page design method provided by an embodiment of the present application, the embodiment relates to a process of adjusting a layout container size according to a layout layer size, and the method may include the following steps:
step 201, at least one layout container is generated on the canvas layer.
The canvas is an interface for drawing, and the drawn graph can contain a plurality of target shapes, that is, the final graph is formed by overlapping, splicing and arranging the plurality of target shapes. In order to perform drawing operations on different target shapes, it is necessary to layer the Canvas, different Canvas layers may be used to draw different target shapes in the same pair of graphics, two or more Canvas layers may be created on the Canvas based on the Canvas layering technology provided by the HTML Canvas API (which is a Canvas application program interface), and the final graphics may be obtained after all Canvas layers are superimposed. For example, if there is only one target shape in a pair of graphics, two canvas layers may be created on the canvas, where the bottom layer is the background layer of the graphics and the top layer is the target shape layer of the graphics, and the two layers are stacked to obtain the final graphics. Among them, canvas API is a technology capable of generating graphics in real time and manipulating graphic contents.
The final graphics can be used as HTML page content to be displayed on the canvas, and because the page content is encapsulated in the control and the control cannot be directly displayed in the canvas, a layout container is needed to be generated on the canvas to place the control, and the layout container is a carrier for placing the control. According to the actual business requirements, a layout container can be generated on the canvas, a plurality of layout containers can be generated, and one control can be placed in one layout container, and a plurality of controls can be placed in one layout container. When generating the layout container on the canvas, the layout container may be generated by responding to a mouse movement operation, which may include responding to a start position and an end position of the movement, and locating a path of the movement in real time.
Step 202, when the size of the canvas layer is detected to be changed, the size of the layout container is adjusted according to the size change proportion of the canvas layer, so that the relative position of the layout container and the canvas layer is kept unchanged.
The size of the painting layer changes, which may include enlarging the size of the painting layer or reducing the size of the painting layer. When the size of the canvas layer is detected to be changed, the size of the layout container is adjusted according to the size change proportion of the canvas layer, for example, when the size of the canvas layer is detected to be twice as large as the original size, the size of the layout container is correspondingly adjusted to be twice as large as the original size of the layout container, so that the relative positions of the layout container and the canvas layer are kept unchanged.
When the relative position of the layout container and the canvas layer is kept unchanged, the relative position of the layout container and the canvas layer can be kept unchanged by fixing the linear distance and the direction from any vertex of the layout container to the vertex with the same azimuth of the canvas layer, for example, by fixing the linear distance and the direction from the top left corner vertex of the layout container to the top left corner vertex of the canvas layer. When the linear distance between the anchor point of the layout container and the anchor point of the canvas layer is fixed, the linear distance between the anchor point of the layout container and the anchor point of the canvas layer can be directly set, and the linear distance between the anchor point of the layout container and the anchor point of the canvas layer can be calculated according to the width distance and the height distance by setting the width distance between the layout container and the left/right edge of the canvas layer and the height distance between the layout container and the upper/lower edge of the canvas layer. When setting the linear distance value from any vertex of the layout container to the vertex of the canvas layer in the same direction, the distance value can be expressed in a mode of percentage relative to the dimension of the canvas layer, can be expressed in a mode of fixed distance value, can also be expressed in a mode of calculation expression formed by combining the percentage and the fixed distance value, and the units of the distance values are pixels.
When the anchoring direction between the anchoring point of the layout container and the anchoring point of the canvas layer is fixed, the anchoring direction between the anchoring point of the layout container and the anchoring point of the canvas layer can be kept consistent by fixing the direction angle of the anchoring direction, and the direction angle can be an included angle between a connecting line between the anchoring point of the layout container and the anchoring point of the canvas layer and any edge where the anchoring point of the canvas layer is located.
In this embodiment, at least one layout container is generated on the canvas layer; when the size of the canvas layer is detected to be changed, the size of the layout container is adjusted according to the size change proportion of the canvas layer, so that the relative position of the layout container and the canvas layer is kept unchanged. When the size of the canvas layer changes, the relative positions of the layout container and the picture layer are kept unchanged, and the size of the layout container can be adjusted in a self-adaptive mode according to the change of the size of the picture layer, so that page contents can be flexibly adjusted according to actual service requirements, and page design efficiency is improved.
In one embodiment, the relative position of the layout container and the canvas layer remains unchanged, including: the distance and anchoring direction between the anchor points of the layout container and the anchor points of the canvas layer remain consistent. The anchor point of the layout container is a target point determined on the layout container, and the target point can be a point at any position on the layout container, and in practical application, any point of four vertexes of the layout container is usually taken as the anchor point of the layout container. Similarly, the anchor point of the canvas layer may be any of the four vertices of the canvas layer, and it should be noted that the anchor point of the layout container and the anchor point of the canvas layer remain the same, for example, if the anchor point of the layout container is an upper left corner vertex, then the anchor point of the canvas layer should also be an upper left corner vertex.
In keeping the distance between the anchor point of the layout container and the anchor point of the canvas layer consistent, optionally, the distance between the anchor point of the layout container and the anchor point of the canvas layer may be calculated by fixing the width distance of the layout container from the left/right edge and the height distance from the upper/lower edge of the canvas layer according to the width distance, the height distance and the direction angle. In keeping the anchoring directions between the anchoring points of the layout container and the canvas layer consistent, wherein the anchoring directions may include four directions, as shown in FIG. 3, the upper left corner direction and the directions shown by the other three arrows may all be used as the anchoring directions. For example, if the anchoring direction is in the direction of the upper left corner, the width distance between the layout container and the left edge of the canvas layer is 50 pixels, the height distance between the layout container and the upper edge is 50 pixels, and the included angle between the connecting line between the anchoring point of the layout container and the anchoring point of the canvas layer and the upper edge where the anchoring point of the canvas layer is located, that is, the direction angle is 45 degrees, the distance between the anchoring point of the layout container and the anchoring point of the canvas layer is calculated to be approximately 71 pixels.
In this embodiment, the distance and the anchoring direction between the anchoring point of the layout container and the anchoring point of the canvas layer are set to be consistent at the same time, so that the relative position of the layout container and the canvas layer can be ensured to be unchanged more accurately.
The following describes a specific procedure for adjusting the size of the layout container according to the size variation ratio of the patterning layer:
in one embodiment, as shown in fig. 4, which shows a flowchart of a page design method provided by an embodiment of the present application, the embodiment relates to a process of adjusting a size of a layout container according to a size change proportion of a layout layer, and the method may include the following steps:
step 401, determining an anchor point of a layout container and an anchor point of a canvas layer.
Step 402, obtaining a first distance between an anchor point of a layout container and an anchor point of a canvas layer before a change in a dimension of the canvas layer occurs.
Step 403, obtaining the size of the canvas layer after the size of the canvas layer is changed.
And step 404, adjusting the current size of the layout container in the anchoring direction according to the size of the canvas layer after the size is changed until the second distance between the anchor point of the adjusted layout container and the anchor point of the canvas layer is equal to the first distance.
The specific content and the determining method of the anchor points of the layout container and the anchor points of the canvas layer may refer to the above embodiments, and are not described herein. The first distance is the distance between the anchor point of the layout container in the original canvas layer and the anchor point of the canvas layer. If the distance between the anchor point of the layout container and the anchor point of the canvas layer is directly set and the distance value is stored in the page designer, the distance value can be directly called to obtain a first distance value; if the distance between the anchor point of the layout container and the anchor point of the canvas layer is derived from the width distance, the height distance, and the direction angle, then the first distance needs to be obtained after calculation.
After the size of the canvas layer is changed, the current size of the layout container is adjusted in the anchoring direction according to the size of the canvas layer, the positions of the anchor points of the adjusted layout container and the anchor points of the adjusted canvas layer can be positioned in real time, a second distance between the anchor points of the adjusted layout container and the anchor points of the adjusted canvas layer is calculated, and the second distance is compared with the first distance until the distance value is equal to the first distance value.
In this embodiment, before the size of the canvas layer is changed, the first distance between the anchor point of the layout container and the anchor point of the canvas layer is obtained by determining the anchor point of the layout container and the anchor point of the canvas layer, the size of the canvas layer after the size of the canvas layer is changed is obtained, and the current size of the layout container is adjusted in the anchoring direction according to the size of the canvas layer after the size is changed until the second distance between the anchor point of the adjusted layout container and the anchor point of the adjusted canvas layer is equal to the first distance. The size of the layout container is adaptively adjusted according to the size change of the picture layout layer, so that the page content can be flexibly adjusted according to actual service requirements, and the page design efficiency is improved. And the accuracy in the process of adjusting the size of the layout container is improved by quantitatively comparing the second distance with the first distance.
In one embodiment, after the layout container is generated, the corresponding control is placed in the layout container according to different page contents to be displayed, and then the page contents are generated according to the control. Optionally, the hypertext markup language HTML page content is generated and displayed by moving the target functionality control into the target layout container in response to the control operation instruction. The target function control is a control capable of calling and generating specific page content, for example, a control capable of calling and generating data content, a control capable of calling and generating chart content and the like. Because the target function control is a section of HTML code block, after the target function control is moved to the target layout container, the HTML page content of the hypertext markup language corresponding to the target function control is displayed on the canvas layer. In this embodiment, the page content can be directly generated and displayed according to the control placed in the layout container, and the corresponding target function is completed by displaying the corresponding page content, so that the operation of the user is facilitated, and the efficiency of page design is improved.
In one embodiment, the controls are placed in a layout container and page content is generated based on the controls, and when the size of the layout container changes, the display size of the corresponding page content also changes. Optionally, when the size of the target layout container changes, the display size of the HTML page content is adjusted according to the size proportion of the target layout container. When the size of the target layout container is changed, the size of the control can be proportionally adjusted according to the changed size of the target layout container, so that the display size of the HTML page content can be correspondingly adjusted, the HTML page content can be adaptively adjusted, the flexibility of page design is improved, and the efficiency of page design is improved.
In one embodiment, as shown in fig. 5, which shows a flowchart of a page design method provided by an embodiment of the present application, the embodiment relates to a process of generating at least one layout container on a canvas layer, and the method may include the following steps:
step 501, obtaining at least one container generation operation instruction based on a picture layout layer; the container generation operation instruction includes a start position, an end position, and an operation path of the operation.
Wherein, there may be one or more layout containers on the canvas layer, and when generating the layout container, optionally, an operation instruction may be generated by responding to the container, where the container generates an operation instruction including a start position, an end position and an operation path of the operation. Optionally, when a user uses a control according to actual service requirements, the control can be dragged and dropped into the layout container from the control list, so that the layout container is generated on the drawing layout layer, and when the layout container is generated, the track of the layout container can be obtained by recording the starting position, the ending position and the moving path and adopting a coordinate mode, thereby generating the layout container.
Step 502, generating at least one layout container according to the starting position, the ending position and the operation path by adopting a moving path algorithm.
The moving path algorithm is used for carrying out operation processing on the operation instruction, and the layout container is generated after the moving path algorithm is adopted for carrying out operation processing on the starting position, the ending position and the real-time positioning operation path.
In this embodiment, at least one container generating operation instruction is obtained based on the drawing layer, at least one layout container is generated according to the starting position, the ending position and the operation path by adopting a movement path algorithm, and the layout container is automatically generated by combining the three information of the starting position, the ending position and the movement path in the operation instruction, so that the operation is simple, and the intelligence of man-machine interaction is improved.
In practical application, the generated functional control is a control with default attribute information, and the attribute information of the control needs to be reset according to the practical service requirement. As shown in fig. 6, which is a flowchart illustrating a page design method according to an embodiment of the present application, the present embodiment relates to a process of setting attribute information of a function control, and the method may include the following steps:
and 601, judging whether a region corresponding to a triggering position of the triggering operation contains a function control or not when the triggering operation is acquired based on the picture layout layer.
Wherein the triggering operation is used for selecting a function control in the picture layout layer. When the trigger operation is acquired based on the picture layout layer, the area corresponding to the trigger position of the trigger operation does not necessarily contain the functional control, and whether the area corresponding to the trigger position of the trigger operation contains the functional control can be judged through a mouse hit test algorithm.
Step 602, if the functional control is included, acquiring a setting instruction based on the canvas design interface and/or the canvas interaction interface, and setting attribute information of the functional control according to the setting instruction.
The page designer generally comprises three modules, as shown in fig. 7, and may comprise a control editing module, a canvas design module and a canvas interaction module. The control editing module is used for providing a control editing interface which is used for displaying an existing control list in the picture layout layer and the hierarchical structures of the controls of different layers; the canvas design module is used for providing a canvas design interface which is used for carrying out operations such as moving, zooming, front-setting, rear-setting and the like on the selected functional control; the canvas interaction module is used for providing a canvas interaction interface which is used for carrying out appearance, content and other setting operations on the selected functional controls. If the functional control is included, a setting instruction is acquired based on a canvas design interface and/or a canvas interaction interface, and the attribute information of the selected functional control is set according to the setting instruction, wherein the attribute information can include attribute information such as movement, scaling, preposition, postposition and the like, and can also include attribute information such as appearance, content and the like.
In this embodiment, when the trigger operation is obtained based on the drawing layout layer, whether the area corresponding to the trigger position of the trigger operation contains the functional control is determined, if so, a setting instruction is obtained based on the canvas design interface and/or the canvas interaction interface, and attribute information of the functional control is set according to the setting instruction. Different settings can be carried out on the functional controls according to actual service demands, so that the user operation is facilitated, and meanwhile, the intelligence of man-machine interaction is improved.
In one embodiment, please refer to fig. 8, which illustrates a flowchart of a page design method according to an embodiment of the present application. As shown in fig. 8, the method includes the steps of:
step 801, obtaining at least one container generating operation instruction based on a picture layout layer; the container generation operation instruction includes a start position, an end position, and an operation path of the operation.
Step 802, generating at least one layout container according to the starting position, the ending position and the operation path by adopting a moving path algorithm.
And 803, responding to the control operation instruction, moving the target function control to the target layout container, and generating and displaying the HTML page content.
Step 804, when the trigger operation is obtained based on the picture layout layer, judging whether the area corresponding to the trigger position of the trigger operation contains a function control.
And step 805, if the functional control is included, acquiring a setting instruction based on the canvas design interface and/or the canvas interaction interface, and setting attribute information of the functional control according to the setting instruction.
Step 806, determining anchor points of the layout container and anchor points of the canvas layer.
Step 807, obtaining a first distance between an anchor point of the layout container and an anchor point of the canvas layer before the dimension of the canvas layer changes.
Step 808, obtaining the size of the canvas layer after the size of the canvas layer is changed.
Step 809, adjusting the current size of the layout container in the anchoring direction according to the size of the canvas layer after the size is changed until the second distance between the anchor point of the adjusted layout container and the anchor point of the canvas layer is equal to the first distance.
And 810, when the size of the target layout container is changed, adjusting the display size of the HTML page content according to the size proportion of the target layout container.
The implementation principle and technical effects of each step in the page design method provided in this embodiment are similar to those in the previous page design method embodiments, and are not described here again. The implementation manner of each step in the embodiment of fig. 8 is merely an example, and the implementation manner is not limited, and the order of each step may be adjusted in practical application, so long as the purpose of each step can be achieved.
In the technical scheme provided by the embodiment of the application, when the size of the canvas layer is changed, the relative position of the layout container and the picture layer is kept unchanged, and the size of the layout container can be adaptively adjusted according to the change of the size of the picture layer, so that the page content can be flexibly adjusted according to the actual service requirement, and the page design efficiency is improved.
It should be understood that, although the steps in the flowcharts of fig. 2-8 are shown in order as indicated by the arrows, these steps are not necessarily performed in order as indicated by the arrows. The steps are not strictly limited to the order of execution unless explicitly recited herein, and the steps may be executed in other orders. Moreover, at least some of the steps in fig. 2-8 may include multiple steps or stages that are not necessarily performed at the same time, but may be performed at different times, nor does the order in which the steps or stages are performed necessarily performed in sequence, but may be performed alternately or alternately with at least a portion of the steps or stages in other steps or other steps.
In one embodiment, as shown in fig. 9, a block diagram of a page design apparatus 90 provided in an embodiment of the present application includes: a first generation module 91 and a first adjustment module 92, wherein:
a first generation module 91 for generating at least one layout container on the canvas layer.
And the first adjusting module 92 is configured to adjust the size of the layout container according to the size change proportion of the canvas layer when the size of the canvas layer is detected to change, so that the relative position of the layout container and the canvas layer remains unchanged.
In one embodiment, the relative position of the layout container and the canvas layer remains unchanged, comprising: the distance and anchoring direction between the anchoring point of the layout container and the anchoring point of the canvas layer are consistent.
In one embodiment, as shown in fig. 10, which shows a block diagram of a page design apparatus 100 provided in an embodiment of the present application, the first adjustment module 92 includes: a determining unit 921, a first obtaining unit 922, a second obtaining unit 923, and an adjusting unit 924, wherein:
a determining unit 921 for determining an anchor point of the layout container and an anchor point of the canvas layer.
A first obtaining unit 922 is configured to obtain a first distance between the anchor point of the layout container and the anchor point of the canvas layer before the size of the canvas layer changes.
And the second obtaining unit 923 is configured to obtain the size of the canvas layer after the size of the canvas layer is changed.
And the adjusting unit 924 is configured to adjust the current size of the layout container in the anchoring direction according to the size of the canvas layer after the size is changed, until a second distance between the anchor point of the adjusted layout container and the anchor point of the adjusted canvas layer is equal to the first distance.
In one embodiment, as shown in fig. 11, which shows a block diagram of a page design apparatus 110 provided by an embodiment of the present application, the apparatus further includes a second generating module 111, where:
and the second generating module 111 is used for responding to the control operation instruction, moving the target function control into the target layout container, and generating and displaying the hypertext markup language (HTML) page content.
In one embodiment, as shown in fig. 12, which shows a block diagram of a page design apparatus 120 provided in an embodiment of the present application, the apparatus further includes a second adjustment module 121, where:
And a second adjustment module 121, configured to adjust, when the size of the target layout container changes, the display size of the HTML page content according to the size proportion of the target layout container.
In one embodiment, as shown in fig. 13, which shows a block diagram of a page design apparatus 130 provided in an embodiment of the present application, the first generating module 91 includes: a third acquisition unit 911 and a third generation unit 912, wherein:
a third obtaining unit 911 for obtaining at least one container generation operation instruction based on the drawing layout layer; the container generation operation instruction includes a start position, an end position, and an operation path of an operation.
A third generating unit 912, configured to generate the at least one layout container according to the start position, the end position, and the operation path by using a movement path algorithm.
In one embodiment, as shown in fig. 14, a block diagram of a page design apparatus 140 provided in an embodiment of the present application is shown, where the apparatus further includes a judging module 141 and a setting module 142, where:
and the judging module 141 is configured to judge whether an area corresponding to a trigger position of the trigger operation includes a function control when the trigger operation is acquired based on the canvas layer.
And the setting module 142 is configured to obtain a setting instruction based on the canvas design interface and/or the canvas interaction interface if the functional control is included, and set attribute information of the functional control according to the setting instruction.
For specific limitations of the page designing apparatus, reference may be made to the above limitations of the page designing method, and no further description is given here. The respective modules in the page design apparatus described above may be implemented in whole or in part by software, hardware, and combinations thereof. The above modules may be embedded in hardware or may be independent of a processor in the computer device, or may be stored in software in a memory in the computer device, so that the processor may invoke and perform the operations of the above modules.
In one embodiment of the present application, there is provided a computer device including a memory and a processor, the memory having stored therein a computer program which when executed by the processor performs the steps of:
generating at least one layout container on the canvas layer; when the size of the canvas layer is detected to be changed, the size of the layout container is adjusted according to the size change proportion of the canvas layer, so that the relative position of the layout container and the canvas layer is kept unchanged.
In one embodiment, the relative position of the layout container and canvas layer remains unchanged, including: the distance and anchoring direction between the anchor points of the layout container and the anchor points of the canvas layer remain consistent.
In one embodiment, the processor when executing the computer program further performs the steps of:
determining an anchor point of the layout container and an anchor point of the canvas layer; acquiring a first distance between an anchor point of a layout container and an anchor point of a canvas layer before the size of the canvas layer changes; acquiring the size of the canvas layer after the size of the canvas layer is changed; and adjusting the current size of the layout container in the anchoring direction according to the size of the canvas layer after the size is changed until the second distance between the anchoring point of the adjusted layout container and the anchoring point of the adjusted canvas layer is equal to the first distance.
In one embodiment, the processor when executing the computer program further performs the steps of:
and responding to the control operation instruction, moving the target functional control into the target layout container, and generating and displaying the HTML page content.
In one embodiment, the processor when executing the computer program further performs the steps of:
And when the size of the target layout container is changed, adjusting the display size of the HTML page content according to the size proportion of the target layout container.
In one embodiment, the processor when executing the computer program further performs the steps of:
acquiring at least one container generation operation instruction based on the picture layout layer; the container generating operation instruction comprises a starting position, an ending position and an operation path of the operation; and generating at least one layout container according to the starting position, the ending position and the operation path by adopting a moving path algorithm.
In one embodiment, the processor when executing the computer program further performs the steps of:
when the trigger operation is acquired based on the picture layout layer, judging whether a region corresponding to a trigger position of the trigger operation contains a functional control or not; and if the function control is included, acquiring a setting instruction based on the canvas design interface and/or the canvas interaction interface, and setting attribute information of the function control according to the setting instruction.
The implementation principle and technical effects of the computer device provided by the embodiment of the present application are similar to those of the above method embodiment, and are not described herein.
In one embodiment of the present application, there is provided a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of:
Generating at least one layout container on the canvas layer; when the size of the canvas layer is detected to be changed, the size of the layout container is adjusted according to the size change proportion of the canvas layer, so that the relative position of the layout container and the canvas layer is kept unchanged.
In one embodiment, the relative position of the layout container and canvas layer remains unchanged, including: the distance and anchoring direction between the anchor points of the layout container and the anchor points of the canvas layer remain consistent.
In one embodiment, the computer program when executed by the processor further performs the steps of:
determining an anchor point of the layout container and an anchor point of the canvas layer; acquiring a first distance between an anchor point of a layout container and an anchor point of a canvas layer before the size of the canvas layer changes; acquiring the size of the canvas layer after the size of the canvas layer is changed; and adjusting the current size of the layout container in the anchoring direction according to the size of the canvas layer after the size is changed until the second distance between the anchoring point of the adjusted layout container and the anchoring point of the adjusted canvas layer is equal to the first distance.
In one embodiment, the computer program when executed by the processor further performs the steps of:
And responding to the control operation instruction, moving the target functional control into the target layout container, and generating and displaying the HTML page content.
In one embodiment, the computer program when executed by the processor further performs the steps of:
and when the size of the target layout container is changed, adjusting the display size of the HTML page content according to the size proportion of the target layout container.
In one embodiment, the computer program when executed by the processor further performs the steps of:
acquiring at least one container generation operation instruction based on the picture layout layer; the container generating operation instruction comprises a starting position, an ending position and an operation path of the operation; and generating at least one layout container according to the starting position, the ending position and the operation path by adopting a moving path algorithm.
In one embodiment, the computer program when executed by the processor further performs the steps of:
when the trigger operation is acquired based on the picture layout layer, judging whether a region corresponding to a trigger position of the trigger operation contains a functional control or not; and if the function control is included, acquiring a setting instruction based on the canvas design interface and/or the canvas interaction interface, and setting attribute information of the function control according to the setting instruction.
The computer readable storage medium provided in this embodiment has similar principles and technical effects to those of the above method embodiment, and will not be described herein.
Those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by way of a computer program stored on a non-transitory computer readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. Any reference to memory, storage, database, or other medium used in embodiments provided herein may include non-volatile and/or volatile memory. The nonvolatile memory can include Read Only Memory (ROM), programmable ROM (PROM), electrically Programmable ROM (EPROM), electrically Erasable Programmable ROM (EEPROM), or flash memory. Volatile memory can include Random Access Memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms such as Static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double Data Rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous Link DRAM (SLDRAM), memory bus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), among others.
The technical features of the above embodiments may be arbitrarily combined, and all possible combinations of the technical features in the above embodiments are not described for brevity of description, however, as long as there is no contradiction between the combinations of the technical features, they should be considered as the scope of the description.
The foregoing examples illustrate only a few embodiments of the application, which are described in detail and are not to be construed as limiting the scope of the claims. It should be noted that it will be apparent to those skilled in the art that several variations and modifications can be made without departing from the spirit of the application, which are all within the scope of the application. Accordingly, the scope of protection of the present application is to be determined by the appended claims.
Claims (8)
1. A method of page design, the method comprising:
generating at least one layout container on the canvas layer; the layout container is a carrier for placing the controls;
when the size of the canvas layer is detected to be changed, the size of the layout container is adjusted according to the size change proportion of the canvas layer, so that the distance and the anchoring direction between the anchoring point of the layout container and the anchoring point of the canvas layer are kept consistent; the anchor points of the layout container comprise any vertex on the layout container, and the anchor points of the canvas layer are vertexes with the same azimuth as the anchor points of the layout container; the anchoring direction comprises the direction of a connecting line between an anchoring point of the layout container and an anchoring point of the canvas layer;
The adjusting the size of the layout container according to the size change proportion of the canvas layer comprises the following steps:
determining an anchor point of the layout container and an anchor point of the canvas layer;
before the size of the canvas layer is changed, a first distance between an anchor point of the layout container and the anchor point of the canvas layer is obtained;
acquiring the size of the canvas layer after the size of the canvas layer is changed;
and adjusting the current size of the layout container in the anchoring direction according to the size of the canvas layer after the size is changed until a second distance between the anchoring point of the adjusted layout container and the anchoring point of the adjusted canvas layer is equal to the first distance.
2. The method according to claim 1, wherein the method further comprises:
and responding to the control operation instruction, moving the target functional control into the target layout container, and generating and displaying the HTML page content.
3. The method according to claim 2, wherein the method further comprises:
and when the size of the target layout container is changed, adjusting the display size of the HTML page content according to the size proportion of the target layout container.
4. The method of claim 1, wherein generating at least one layout container on the canvas layer comprises:
acquiring at least one container generation operation instruction based on the picture layout layer; the container generating operation instruction comprises a starting position, an ending position and an operation path of the operation;
and generating the at least one layout container according to the starting position, the ending position and the operation path by adopting a moving path algorithm.
5. The method according to claim 1, wherein the method further comprises:
when a trigger operation is acquired based on the canvas layer, judging whether a region corresponding to a trigger position of the trigger operation contains a function control or not;
and if the functional control is included, acquiring a setting instruction based on a canvas design interface and/or a canvas interaction interface, and setting attribute information of the functional control according to the setting instruction.
6. A page design apparatus, the apparatus comprising:
a generation module for generating at least one layout container on the canvas layer; the layout container is a carrier for placing the controls;
the adjusting module is used for adjusting the size of the layout container according to the size change proportion of the canvas layer when the size of the canvas layer is detected to be changed, so that the distance and the anchoring direction between the anchoring point of the layout container and the anchoring point of the canvas layer are kept consistent; the anchor points of the layout container comprise any vertex on the layout container, and the anchor points of the canvas layer are vertexes with the same azimuth as the anchor points of the layout container; the anchoring direction comprises the direction of a connecting line between an anchoring point of the layout container and an anchoring point of the canvas layer;
The adjusting module comprises a determining unit, a first acquiring unit, a second acquiring unit and an adjusting unit:
the determining unit is used for determining the anchor points of the layout container and the anchor points of the canvas layer;
the first obtaining unit is used for obtaining a first distance between an anchor point of the layout container and an anchor point of the canvas layer before the size of the canvas layer changes;
the second obtaining unit is used for obtaining the size of the canvas layer after the size of the canvas layer is changed;
the adjusting unit is used for adjusting the current size of the layout container in the anchoring direction according to the size of the canvas layer after the size is changed until the second distance between the anchoring point of the adjusted layout container and the anchoring point of the adjusted canvas layer is equal to the first distance.
7. A computer device comprising a memory and a processor, the memory storing a computer program which, when executed by the processor, implements the steps of the method of any of claims 1 to 5.
8. A computer-readable storage medium, on which a computer program is stored which, when being executed by a processor, carries out the steps of the method according to any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011221435.0A CN112346725B (en) | 2020-11-05 | 2020-11-05 | Page design method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011221435.0A CN112346725B (en) | 2020-11-05 | 2020-11-05 | Page design method, device, equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112346725A CN112346725A (en) | 2021-02-09 |
| CN112346725B true CN112346725B (en) | 2023-12-12 |
Family
ID=74429404
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011221435.0A Active CN112346725B (en) | 2020-11-05 | 2020-11-05 | Page design method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112346725B (en) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114610295A (en) * | 2022-03-22 | 2022-06-10 | 云粒智慧科技有限公司 | Layout method, device, equipment and medium for page container |
| CN114816186A (en) * | 2022-05-09 | 2022-07-29 | 广州市易工品科技有限公司 | Report setting method and device based on mobile terminal, electronic equipment and storage medium |
| CN116501435B (en) * | 2023-06-28 | 2023-09-12 | 北京尽微致广信息技术有限公司 | Layout processing method and device and computer storage medium |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1677343A (en) * | 2004-03-31 | 2005-10-05 | 微软公司 | Grid canvas |
| CN106557315A (en) * | 2016-11-04 | 2017-04-05 | 北京神州绿盟信息安全科技股份有限公司 | A kind of Web panel layouts method and apparatus |
| CA2986327A1 (en) * | 2017-11-21 | 2019-05-21 | Logojoy Inc. | Method of digital design generation |
| CN110515690A (en) * | 2019-08-29 | 2019-11-29 | 北京明略软件系统有限公司 | Node layout's method and device, storage medium, electronic device |
| CN110597586A (en) * | 2019-08-19 | 2019-12-20 | 北京邮电大学 | Method and device for large screen layout of componentized layout based on dragging |
| CN110780872A (en) * | 2019-09-03 | 2020-02-11 | 腾讯科技（深圳）有限公司 | Element arrangement method and device, computer readable storage medium and equipment |
Family Cites Families (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8881039B2 (en) * | 2009-03-13 | 2014-11-04 | Fisher-Rosemount Systems, Inc. | Scaling composite shapes for a graphical human-machine interface |
| US20140258968A1 (en) * | 2013-03-05 | 2014-09-11 | Research In Motion Limited | Visual Representation Of Edits For Collaborative Application Development |
| US10037122B2 (en) * | 2014-09-26 | 2018-07-31 | Oracle International Corporation | Canvas layout algorithm |
| US20170263034A1 (en) * | 2016-03-14 | 2017-09-14 | Morpholio LLC | Systems and methods for scale calibration in virtual drafting and design tools |
-
2020
- 2020-11-05 CN CN202011221435.0A patent/CN112346725B/en active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1677343A (en) * | 2004-03-31 | 2005-10-05 | 微软公司 | Grid canvas |
| CN106557315A (en) * | 2016-11-04 | 2017-04-05 | 北京神州绿盟信息安全科技股份有限公司 | A kind of Web panel layouts method and apparatus |
| CA2986327A1 (en) * | 2017-11-21 | 2019-05-21 | Logojoy Inc. | Method of digital design generation |
| CN110597586A (en) * | 2019-08-19 | 2019-12-20 | 北京邮电大学 | Method and device for large screen layout of componentized layout based on dragging |
| CN110515690A (en) * | 2019-08-29 | 2019-11-29 | 北京明略软件系统有限公司 | Node layout's method and device, storage medium, electronic device |
| CN110780872A (en) * | 2019-09-03 | 2020-02-11 | 腾讯科技（深圳）有限公司 | Element arrangement method and device, computer readable storage medium and equipment |
Non-Patent Citations (3)
| Title |
|---|
| Authoring diagrams that adapt to their viewing context;Cameron McCormack等;Journal of Visual Languages & Computing;第46卷;第20-34页 * |
| Using Concrete Scales: A Practical Framework for Effective Visual Depiction of Complex Measures;Fanny Chevalier等;IEEE Transactions on Visualization and Computer Graphics;第19卷(第12期);第2426-2435页 * |
| 基于样式的变电站自动化厂站图形辅助生成系统;李宝潭 等;电力系统自动化;第39卷(第14期);第120-125页 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112346725A (en) | 2021-02-09 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112346725B (en) | Page design method, device, equipment and storage medium | |
| CN111079632A (en) | Training method and device of text detection model, computer equipment and storage medium | |
| US11030808B2 (en) | Generating time-delayed augmented reality content | |
| CN113094770B (en) | Drawing generation method and device, computer equipment and storage medium | |
| WO2021129789A1 (en) | Map rendering method and apparatus, computer device, and storage medium | |
| CN110704087A (en) | Page generation method and device, computer equipment and storage medium | |
| CN114140992A (en) | Electronic fence early warning method and device, computer equipment and storage medium | |
| CN111008290A (en) | Power grid geographical edge layout display method and device, computer equipment and storage medium | |
| CN110428504B (en) | Text image synthesis method, apparatus, computer device and storage medium | |
| CN113094127A (en) | Page editing method and device, computer readable storage medium and computer equipment | |
| CN111563955B (en) | Building model monomer visualization method, terminal and storage medium | |
| US10573033B2 (en) | Selective editing of brushstrokes in a digital graphical image based on direction | |
| CN114675925B (en) | Configuration image processing method and device, computer equipment and storage medium | |
| CN111797192B (en) | GIS point data rendering method and device, computer equipment and storage medium | |
| CN105474268A (en) | Image display system | |
| CN115588019A (en) | Method and device for determining frame selection object, computer equipment and storage medium | |
| CN110321405A (en) | Model matching method, device, computer readable storage medium and computer equipment | |
| CN112433662B (en) | Image correction method, image correction device, electronic device and storage medium | |
| US11074763B2 (en) | Systems and methods for editing shapes of faceted geometries | |
| CN116841439B (en) | Display method and device for image pixel grid, computer equipment and storage medium | |
| CN112287428B (en) | Building wall generation method and device, computer equipment and storage medium | |
| CN117765078A (en) | Feedback method and device for previewing track, storage medium and electronic equipment | |
| CN117934292A (en) | Electrograph distribution processing method and device, processor and electronic equipment | |
| KR101360592B1 (en) | Method and apparatus for generating animation | |
| CN117519697A (en) | Vector data visualization method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |