Interface display method, device, equipment and medium

Abstract

The present disclosure provides an interface display method, device, equipment and medium, relates to the technical field of computers, in particular to the interface display field. The specific implementation scheme is: a design reference diagram is displayed in one display area of a display interface, and a page to be proofread constructed based on the design reference diagram is displayed in another display area of the display interface; a constituent entity in the page to be proofread has a corresponding constituent entity in the design reference diagram; an auxiliary alignment element of any constituent entity in any display area is determined according to position information of the constituent entity; a mapping alignment element of the auxiliary alignment element in another display area is determined according to a position mapping relationship between different display areas; and the mapping alignment element is displayed in the display interface, and is used for position proofreading of the constituent entity in the page to be proofread and the corresponding constituent entity in the design reference diagram. According to the technology of the present disclosure, the matching degree of the page to be proofread and the design reference diagram is improved, and the page proofreading efficiency is improved.

Description

Technical Field

[0001] This disclosure relates to the field of computer technology, and in particular to interface display technology. Background Technology

[0002] During the development of display interfaces for applications or browsers, the actual created display interface may differ from the design draft, requiring frequent verification and modification between the actual created display interface and the design draft. Summary of the Invention

[0003] This disclosure provides a method, apparatus, device, and medium for displaying an interface.

[0004] According to one aspect of this disclosure, a method for displaying an interface is provided, comprising:

[0005] The design reference drawing is displayed in one display area of ​​the display interface, and the page to be proofread, which is constructed based on the design reference drawing, is displayed in another display area of ​​the display interface; wherein the constituent entities in the page to be proofread have corresponding constituent entities in the design reference drawing;

[0006] Based on the position information of any component entity in any display area, determine the auxiliary alignment element of that component entity;

[0007] Based on the positional mapping relationship between different display areas, determine the mapping alignment element of the auxiliary alignment element in another display area;

[0008] The display interface shows the mapping alignment element, which is used to align the positions of the constituent entities on the page to be checked with the corresponding constituent entities in the design reference drawing.

[0009] According to another aspect of this disclosure, an electronic device is also provided, comprising:

[0010] At least one processor; and

[0011] A memory that is communicatively connected to at least one processor; wherein,

[0012] The memory stores instructions that can be executed by at least one processor, which enables the at least one processor to perform any of the interface display methods provided in the embodiments of this disclosure.

[0013] According to another aspect of this disclosure, a non-transitory computer-readable storage medium storing computer instructions is also provided, wherein the computer instructions are used to cause a computer to execute any of the interface display methods provided in the embodiments of this disclosure.

[0014] The technology disclosed herein improves the matching degree between the page to be proofread and the design reference drawing, and increases the efficiency of the position proofreading of the page to be proofread.

[0015] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of this disclosure, nor is it intended to limit the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description

[0016] The accompanying drawings are provided to better understand this solution and do not constitute a limitation of this disclosure. Wherein:

[0017] Figure 1A This is a schematic diagram of a display interface provided in an embodiment of this disclosure;

[0018] Figure 1B This is another schematic diagram of a display interface provided in an embodiment of this disclosure;

[0019] Figure 2 This is a flowchart of an interface display method provided in an embodiment of this disclosure;

[0020] Figure 3A This is a flowchart of another interface display method provided in this embodiment of the disclosure;

[0021] Figure 3B This is a schematic diagram illustrating the display result of an auxiliary alignment element and a mapped alignment element provided in an embodiment of this disclosure;

[0022] Figure 3C This is a schematic diagram showing the display result of another auxiliary alignment element and a mapped alignment element provided in an embodiment of this disclosure;

[0023] Figure 4 This is a flowchart of another interface display method provided in this embodiment of the disclosure;

[0024] Figure 5 This is a structural diagram of an interface display device provided in an embodiment of this disclosure;

[0025] Figure 6 This is a block diagram of an electronic device used to implement the interface display method of the embodiments of this disclosure. Detailed Implementation

[0026] The exemplary embodiments of this disclosure are described below with reference to the accompanying drawings, including various details of the embodiments to aid understanding, and should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of this disclosure. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0027] The interface display method and interface display device provided in this disclosure are applicable to scenarios where, in the case of creating a page based on a design reference drawing, the positions of constituent entities in the created page to be proofread are corrected according to the design reference drawing. The interface display methods provided in this disclosure can be executed by an interface display device, which can be implemented in software and / or hardware and specifically configured in an electronic device. This electronic device can be a terminal device with display functionality, and this disclosure does not impose any limitations on it.

[0028] To facilitate understanding, the distribution of areas in the display interface will be explained.

[0029] See Figure 1A The diagram shows a display interface comprising two display areas. One area serves as a design reference area, displaying the design reference image; the other area acts as a canvas, displaying the proofreading page constructed based on the design reference image. The proofreading page can be constructed based on at least a portion of the content in the design reference image.

[0030] In this disclosure, no restrictions are placed on the relative positional relationship or size of the design draft reference area and the canvas area; it is only required that the two display areas can be displayed together on the same display interface.

[0031] For example, in order to make reasonable use of the display interface layout, such as Figure 1A As shown, the design draft reference area and the canvas area can be displayed side by side. Furthermore, to ensure the accuracy of the reproduction between the page to be proofread created in the canvas area and the design reference image in the design draft reference area, the size and shape of the design draft reference area and the canvas area can be set according to a preset ratio; correspondingly, the entity outlines of the constituent entities in the page to be proofread and their corresponding constituent entities in the design draft reference area are also displayed according to a preset ratio. In a preferred embodiment, the preset ratio can be 1:1, making the page to be proofread creation process more intuitive and helping to improve the accuracy of the creation results.

[0032] Further details can be found by referring to [link / reference]. Figure 1A In this display interface, a display area can also be set, which can serve as a header functional area that contains different functional components. By triggering different functional components, different display interfaces can be turned on or off, or the constructed page to be proofread can be saved or withdrawn. This disclosure does not limit the functional components in the header functional area and their implemented functions.

[0033] In one optional embodiment, an "upload" component can be set in the design draft reference area. By triggering this component, design reference drawings can be uploaded and displayed in the design draft reference area.

[0034] For example, an "expand / collapse" component can be set in the design draft reference area. By triggering this component, the design draft reference area can be displayed or collapsed.

[0035] Furthermore, other display areas can be set in this display interface to assist in the creation of pages to be proofread.

[0036] In an optional embodiment, see Figure 1B The display interface may also include a display area, which can serve as a component area containing different basic components. Based on the constituent entities in the design reference drawing, the constituent entities of the page to be proofread can be constructed in the canvas area using at least one basic component. The basic components may include at least one of buttons, text boxes, etc., and this disclosure does not impose any limitations on the specific type or number of basic components. Optionally, the display interface may also include a display area, which can serve as an attribute editing area for setting at least one attribute parameter of the constituent entities of the page to be proofread in the canvas area.

[0037] In the above Figure 1A and Figure 1B Based on the display interface shown, the following will provide a detailed explanation of the interface display method.

[0038] See Figure 2 The interface display methods shown include:

[0039] S201. Display the design reference drawing in one display area of ​​the display interface, and display the proofreading page constructed based on the design reference drawing in another display area of ​​the display interface.

[0040] The constituent entities in the page to be proofread have corresponding constituent entities in the design reference drawing.

[0041] The design reference image can be understood as a rendering of the desired page. The constituent entities in the design reference image can be understood as images corresponding to the building elements (such as components) of the desired page. The design reference image reflects the positional relationships between different constituent entities and their display attributes. Display attributes may include at least one of the following: outline shape, outline size, element category, and display color. Furthermore, each constituent entity may also include functional attributes to characterize its function, such as at least one of the following: link target and activation method.

[0042] The page to be proofread is a page built based on the design reference drawing. The goal is to generate the page by gradually adding functional components to the page to be proofread and editing the attributes of the added functional components, according to the positional relationships, display attributes, and functional attributes of the different constituent entities in the design reference drawing.

[0043] To ensure the display effect of the constructed proofreading page, it is usually necessary to align the positions and outlines of the constituent entities in the proofreading page with the constituent entities in the design reference image, thereby ensuring the fidelity between the constructed proofreading page and the design reference image.

[0044] S202. Based on the position information of any component entity in any display area, determine the auxiliary alignment element of that component entity.

[0045] Among them, the auxiliary alignment element is used to align the position and outline of the constituent entities in the page to be proofread with the corresponding constituent entities in the design reference drawing when building the page to be proofread based on the design reference drawing.

[0046] The auxiliary alignment elements can include at least one of auxiliary alignment lines and auxiliary alignment points, which increases the richness and diversity of auxiliary alignment elements, thereby increasing the richness and diversity of the subsequently determined mapping alignment elements and laying the foundation for the positional alignment between constituent entities in different display areas.

[0047] Among them, auxiliary alignment lines exist in the form of lines, and the alignment position of the constituent entity is constrained by these lines; auxiliary alignment points exist in the form of points, and the positions of the key points of the constituent entity are constrained by these points. Key points can be corner points, rotation center points, etc.

[0048] Optionally, any component entity in the design reference drawing can be selected from the display area of ​​the design reference drawing, i.e., the aforementioned design draft reference area, and the auxiliary alignment element of the component entity in the design draft reference area can be determined based on the position information of the component entity.

[0049] Alternatively, one can select any component entity from the display area of ​​the page to be proofread, i.e., the aforementioned canvas area, and determine the auxiliary alignment element of that component entity in the canvas area based on its position information.

[0050] In one optional embodiment, the outline of a component entity is determined based on the position information of any component entity in any display area; and the auxiliary alignment element of the component entity is determined based on the outline of the component entity.

[0051] For example, at least two outlines of the constituent entity can be used as auxiliary alignment lines of the constituent entity. Alternatively, for example, at least two intersections of the outlines of the constituent entity can be used as auxiliary alignment points of the constituent entity.

[0052] Since some constituent entities have many outlines or their outlines are curved, the alignment effect is poor when used as auxiliary alignment elements. In order to overcome the above problems, in another optional embodiment, the outer rectangle of the constituent entity can be introduced to help generate auxiliary alignment elements.

[0053] For example, the edge line of the constituent entity to the circumscribed rectangle can be determined based on the position information of any constituent entity in any display area; and the auxiliary alignment element of the constituent entity can be determined based on the edge line corresponding to the constituent entity.

[0054] The bounding rectangle can be the smallest bounding rectangle. Optionally, the bounding rectangle can be the smallest bounding rectangle in both the horizontal and vertical directions to facilitate horizontal and vertical alignment.

[0055] S203. Based on the positional mapping relationship between different display areas, determine the mapping alignment element of the auxiliary alignment element in another display area.

[0056] The position mapping relationship is used to characterize the transformation relationship of position coordinates between the design draft reference area and the canvas area. Through this transformation relationship, the position transformation between corresponding constituent entities in different display areas can be realized.

[0057] It should be noted that if the outlines of the constituent entities that correspond to each other in the design draft reference area and the canvas area have a certain scaling ratio, then the position mapping relationship also carries the relevant information of the scaling ratio, which is used to constrain the relative positional relationship of different alignment elements in the mapping alignment elements.

[0058] The position mapping relationship can be set by technicians based on their needs or experience. Since the position mapping relationship is related to the layout of different display areas in the display interface, the position mapping relationship can also be pre-set based on the display area layout selected by the operator.

[0059] Among them, the mapping alignment element can be understood as a reference element that assists in aligning the corresponding constituent entities in another display area after the position of the auxiliary alignment element to which it belongs is mapped.

[0060] For example, if the auxiliary alignment element includes an auxiliary alignment line, then the corresponding mapping alignment element includes the mapping alignment line; if the auxiliary alignment element includes an auxiliary alignment point, then the corresponding mapping alignment element includes the mapping alignment point.

[0061] Among them, the mapping alignment line exists in the form of a line. Using this type of line as a reference, the placement position of the corresponding component entity in another display area is constrained for the component entity to which the auxiliary alignment line belongs. The mapping alignment point exists in the form of a point. Using this type of point as a reference, the position of the key point of the corresponding component entity in another display area is constrained for the component entity to which the auxiliary alignment point belongs. The key point can be a corner point or a rotation center point, etc.

[0062] For example, if the auxiliary alignment element is located in the design draft reference area, that is, the constituent entity to which the auxiliary alignment element belongs is a sub-image in the design reference image, then the mapping alignment element is the alignment reference of the constituent entity (such as a page component) to which the auxiliary alignment element belongs in the canvas area. At this time, the mapping alignment element is located in the canvas area.

[0063] For example, if the auxiliary alignment element is located in the canvas area, that is, the constituent entity to which the auxiliary alignment element belongs is a page component in the page to be proofread, then the mapping alignment element is the alignment reference of the constituent entity to which the auxiliary alignment element belongs in the design draft reference area (that is, the sub-image in the design reference image). At this time, the mapping alignment element is located in the design draft reference area.

[0064] S204. Display mapping alignment elements in the display interface to calibrate the positions of the constituent entities in the page to be calibrated and the corresponding constituent entities in the design reference drawing.

[0065] Position alignment may include at least one of the following: position alignment between constituent entities and adjustment of the outline size of constituent entities.

[0066] The mapping alignment element is displayed in the corresponding display area of ​​the display interface. Optionally, auxiliary alignment elements can also be displayed in the corresponding display area of ​​the display interface.

[0067] If the mapping alignment element is located in the design draft reference area, the auxiliary alignment element can be continuously adjusted by moving the constituent entities in the page to be proofread, and then the mapping alignment element can be continuously adjusted so that the mapping alignment element can match the corresponding constituent entities in the design draft reference area. By finding the constituent entities in the design draft reference area through the mapping alignment element, the constituent entities of the page to be proofread are aligned with the corresponding constituent entities in the design reference diagram in the design draft reference area.

[0068] If the mapping alignment element is located in the canvas area, the component entities in the page to be proofread can be moved to match the mapping alignment element. By finding the mapping alignment element through the component entities of the page to be proofread, the effect of aligning the component entities of the page to be proofread with the corresponding component entities in the design reference image in the design draft reference area can be achieved.

[0069] This embodiment of the disclosure introduces a display area for displaying the design reference drawing and a display area for displaying the page to be proofread in the display interface. By displaying them together, it facilitates page effect comparison when creating the page to be proofread based on the design reference drawing, eliminating the need for screen switching and improving page creation efficiency. Simultaneously, by introducing auxiliary alignment elements and mapping alignment elements with positional mapping relationships in the two display areas, a reference is provided for the positional verification of the constituent entities in different display areas. This provides a traceable process during the construction of the page to be proofread based on the design reference drawing, or during further adjustments to the constructed page to be proofread, thereby helping to improve the fidelity between the created page to be proofread, or the proofread page to be proofread, and the design reference drawing, improving the positional accuracy of the page to be proofread and the page display effect. Furthermore, performing positional verification of the constituent entities of the page to be proofread during the page proofreading or creation process improves the efficiency of page creation or proofreading.

[0070] Based on the above technical solutions, this disclosure also provides another optional embodiment. In this optional embodiment, the generation mechanism of auxiliary alignment elements has been optimized and improved. It should be noted that for parts not described in detail in the embodiments of this disclosure, please refer to the relevant descriptions in other embodiments, which will not be repeated here.

[0071] See Figure 3A The interface display methods shown include:

[0072] S301. Display the design reference drawing in one display area of ​​the display interface, and display the proofreading page constructed based on the design reference drawing in another display area of ​​the display interface.

[0073] The constituent entities in the page to be proofread have corresponding constituent entities in the design reference drawing.

[0074] S302. Determine the edge line of the bounding rectangle corresponding to any component entity in any display area based on the position information of any component entity in any display area.

[0075] S303. Determine the auxiliary alignment element of the constituent entity based on the edge line corresponding to the constituent entity.

[0076] S304. Based on the positional mapping relationship between different display areas, determine the mapping alignment element of the auxiliary alignment element in another display area.

[0077] S305. Display mapping alignment elements in the display interface to perform positional alignment between the constituent entities on the page to be checked and the corresponding constituent entities in the design reference drawing.

[0078] By introducing the edge lines of the bounding rectangles of the constituent entities to replace the outlines of the constituent entities themselves, the number of lines of constituent entities with a large number of outlines can be significantly reduced, thereby reducing the number of auxiliary alignment elements. This, in turn, helps to reduce the number of mapping alignment elements, ensuring the simplicity of the content displayed on the display interface when mapping alignment elements are displayed.

[0079] For example, the auxiliary alignment element of any component entity can be determined based on the position information of any component entity in any display area, combined with the contour information.

[0080] The edge lines can be generated automatically or created manually and then adjusted in position.

[0081] Since the positions of the constituent entities in the design reference drawing are fixed, the edge lines of the constituent entities in the design reference drawing can be manually created and their positions adjusted. Based on the edge lines whose positions are fixed after adjustment, auxiliary alignment elements for the corresponding constituent entities in the design draft reference area can be generated.

[0082] In an optional embodiment, edge lines can be generated as follows: in response to an auxiliary line creation operation within the display area of ​​the design reference drawing, at least one pair of auxiliary lines are generated within that display area; the positions of the auxiliary lines are adjusted according to the position information of the selected constituent entity within the display area, so that the auxiliary lines coincide with the edge of the bounding rectangle corresponding to the constituent entity; the adjusted auxiliary lines are used as the edge lines corresponding to the constituent entity. The advantage of this approach is that it improves the uniformity and standardization of the edge line generation process, while effectively controlling the number of edge lines generated, thereby effectively controlling the number of auxiliary alignment elements and corresponding mapping alignment elements, ensuring the simplicity of the content displayed on the interface.

[0083] The auxiliary line creation operation can be a drag-and-drop operation, a click operation, or a selection operation of the "Generate Auxiliary Line" function component in the menu generated after clicking. This disclosure does not limit the specific operation method of the auxiliary line creation operation.

[0084] By selecting constituent entities in the design draft reference area of ​​the display design reference drawing, the constituent entities can be located to obtain the position information of the selected constituent entities. Based on the position information of the selected constituent entities, the position of the auxiliary lines is adjusted so that the auxiliary lines coincide with the edge of the outer rectangle of the constituent entity. At this time, the adjusted auxiliary lines have the ability to locate the selected constituent entities in the design draft reference area.

[0085] Accordingly, at least one pair of mutually perpendicular edge lines can be selected as auxiliary alignment lines for the constituent entity; and / or at least one of the intersection points between the edge lines can be selected as auxiliary alignment points for the constituent view. The auxiliary alignment elements can include at least one of auxiliary alignment lines and auxiliary alignment points. It is understood that generating auxiliary alignment elements in the above manner improves the richness and diversity of the generated auxiliary alignment elements, thereby helping to improve the accuracy of subsequent positional correction results for the constituent entities.

[0086] The bounding rectangle can be the smallest bounding rectangle, or the smallest bounding rectangle generated in the horizontal and / or vertical directions. To facilitate the adjustment of the guide line positions, the bounding rectangle of the selected constituent entities can be displayed in the design draft reference area after selecting the constituent entities, serving as the basis for adjusting the guide line positions.

[0087] See Figure 3B The diagram shows the display results of auxiliary alignment elements and mapped alignment elements in the display interface. The constituent entities in the diagram are represented by thin solid lines. The four dashed lines in the design draft reference area correspond to the auxiliary alignment lines of the constituent entities selected by these dashed lines (shown in shaded area in the diagram); the four intersection points of these four dashed lines correspond to the auxiliary alignment points of the constituent entities selected by these dashed lines. Correspondingly, through position mapping, there are corresponding mapped alignment lines (corresponding to the four dashed lines in the canvas area) and mapped alignment points (corresponding to the four intersection points of the four dashed lines in the canvas area) in the canvas area. At this time, the position and outline of the corresponding constituent entity (shown in gray fill in the diagram) on the page to be checked can be adjusted using the mapped alignment lines and / or mapped alignment points in the canvas area, thereby achieving positional alignment between this constituent entity and the constituent entity selected in the design draft reference area.

[0088] It should be noted that... Figure 3B The number of auxiliary alignment lines and points is provided only as an illustration and should not be construed as a specific limitation on the number of auxiliary alignment lines and points. Furthermore, auxiliary alignment lines and points can be used simultaneously or only one type can be used; this disclosure does not impose any limitation in this regard. Additionally, it is worth noting that only mapped alignment elements can be displayed in the display interface, or auxiliary alignment elements can be displayed in conjunction with them; this disclosure does not impose any limitation in this regard.

[0089] To improve the flexibility of adjusting constituent entities in the page to be proofread, constituent entities can be added to the page to be proofread, or when adjusting the position of constituent entities in the generated page to be proofread, edge lines can be generated based on the moving constituent entities in the canvas area, as auxiliary alignment elements for the corresponding constituent entities in the canvas area.

[0090] In another optional embodiment, edge lines can be generated as follows: In response to a movement operation of any component entity in the page to be proofread, the bounding rectangle of the moved component entity is determined based on its position information; the straight line containing the edge of the bounding rectangle is taken as the edge line corresponding to the component entity. The advantage of this approach is that edge lines can be dynamically generated on one side of the page to be proofread based on the real-time position of the selected component entity. This enables dynamic adjustment of auxiliary alignment elements and subsequent mapping alignment elements, helping to improve the alignment efficiency of subsequent component entities in different display areas.

[0091] For example, components can be added to the page to be proofread, or the positions of existing movable components on the page to be proofread can be moved. When a movement operation occurs on any component on the page to be proofread, in response to the movement operation, the bounding rectangle of the moved component is determined based on its position and outline information. Then, at least one pair of mutually perpendicular lines are selected from the lines containing the edges of the bounding rectangle as the edge lines corresponding to the component. By introducing the lines containing the edges of the bounding rectangle as the edge lines corresponding to the component, these edge lines have the ability to position the selected component on the page to be proofread.

[0092] Accordingly, at least one pair of mutually perpendicular edge lines can be selected as auxiliary alignment lines for the constituent entity; and / or at least one of the intersection points between the edge lines can be selected as auxiliary alignment points for the constituent view. The auxiliary alignment elements can include at least one of auxiliary alignment lines and auxiliary alignment points. It is understood that generating auxiliary alignment elements in the above manner improves the richness and diversity of the generated auxiliary alignment elements, thereby helping to improve the accuracy of subsequent positional correction results for the constituent entities.

[0093] The circumscribed rectangle can be the smallest circumscribed rectangle, or the smallest circumscribed rectangle in the horizontal and / or vertical directions.

[0094] See Figure 3C The diagram illustrates the display results of auxiliary alignment elements and mapped alignment elements in the interface. The two dashed lines in the canvas area correspond to the auxiliary alignment lines of the constituent entities (shown in gray in the diagram) associated with those dashed lines; the intersection of the two dashed lines corresponds to the auxiliary alignment point of the associated constituent entity. Correspondingly, through position mapping, there are mapped alignment lines (corresponding to the two dashed lines in the design draft reference area) and mapped alignment points (corresponding to the intersection of the two dashed lines in the canvas area) in the design draft reference area. At this point, the position of the selected constituent entity in the canvas area can be adjusted using the mapped alignment lines and / or mapped alignment points in the design draft reference area, thereby achieving alignment between the selected constituent entity and its corresponding constituent entity in the design draft reference area.

[0095] It should be noted that... Figure 3C The number of auxiliary alignment lines and points is provided only as an illustration and should not be construed as a specific limitation on the number of auxiliary alignment lines and points. Furthermore, auxiliary alignment lines and points can be used simultaneously or only one type can be used; this disclosure does not impose any limitation in this regard. Additionally, it is worth noting that only mapped alignment elements can be displayed in the display interface, or auxiliary alignment elements can be displayed in conjunction with them; this disclosure does not impose any limitation in this regard.

[0096] In another optional embodiment, edge lines of each component entity can be generated based on the outline edges of the component entities in the design reference drawing in the design draft reference area. These generated edge lines are then used as auxiliary alignment elements for the corresponding component entities. Based on position mapping, the corresponding mapping alignment elements for the component entities in the canvas area are determined. In response to a movement operation on a selected component entity in the page to be proofread in the canvas area, mapping alignment elements adjacent to the selected component entity's position are displayed in the display interface as a basis for placing the selected component entity. If the outline edge of the placed component entity matches the mapping alignment element, the display of the mapping alignment element is canceled.

[0097] This embodiment of the disclosure improves the uniformity and standardization of the auxiliary alignment element determination process by introducing the edge lines of the bounding rectangles corresponding to the constituent entities. At the same time, the number of auxiliary alignment elements is effectively controlled by the number of edge lines, thereby effectively controlling the number of mapped alignment elements. This ensures the simplicity of the content displayed on the interface when displaying mapped alignment elements, reduces visual interference to the page creator, and improves page creation efficiency.

[0098] Based on the above technical solutions, this disclosure also provides an optional embodiment, in which a linkage function between the page to be proofread and the design reference drawing is added, which facilitates detailed comparison between corresponding constituent entities.

[0099] See Figure 4 The interface display methods shown include:

[0100] S401. Display the design reference drawing in one display area of ​​the display interface, and display the proofreading page constructed based on the design reference drawing in another display area of ​​the display interface.

[0101] The constituent entities in the page to be proofread have corresponding constituent entities in the design reference drawing.

[0102] S402. Determine the auxiliary alignment element of any component entity based on the position information of any component entity in any display area.

[0103] S403. Based on the positional mapping relationship between different display areas, determine the mapping alignment element of the auxiliary alignment element in another display area.

[0104] S404. Display mapping alignment elements in the display interface to calibrate the positions of the constituent entities on the page to be calibrated and the corresponding constituent entities in the design reference drawing.

[0105] S405. Responding to page scrolling operations, control the scrolling association between the page to be proofread and the design reference image.

[0106] The page scrolling operation may include at least one of the following: dragging the page scroll bar in the display interface, scrolling the mouse scroll bar, or touching the scroll button. This disclosure does not limit the specific operation method of the page scrolling operation.

[0107] Among them, associated scrolling can be used to synchronously scroll the page to be proofread and the design reference image according to a preset ratio in the scrolling direction.

[0108] In one specific implementation, if the outlines of the constituent entities that have corresponding relationships in different display areas are displayed at a 1:1 ratio, that is, when the page to be proofread and the design reference page are displayed at a 1:1 ratio, the page to be proofread and the design reference page will scroll synchronously at the same frequency in the scrolling direction.

[0109] Since page creators don't always need to scroll the page to be proofread along with the design reference image, a scrolling component can be pre-set in the display interface. Triggering this component activates the page's scrolling functionality. When the scrolling functionality is active, it controls the scrolling of the page to be proofread and the design reference image in response to page scrolling. Conversely, when the page scrolling functionality is not active, only the content within the display area corresponding to the operation position scrolls independently in response to page scrolling. It should be noted that this embodiment does not limit the specific form, location, or triggering method of the scrolling component.

[0110] In one optional embodiment, the scrolling method can be determined based on the operation position in response to a page scrolling operation; if the scrolling method is an associated scrolling method, then the page to be proofread and the design reference image are controlled to scroll together. Furthermore, if the scrolling method is a non-associated scrolling method, then the page to be proofread and the design reference image are no longer controlled to scroll together.

[0111] Optionally, if the page scrolling operation is performed within the display area of ​​the page to be proofread, the scrolling method is determined to be associated scrolling. Alternatively, if the page scrolling operation is performed outside the display area of ​​the page to be proofread, for example, within the display area of ​​the design reference, the scrolling method is determined to be non-associated scrolling.

[0112] Understandably, when scrolling through a page awaiting proofreading, it's typically necessary to compare the details of the constituent entities with the design reference images. Therefore, automatically determining whether to use associated scrolling based on whether the scrolling operation falls within the display area of ​​the page awaiting proofreading can improve the convenience and practicality of associated scrolling without requiring manual triggering by the page creator. Conversely, when scrolling through the design reference images, the page creator is more likely to only need to view the undisplayed content and has a lower need to compare it with the page awaiting proofreading. Therefore, not using associated scrolling reduces unnecessary interference for the page creator.

[0113] It is worth noting that by introducing the operation position of page scrolling, the scrolling method is automatically determined, and the scrolling of the page to be proofread and the design reference image is controlled to be associated only when the scrolling method is associated scrolling. This avoids the interference to the page creator caused by the linkage of the content displayed on the page to be proofread and the design reference image when the scrolling method is not associated scrolling, thus helping to improve the page creation efficiency.

[0114] It should be noted that S405 can be executed before or after S401 to S404, or at any time between S401 and S404. This disclosure does not impose any restrictions on the specific timing of the execution of S405.

[0115] This embodiment of the disclosure introduces a scrolling function that links the page to be proofread with the design reference drawing, which facilitates the comparison of related content displayed on the display interface between the page to be proofread and the design reference drawing, thereby improving the creation efficiency of page creators.

[0116] As an implementation of the above-described interface display methods, this disclosure also provides an optional embodiment of an execution device for implementing the above-described interface display methods.

[0117] See Figure 5 The interface display device 500 shown includes: a reference diagram and page display module 501, an auxiliary alignment element determination module 502, a mapping alignment element determination module 503, and a mapping alignment element display module 504. Among them,

[0118] The reference drawing and page display module 501 is used to display a design reference drawing in one display area of ​​the display interface, and to display a page to be proofread based on the design reference drawing in another display area of ​​the display interface; wherein, the constituent entities in the page to be proofread have corresponding constituent entities in the design reference drawing;

[0119] The auxiliary alignment element determination module 502 is used to determine the auxiliary alignment element of any component entity based on the position information of any component entity in any display area.

[0120] The mapping alignment element determination module 503 is used to determine the mapping alignment element of the auxiliary alignment element in another display area according to the position mapping relationship between different display areas;

[0121] The mapping alignment element display module 504 is used to display the mapping alignment element in the display interface and to perform positional alignment between the constituent entities in the page to be aligned and the corresponding constituent entities in the design reference drawing.

[0122] This embodiment of the disclosure introduces a display area for displaying the design reference drawing and a display area for displaying the page to be proofread in the display interface. By displaying them together, it facilitates page effect comparison when creating the page to be proofread based on the design reference drawing, eliminating the need for screen switching and improving page creation efficiency. Simultaneously, by introducing auxiliary alignment elements and mapping alignment elements with positional mapping relationships in the two display areas, a reference is provided for the positional verification of the constituent entities in different display areas. This provides a traceable process during the construction of the page to be proofread based on the design reference drawing, or during further adjustments to the constructed page to be proofread, thereby helping to improve the fidelity between the created page to be proofread, or the proofread page to be proofread, and the design reference drawing, improving the positional accuracy of the page to be proofread and the page display effect. Furthermore, performing positional verification of the constituent entities of the page to be proofread during the page proofreading or creation process improves the efficiency of page creation or proofreading.

[0123] In an optional embodiment, the auxiliary alignment element determination module 502 includes:

[0124] The edge line determination unit is used to determine the edge line of the bounding rectangle corresponding to any component entity in any display area based on the position information of any component entity in any display area.

[0125] The auxiliary alignment element determination unit is used to determine the auxiliary alignment element of the constituent entity based on the edge line corresponding to the constituent entity.

[0126] In an optional embodiment, the edge line determination unit includes:

[0127] A sub-unit for generating auxiliary lines is used to generate at least one pair of auxiliary lines in the display area where the design reference drawing is located, in response to an auxiliary line creation operation.

[0128] The auxiliary line position adjustment subunit is used to adjust the position of the auxiliary line according to the position information of the selected constituent entity in the display area, so that the auxiliary line coincides with the edge of the outer rectangle of the constituent entity;

[0129] The edge line generation sub-unit is used to take the adjusted auxiliary line as the edge line corresponding to the constituent entity.

[0130] In an optional embodiment, the edge line determination unit includes:

[0131] The circumscribed rectangle determination subunit is used to determine the circumscribed rectangle of any component entity in the page to be proofread in response to a movement operation on any component entity.

[0132] The edge line determination sub-unit is used to take the straight line containing the edge of the circumscribed rectangle as the edge line corresponding to the constituent entity.

[0133] In an optional embodiment, the auxiliary alignment element includes an auxiliary alignment line, and the mapped alignment element includes a mapped alignment line; and / or,

[0134] The auxiliary alignment element includes auxiliary alignment points, and the mapping alignment element includes mapping alignment points.

[0135] In an optional embodiment, the auxiliary alignment element determination unit includes:

[0136] Auxiliary alignment lines determine sub-units by selecting at least one set of mutually perpendicular edge lines as auxiliary alignment lines for the constituent entity; and / or,

[0137] An auxiliary alignment point determination subunit is used to select at least one of the intersection points between the edge lines as an auxiliary alignment point for the constituent entity.

[0138] In one optional embodiment, the entity outlines of the constituent entities that have corresponding relationships in different display areas are displayed according to a preset ratio.

[0139] In one optional embodiment, the preset ratio is 1:1.

[0140] In one alternative embodiment, different display areas are displayed side by side.

[0141] In an optional embodiment, the device 500 further includes:

[0142] The associated scrolling module is used to control the associated scrolling of the page to be proofread and the design reference drawing in response to page scrolling operations.

[0143] In an optional embodiment, the associated scrolling module includes:

[0144] The scrolling mode determination unit is used to respond to page scrolling operations and determine the scrolling mode based on the operation position.

[0145] An associated scrolling unit is used to control the page to be proofread to scroll in association with the design reference image if the scrolling mode is associated scrolling mode.

[0146] In an optional embodiment, the scrolling mode determining unit is specifically used for:

[0147] If the operation location belongs to the display area of ​​the page to be proofread, then the scrolling method is determined to be an associated scrolling method.

[0148] The above-described interface display device can execute the interface display method provided in any embodiment of this disclosure, and has the corresponding functional modules and beneficial effects for executing the interface display method.

[0149] The technical solutions disclosed herein, including the collection, storage, use, processing, transmission, provision, and disclosure of design reference drawings and pages to be proofread, all comply with relevant laws and regulations and do not violate public order and good morals.

[0150] According to embodiments of this disclosure, this disclosure also provides an electronic device, a readable storage medium, and a computer program product.

[0151] Figure 6 A schematic block diagram of an example electronic device 600 that can be used to implement embodiments of the present disclosure is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices, and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the present disclosure described and / or claimed herein.

[0152] like Figure 6As shown, device 600 includes a computing unit 601, which can perform various appropriate actions and processes based on a computer program stored in read-only memory (ROM) 602 or a computer program loaded from storage unit 608 into random access memory (RAM) 603. RAM 603 may also store various programs and data required for the operation of device 600. The computing unit 601, ROM 602, and RAM 603 are interconnected via bus 604. Input / output (I / O) interface 605 is also connected to bus 604.

[0153] Multiple components in device 600 are connected to I / O interface 605, including: input unit 606, such as keyboard, mouse, etc.; output unit 607, such as various types of monitors, speakers, etc.; storage unit 608, such as disk, optical disk, etc.; and communication unit 609, such as network card, modem, wireless transceiver, etc. Communication unit 609 allows device 600 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0154] The computing unit 601 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of the computing unit 601 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various computing units running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. The computing unit 601 performs the various methods and processes described above, such as the interface display method. For example, in some embodiments, the interface display method may be implemented as a computer software program tangibly contained in a machine-readable medium, such as storage unit 608. In some embodiments, part or all of the computer program may be loaded and / or installed on device 600 via ROM 602 and / or communication unit 609. When the computer program is loaded into RAM 603 and executed by the computing unit 601, one or more steps of the interface display method described above may be performed. Alternatively, in other embodiments, the computing unit 601 may be configured to perform the interface display method by any other suitable means (e.g., by means of firmware).

[0155] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), complex programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0156] The program code used to implement the methods of this disclosure may be written in any combination of one or more programming languages. This program code may be provided to a processor or controller of a general-purpose computer, special-purpose computer, or other programmable data processing apparatus, such that when executed by the processor or controller, the program code causes the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The program code may be executed entirely on a machine, partially on a machine, as a standalone software package partially on a machine and partially on a remote machine, or entirely on a remote machine or server.

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

[0158] To provide interaction with a user, the systems and techniques described herein can be implemented on a computer having: a display device for displaying information to the user (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor); and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the computer. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0159] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as a data server), or computing systems that include middleware components (e.g., an application server), or computing systems that include frontend components (e.g., a user computer with a graphical user interface or web browser through which a user can interact with embodiments of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., a communication network). Examples of communication networks include local area networks (LANs), wide area networks (WANs), and the Internet.

[0160] Computer systems can include clients and servers. Clients and servers are generally geographically separated and typically interact via communication networks. The client-server relationship is established by computer programs running on the respective computers and having a client-server relationship with each other. A server can be a cloud server, also known as a cloud computing server or cloud host, a hosting product within the cloud computing service ecosystem that addresses the management difficulties and weak business scalability inherent in traditional physical hosting and VPS services. Servers can also be servers for distributed systems or servers integrated with blockchain technology.

[0161] Artificial intelligence (AI) is the study of enabling computers to simulate certain human thought processes and intelligent behaviors (such as learning, reasoning, thinking, and planning). It encompasses both hardware and software technologies. AI hardware technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, and big data processing. AI software technologies mainly include computer vision, speech recognition, natural language processing, machine learning / deep learning, big data processing, and knowledge graph technologies.

[0162] Cloud computing refers to a technology system that enables access to a shared pool of physical or virtual resources via a network. These resources can include servers, operating systems, networks, software, applications, and storage devices, and can be deployed and managed on demand and in a self-service manner. Cloud computing technology can provide efficient and powerful data processing capabilities for applications such as artificial intelligence and blockchain, as well as for model training.

[0163] It should be understood that the various forms of processes shown above can be used to rearrange, add, or delete steps. For example, the steps described in this disclosure can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution provided in this disclosure can be achieved, and this is not limited herein.

[0164] The specific embodiments described above do not constitute a limitation on the scope of protection of this disclosure. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this disclosure should be included within the scope of protection of this disclosure.

Claims

1. A method for displaying an interface, comprising: displaying a design reference image in a display area of a display interface, and displaying a page to be proofread constructed based on the design reference image in another display area of the display interface; wherein constituent entities in the page to be proofread have corresponding constituent entities in the design reference image; the design reference image is a presentation result image of a page to be created; the constituent entities in the design reference image are pictures corresponding to constituent elements in the page to be created; the page to be proofread is a page constructed based on the design reference image, and the constituent entities in the page to be proofread are page components; the display area in which the design reference image is displayed is a design draft reference area; and the display area in which the page to be proofread is displayed is a canvas area; in response to an auxiliary line creation operation in the display area in which the design reference image is displayed, generating at least one pair of auxiliary lines in the display area; adjusting the positions of the auxiliary lines according to position information of a selected constituent entity in the display area, so that the auxiliary lines coincide with edges of a circumscribed rectangle of the constituent entity; taking the adjusted auxiliary lines as edge lines corresponding to the constituent entity; determining an auxiliary alignment element of the constituent entity according to the edge lines corresponding to the constituent entity; determining a mapping alignment element of the auxiliary alignment element in another display area according to a position mapping relationship between different display areas; displaying the mapping alignment element in the display interface, so as to perform position proofreading of the constituent entity in the page to be proofread and the corresponding constituent entity in the design reference image; wherein if the mapping alignment element is located in the design draft reference area, the position proofreading comprises constantly adjusting the auxiliary alignment element by moving the constituent entity in the page to be proofread, and constantly adjusting the mapping alignment element, so that the mapping alignment element matches the corresponding constituent entity in the design draft reference area; and if the mapping alignment element is located in the canvas area, the position proofreading comprises matching the constituent entity in the page to be proofread and the mapping alignment element by moving the constituent entity. 2.The method of claim 1, further comprising: in response to a moving operation of any constituent entity in the page to be proofread, determining a circumscribed rectangle of the moved constituent entity according to position information of the moved constituent entity; and taking a straight line on which edges of the circumscribed rectangle are located as an edge line corresponding to the constituent entity. The auxiliary alignment element comprises an auxiliary alignment line, and the mapping alignment element comprises a mapping alignment line; and / or 3. The method of claim 1, wherein, The auxiliary alignment element comprises an auxiliary alignment point, and the mapping alignment element comprises a mapping alignment point. The determining of the auxiliary alignment element of the constituent entity according to the edge lines corresponding to the constituent entity comprises:

4. The method of claim 3, wherein, selecting at least one set of mutually perpendicular edge lines as the auxiliary alignment lines of the constituent entity; and / or selecting at least one of intersection points between the edge lines as the auxiliary alignment point of the constituent entity. Entity outlines of constituent entities having a corresponding relationship in different display areas are displayed according to a preset ratio.

5. The method according to any one of claims 1 to 4, wherein, The preset ratio is 1:

1.

6. The method of claim 5, wherein, The different display areas are displayed side by side.

7. The method of claim 6, wherein, The method further comprises:

8. The method of claim 7, wherein, ​ In response to a page scrolling operation, the to-be-proofread page is controlled to be associatedly scrolled with the design reference picture.

9. The method of claim 8, wherein, The response to the page scrolling operation includes: In response to a page scrolling operation, a scrolling mode is determined according to an operation position. If the scrolling mode is an associated scrolling mode, the to-be-proofread page is controlled to be associatedly scrolled with the design reference picture.

10. The method of claim 9, wherein, The determination of the scrolling mode according to the operation position includes: If the operation position belongs to a display region where the to-be-proofread page belongs, the scrolling mode is determined to be an associated scrolling mode.

11. An interface display device, comprising: a reference picture and page display module configured to display a design reference picture in a display region of a display interface and display a to-be-proofread page constructed based on the design reference picture in another display region of the display interface, wherein constituent entities in the to-be-proofread page have corresponding constituent entities in the design reference picture, the design reference picture is a presentation result picture of a desired created page, constituent entities in the design reference picture are pictures corresponding to constituent elements in the desired created page, the to-be-proofread page is a page constructed based on the design reference picture, and constituent entities in the to-be-proofread page are page components, the display region where the design reference picture is displayed is a design draft reference region, and the display region where the to-be-proofread page is displayed is a canvas region; an auxiliary alignment element determination module, including an edge line determination unit and an auxiliary alignment element determination unit, wherein the edge line determination unit includes an auxiliary line generation subunit, an auxiliary line position adjustment subunit, and an edge line generation subunit; the auxiliary line generation subunit is configured to generate at least one pair of auxiliary lines in the display region where the design reference picture is located in response to an auxiliary line creation operation in the display region; the auxiliary line position adjustment subunit is configured to adjust the position of the auxiliary line according to position information of a selected constituent entity in the display region, so that the auxiliary line coincides with the edge of a circumscribed rectangle of the constituent entity; the edge line generation subunit is configured to take the adjusted auxiliary line as an edge line corresponding to the constituent entity; the auxiliary alignment element determination unit is configured to determine an auxiliary alignment element of the constituent entity according to the edge line corresponding to the constituent entity; and a mapping alignment element determination module configured to determine a mapping alignment element of the auxiliary alignment element in another display region according to a position mapping relationship between different display regions. The mapping alignment element display module is configured to display the mapping alignment element in the display interface, so as to perform position alignment between the constituent entity in the page to be proofread and the corresponding constituent entity in the design reference diagram; wherein the position alignment comprises: if the mapping alignment element is located in the design draft reference area, the constituent entity in the page to be proofread is moved, the auxiliary alignment element is continuously adjusted, and then the mapping alignment element is continuously adjusted, so that the mapping alignment element matches the corresponding constituent entity in the design draft reference area; if the mapping alignment element is located in the canvas area, the constituent entity in the page to be proofread is moved, so that the constituent entity matches the mapping alignment element.

12. The apparatus of claim 11, wherein, The edge line determination unit comprises: An outer rectangle determination subunit configured to, in response to a movement operation on any constituent entity in the page to be proofread, determine an outer rectangle of the moved constituent entity according to position information of the moved constituent entity; An edge line determination subunit configured to determine a straight line where an edge of the outer rectangle is located as an edge line corresponding to the constituent entity.

13. The apparatus of claim 11, wherein, The auxiliary alignment element comprises an auxiliary alignment line, and the mapping alignment element comprises a mapping alignment line; and / or, The auxiliary alignment element comprises an auxiliary alignment point, and the mapping alignment element comprises a mapping alignment point.

14. The apparatus of claim 13, wherein, The auxiliary alignment element determination unit comprises: An auxiliary alignment line determination subunit configured to select at least one set of mutually perpendicular edge lines as auxiliary alignment lines of the constituent entity; and / or, An auxiliary alignment point determination subunit configured to select at least one of intersection points between the edge lines as an auxiliary alignment point of the constituent entity.

15. The apparatus of any of claims 11-14, wherein, The entity outlines of the constituent entities having the corresponding relationship in different display areas are displayed according to a preset ratio.

16. The apparatus of claim 15, wherein, The preset ratio is 1:

1.

17. The apparatus of claim 16, wherein, The different display areas are displayed side by side.

18. The apparatus of claim 17, wherein, The device further comprises: An associated scrolling module configured to, in response to a page scrolling operation, control the page to be proofread and the design reference diagram to be associated scrolled.

19. The apparatus of claim 18, wherein, The associated scrolling module comprises: A scrolling mode determination unit configured to, in response to a page scrolling operation, determine a scrolling mode according to an operation position; An associated scrolling unit configured to, if the scrolling mode is an associated scrolling mode, control the page to be proofread and the design reference diagram to be associated scrolled.

20. The apparatus of claim 19, wherein, The scrolling mode determination unit is specifically configured to: If the operation position belongs to a display area to which the page to be proofread belongs, determine that the scrolling mode is the associated scrolling mode. 21.An electronic device comprising: at least one processor; and a memory connected with the at least one processor in communication; wherein the memory stores instructions executable by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to perform the interface display method in any one of claims 1-10.

22. A non-transitory computer readable storage medium having stored thereon computer instructions, wherein, The computer instructions are used to enable a computer to perform the interface display method in any one of claims 1-10.

23. A computer program product comprising computer programs / instructions which, when executed by a processor, implement the steps of the interface display method of any one of claims 1-10.

Images