WO2020168791A1 - 界面显示方法、装置、计算机设备和存储介质 - Google Patents

界面显示方法、装置、计算机设备和存储介质 Download PDF

Info

Publication number
WO2020168791A1
WO2020168791A1 PCT/CN2019/124817 CN2019124817W WO2020168791A1 WO 2020168791 A1 WO2020168791 A1 WO 2020168791A1 CN 2019124817 W CN2019124817 W CN 2019124817W WO 2020168791 A1 WO2020168791 A1 WO 2020168791A1
Authority
WO
WIPO (PCT)
Prior art keywords
interface
container
page container
page
area
Prior art date
Application number
PCT/CN2019/124817
Other languages
English (en)
French (fr)
Inventor
林德熙
Original Assignee
广州视源电子科技股份有限公司
广州视睿电子科技有限公司
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by 广州视源电子科技股份有限公司, 广州视睿电子科技有限公司 filed Critical 广州视源电子科技股份有限公司
Publication of WO2020168791A1 publication Critical patent/WO2020168791A1/zh

Links

Images

Classifications

    • 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

Definitions

  • the present disclosure relates to the technical field of graphical user interfaces, for example, to interface display methods, interface display devices, computer equipment, and storage media.
  • the page in the editing state included in the common graphical user interface for page editing (also called "page editing interface”).
  • This page is also called a page container.
  • Users can add text, pictures, and multimedia to the page container.
  • Elements such as files, such as the PPT editing interface; after saving, the page container and all the elements added to the page container can be displayed as a whole image.
  • the inventor of this application found the following problems in related technologies: In the page editing interface, when the user adds elements such as text to the page container or moves the cursor element, if the added element or the moved If the cursor exceeds the visible area of the interface, the user will not be able to see the newly added element or the moved cursor; for this situation, the current solution is that the user moves the page container through the scroll bar in the operation interface to add the latest addition The element or the moved cursor is displayed in the visual area of the interface, but this method has the problem of low editing efficiency of the page container.
  • an interface display method including:
  • the visual area of the display interface includes a page container for accommodating elements, and the shape of the page container is fixed;
  • a target element is determined; the target element is an element operated by the operation instruction;
  • the method further includes: moving a first target control during the movement of the page container; the first target control is a control for controlling the movement of the page container.
  • the method further includes:
  • the first target control includes a horizontal scroll bar and/or a vertical scroll bar
  • the horizontal scroll bar is used to control the page container to move in the horizontal direction of the viewable area of the interface; the vertical scroll bar is used to control the vertical movement of the page container in the viewable area of the interface. Move in the direction.
  • the step of moving the page container includes:
  • the step of moving the page container horizontally/vertically includes:
  • the page container is moved horizontally/vertically; the displacement of the page container by the horizontal/vertical movement corresponds to the distance.
  • the visible area of the interface, the page container, and the element hot area are all rectangular.
  • the method further includes: judging whether the horizontal movement condition/vertical movement condition is satisfied according to the relative position of the element hot zone and the visible area of the interface; if the horizontal movement condition is satisfied, the horizontal movement The page container; if the vertical movement condition is met, the page container is moved vertically.
  • the horizontal movement condition is that in the horizontal direction, the left or right side of the element hot zone exceeds the visible area of the interface;
  • the vertical movement condition is that In the vertical direction, the upper side or the lower side of the element hot zone exceeds the visible area of the interface.
  • the method further includes: after the first target control moves to the boundary, if the target element still exceeds the visible area of the interface, acquiring the lower container of the page container;
  • the method further includes: moving a second target control during the movement of the lower container; the second target control is a control for controlling the movement of the lower container.
  • it further includes: when the target element is completely displayed in the visual area of the interface, or when the second target control moves to the boundary, stopping moving the lower container and the first Two target controls.
  • the method further includes: after the target element is completely displayed in the visual area of the interface, acquiring the bottommost page container in the interface as the bottom container;
  • the interface hot zone is the smallest outer rectangular area containing the bottom container and all the elements that have been added to the bottom container;
  • the method further includes: displaying the hot zone of the interface in a centered manner in the visible area of the interface.
  • the element operation instruction in the page container includes at least one of an operation instruction to add an element to the page container and an operation to edit an existing element in the page container.
  • the display color of the page container is different from the display color of the visual area of the interface.
  • the target element includes at least one of cursor, text, table, graph, multimedia file, mind map, and upper container.
  • an interface display device including:
  • a display module for displaying the visual area of the interface includes a page container for accommodating elements, and the shape of the page container is fixed;
  • the instruction receiving module is used to receive element operation instructions
  • An element determination module configured to determine a target element in response to the operation instruction; the target element is an element operated by the operation instruction;
  • the container moving module is used to move the page container when the target element exceeds the visual area of the interface so that the target element approaches the center of the visual area of the interface; the page container is the target element Where the page container is located, during the movement of the page container, the position of the target element in the page container remains unchanged.
  • it further includes: a control moving module, configured to move a first target control during the movement of the page container; the first target control is a control used to control the movement of the page container.
  • it further includes: a movement control module, configured to stop moving the target element when the target element is completely displayed in the visual area of the interface, or when the first target control moves to the boundary Page container.
  • a movement control module configured to stop moving the target element when the target element is completely displayed in the visual area of the interface, or when the first target control moves to the boundary Page container.
  • it further includes:
  • a lower container acquisition module configured to acquire the lower container of the page container if the target element still exceeds the visible area of the interface after the first target control moves to the boundary;
  • the lower container judging module is used to judge whether the lower container is the bottom canvas
  • the lower container moving module is used to move the lower container if not in a direction such that the target element approaches the center of the visible area of the interface; during the movement of the lower container, the page container and the The relative position of the lower container remains unchanged.
  • an embodiment of the present disclosure provides a computer device including a display, a memory, and a processor, wherein the display is used to display a page editing interface; the memory stores a computer program; the processor executes the program When realizing the steps of the interface display method of any of the above embodiments.
  • embodiments of the present disclosure provide a computer storage medium on which a computer program is stored, and when the program is executed by a processor, the above interface display method is implemented.
  • One of the above technical solutions has the following advantages or beneficial effects: when the user edits the page container, he manipulates the elements in the page container, and if the area of the operated element exceeds the visible area of the interface, the page container where the element is located can be automatically moved , By automatically moving the page container, the elements currently operated by the user are moved to the visual area of the interface for display, without the user operating the scroll bar, which is beneficial to improve the editing efficiency of the page container.
  • FIG. 1A is a schematic diagram of a page editing interface in an embodiment
  • FIG. 1B is a schematic diagram of a page editing interface in another embodiment
  • FIG. 1C is a schematic diagram of a page editing interface in another embodiment
  • Figure 1D is a schematic diagram of the display effect after adding and saving the ancient poetry subject tool in the page container;
  • FIG. 1E is a schematic diagram of the display effect of the page container in the page editing interface of FIG. 1A after being saved;
  • FIG. 2 is a schematic flowchart of an interface display method of an embodiment
  • 3A is a schematic diagram of a page editing interface before operating on the text of the page container in an embodiment
  • FIG. 3B is a schematic diagram after operating on the page container text in FIG. 3A;
  • FIG. 3C is a schematic diagram after moving the page container to the interface in FIG. 3B;
  • FIG. 4A is a schematic diagram of a page editing interface before graphics operations on a page container in an embodiment
  • FIG. 4B is a schematic diagram after operating the page container graphics in FIG. 4A;
  • FIG. 4C is a schematic diagram after moving the page container to the interface in FIG. 4B;
  • 5A is a schematic diagram of a page editing interface before operating on a page container window in an embodiment
  • FIG. 5B is a schematic diagram after operating the page container window in FIG. 5A;
  • FIG. 5C is a schematic diagram after moving the page container to the interface in FIG. 5B;
  • 6A is a schematic diagram of the position of the element hot zone relative to the visible zone in the X direction in an embodiment
  • 6B is a schematic diagram of the position of the element hot zone relative to the visible zone in the X direction in another embodiment
  • 6C is a schematic diagram of the position of the element hot zone relative to the visible zone in the X direction in another embodiment
  • 6D is a schematic diagram of the position of the element hot zone relative to the visible zone in the X direction in another embodiment
  • Fig. 7A is a schematic diagram of the position of the element hot zone relative to the visible zone in the Y direction in an embodiment
  • 7B is a schematic diagram of the position of the element hot zone relative to the visible zone in the Y direction in another embodiment
  • 7C is a schematic diagram of the position of the element hot zone relative to the visible zone in the Y direction in another embodiment
  • 7D is a schematic diagram of the position of the element hot zone relative to the visible zone in the Y direction in another embodiment
  • FIG. 8A is a schematic diagram of an upper container added to a page container in an embodiment
  • FIG. 8B is a schematic diagram of the upper container in FIG. 8A after being operated
  • FIG. 8C is a schematic diagram of the page container in the interface in FIG. 8B after being moved;
  • Figure 9A is a schematic diagram of the interface hot zone in an embodiment
  • Figure 9B is a schematic diagram of the interface hot zone in Figure 9A after moving
  • FIG. 9C is a schematic diagram of the interface hot zone in FIG. 9B after being displayed in the center;
  • FIG. 10 is a schematic structural diagram of an interface display device according to an embodiment
  • Figure 11 is an internal structure diagram of a computer device in an embodiment.
  • the interface display method provided in this application can be applied to the page editing interface 100 as shown in FIG. 1A.
  • the visual area 200 of the interface is as shown in FIG. 1A, and the page container 300 in the editing state is displayed in the visual area 200;
  • the shape of the page container 300 is fixed, for example, the page container 300 can be a rectangle; in addition, the page container 300 is movable relative to the viewing area 200, for example, as shown in FIG. 1B, the page container 300 can move to the left relative to the viewing area 200; Alternatively, as shown in FIG. 1C, the page container 300 may move upward relative to the viewing area 200.
  • the page editing interface 100 further includes an optional element type 201.
  • the optional element type 201 may include text, shape, multimedia, table, mind map, and other tools. Among them, other tools can be set according to specific application scenarios.
  • the corresponding type of element can be added to the page container 300.
  • the user selects an optional element of the text type, and then can add text to the page container 300; the user selects the multimedia type Optional elements, and then choose to add multimedia files based on the pop-up file selection window, which can add multimedia files in the page container 300; the user selects other tools, and then based on the pop-up subject tool options, you can select the subject tools that need to be added, for example If the user chooses to add ancient poems, an upper container (that is, ancient poems) can be added to the page container 300, and the user can input the content of the ancient poems in the upper container. After the editing of the page container 300 is completed, the display of the content in the ancient poem container is independent of the display of other elements in the page container 300, for example, as shown in FIG. 1D.
  • the elements added to the page container 300 include not only the elements 301 displayed in the effective area of the page container 300, but also the effective elements displayed in the page container 300.
  • the element 302 outside the area also includes the element 303 that is partially displayed in the effective area of the page container 300 and partially displayed outside the effective area of the page container 300; for the computer, the element 301, element 302, and element 303 are all Elements that have been added to the page container 300.
  • the display effect of the page container 300 is shown in FIG. 1E.
  • the element part in the effective area of the page container 300 will be displayed together with the effective area of the page container, and the effective area of the page container 300 The elements inside and outside cannot be displayed.
  • elements operated by the user include, but are not limited to, cursor, text, table, graph, multimedia file, mind map, and upper container.
  • the text can be text or symbols;
  • the graphics can be flowcharts, geometric figures, or ordinary pictures.
  • the page editing interface 100 also includes controls such as a new page container (ie, "New Page” in Figure 1A) and "Start Playing"; when the user clicks on the control of "New Page", A blank page container is displayed in the visual area 200 of the interface; when the user clicks the "start playing" control, the currently edited page container 300 is automatically saved, and the page container 300 and elements are displayed as a whole.
  • a new page container ie, "New Page” in Figure 1A
  • Start Playing when the user clicks on the control of "New Page"
  • a blank page container is displayed in the visual area 200 of the interface
  • start playing the currently edited page container 300 is automatically saved, and the page container 300 and elements are displayed as a whole.
  • an interface display method which includes the following steps:
  • S100 Display the visual area of the interface; the visual area of the interface includes a page container for accommodating elements, and the shape of the page container is fixed.
  • the element operation instruction in the page container may be an operation instruction for adding an element to the page container, or an operation instruction for editing an existing element in the page container.
  • the operation instructions for adding elements to the page container may be operation instructions such as inputting text into the page container, typing a cursor, inserting graphics, inserting multimedia files, adding tables, and adding upper-level containers.
  • the operation instruction for editing the existing elements in the page container can be an operation instruction for editing the text, cursor, table, graphics, multimedia file, and upper container that have been added to the page container, for example: The operation instruction for adjusting the format of the text in the page container, the operation instruction for expanding and displaying the mind map that has been added to the page container, or the operation instruction for moving the position of the upper container that has been added to the page container.
  • S120 In response to the operation instruction, determine a target element; the target element is an element operated by the operation instruction.
  • the target element refers to the element after being operated by the operation instruction.
  • the corresponding target element is the adjusted text
  • the corresponding target element is the expanded mind map
  • the corresponding target element is the moved ancient poetry window. Poetry window.
  • the target element may include at least one of cursor, text, table, graph, multimedia file, mind map, and upper container.
  • the page container where the target element is located is automatically moved.
  • the page container where the target element is located is automatically moved.
  • the interface before adjustment is shown in Figure 3A; the interface after adjustment is shown in Figure 3B, it can be seen that the "target element 123123 is invisible” beyond the visual area 200 of the interface; now to the left
  • the page container 300 is moved so that the "target element 123123 is invisible” can be completely displayed in the visual area 200 of the interface, and the effect is shown in FIG. 3C.
  • the interface before enlargement is displayed as shown in FIG. 5A; the enlarged upper container 401 exceeds the viewable area 200 of the interface, as shown in FIG. 5B As shown; at this time, the page container 300 is automatically moved upward, so that the enlarged upper container 400 can be completely displayed to the visual area 200 of the interface, and the effect after the movement is shown in FIG. 5C.
  • the first target control in the mobile interface is also synchronized; the first target control is a control used to control the movement of the page container.
  • the page editing interface there are also controls for controlling the movement of the page container, such as the horizontal scroll bar 102 and the vertical scroll bar 101 in FIGS. 1A to 1C.
  • the process of moving the page container 300 it also moves synchronously.
  • the horizontal scroll bar 102 and/or the vertical scroll bar 101 in the interface In the traditional way, the user moves the horizontal scroll bar 102 and/or the vertical scroll bar 101 to make the page container 300 move accordingly.
  • the user does not need to operate the horizontal scroll bar 102 and/or the vertical scroll bar 101.
  • the vertical scroll bar 101 moves up; when the page container 300 moves to the left , The horizontal scroll bar 102 moves to the right.
  • the horizontal scroll bar 102 is used to control the page container 300 to move in the horizontal direction of the viewable area 200 of the interface; the vertical scroll bar 101 is used to control the vertical movement of the page container 300 in the viewable area 200 of the interface. Move in the direction.
  • the page container 300 automatically moves during the user's element operation, and at the same time the horizontal scroll bar 102 in the interface is adaptively moved, so that the user can see the complete element content in the visual area 200.
  • the page container where the target element is located and the first target control corresponding to the page container are stopped. That is, during the movement of the page container, when the element that the user pays attention to has been completely displayed in the visual area 200 of the interface, or the scroll bar corresponding to the page container has moved to the border of the scroll area, the page movement is suspended.
  • the situation of moving the page container includes: moving the page container in the horizontal direction of the interface, moving the page container in the vertical direction of the interface, or moving the page in both the horizontal and vertical directions of the interface
  • Three situations of container Specifically: in the horizontal direction of the interface, if the corresponding area of the target element has a visible area 200 beyond the interface, move the page container horizontally and move the horizontal controls (such as horizontal scroll bars) synchronously; in the vertical direction of the interface Above, if the target element has a viewable area 200 beyond the interface, move the page container vertically and move the vertical controls (such as vertical scroll bars) simultaneously; in the horizontal and vertical directions of the interface, if the target element If there is a visual area 200 beyond the interface, the page container is moved horizontally and the page container vertically, and the horizontal control/vertical control are moved synchronously.
  • the overall moving direction of the page container and the overall moving distance in this direction can be calculated according to the distance of the horizontal and vertical movement of the page container. Then move the page container without moving the page container in two steps, which improves the efficiency of page container adjustment.
  • the area where the user is currently paying attention to the element is defined as the element hot zone, and the element hot zone and the visual area 200 of the interface are calculated in the horizontal/vertical direction.
  • the upper distance according to the distance to move the page container horizontally/vertically.
  • the element that the user currently pays attention to includes the content input by the user, a moving cursor, or an element obtained by performing a deformation operation on an element.
  • the visual area 200, the page container, and the element hot area of the interface are assumed to be rectangular, and the implementation of the mobile page container is described.
  • the right-hand coordinate system is established with the vertex of the upper left corner of the visual area 200 of the interface as the origin. Based on this coordinate system, after the user performs an element operation, the element hot zone 301 is obtained.
  • the situation of the element hot zone 301 may be: the element hot zone 301 is not completely displayed in the visual area 200 of the interface in the X-axis direction (as shown in Figure 6A ⁇ 6C), the element hot zone 301 is not completely displayed in the visual area 200 of the interface in the Y-axis direction (as shown in FIGS. 7A to 7C).
  • the element hot zone 301 When the element hot zone 301 is not completely displayed in the viewable area 200 of the interface in the X-axis direction, calculate the distance between the left and right edges of the element hot zone 301 and the left and right edges of the visual area 200 of the interface respectively, and use the element hot zone for distance calculation
  • the abscissas of the left and right sides of 301 are subtracted from the abscissas of the left and right sides of the visual area 200 of the interface. For example: as shown in FIG.
  • the distance that the page container 300 moves to the right in the X-axis direction can be set to be equal to the absolute value of the distance on the left; when the calculated distance on the right is greater than When zero is set, the distance that the page container 300 moves to the left in the X-axis direction is equal to the distance on the right.
  • the movement of the page container 300 in the X-axis direction is performed only when only one of the two conditions is satisfied, the distance on the left is less than zero and the distance on the right is greater than zero.
  • the page container where the target element is located is moved horizontally, that is, in the X-axis direction. If the left or right side of the element hot zone 301 exceeds the visible area of the interface, then the Move the page container 300 where the target element is located in the direction.
  • the element hot zone 301 When in the page container 300, the element hot zone 301 is not completely displayed in the visual area of the interface in the Y-axis direction, calculate the distance between the upper and lower edges of the element hot zone 301 and the upper and lower edges of the visual area 200 of the interface. Calculate and use the vertical coordinates of the upper and lower sides of the element hot zone 301, and subtract the vertical coordinates of the upper and lower sides of the visual area 200 of the interface. For example, in FIG. Coordinate, subtract the ordinate of the lower side of the visual area 200 of the interface to obtain the distance between the element hot zone 301 and the lower side of the visual area 200 of the interface; in Fig. 7B, the upper side of the element hot zone 301 is used The ordinate is subtracted from the ordinate of the upper side of the visual area 200 of the interface to obtain the distance between the element hot zone 301 and the upper side of the visual area 200 of the interface.
  • the vertical downward movement distance of the page container 300 can be set to be equal to the absolute value of the upper distance; when the calculated lower distance is greater than zero , The vertical upward movement distance of the page container 300 is set equal to the distance from the lower side. The vertical movement of the page container 300 is performed only when only one of the two conditions of the distance on the upper side is less than zero and the distance on the lower side is greater than zero is satisfied.
  • the element hot zone 301 is in the visual area 200 of the interface, so there is no need to move the page container 300.
  • the page container 300 where the target element is located is moved vertically, that is, in the Y-axis direction, the upper or lower side of the element hot zone 301 exceeds the visible area 200 of the interface, then Move the page container 300 where the target element is located in the Y-axis direction.
  • the bottom canvas of the page editing interface 100 includes multiple layers of containers, specifically including the edited page container 300 and the ancient poetry container 400 added to the page.
  • the page container 300 is the lower container of the ancient poetry container 400
  • the ancient poetry container 400 is the upper container of the page container 300;
  • the target controls corresponding to the lower container are the control 101 and the control 102;
  • the target control corresponding to the upper container is the control 401.
  • the user operates the elements in the ancient poem container 400 to obtain the element hot zone 402, and the element hot zone 402 exceeds the visual area 200 of the interface, first move the ancient poem container 400 (in the scene of FIG. 8A, the moving direction is vertical Move up), and move the control 401 synchronously.
  • the interface effect is as shown in FIG. 8B. Since the element hot zone 402 is still beyond the visual area 200 of the interface at this time, the lower container of the ancient poem container 400, that is, the page container 300, is obtained. Since the page container 300 is not the bottom canvas, the page container 300 can be moved further, and the direction To make the element hot zone 402 approach the center of the visual area 200 of the interface (in the scene of FIG. 8B, the moving direction is vertical upward movement). During the movement of the page container 300, the relative positions of the ancient poem container 400 and the page container 300 remain unchanged. During the movement of the page container 300, the control 101 and the control 102 can also be moved synchronously.
  • the multi-layer containers in the interface can be linked when necessary to further ensure that the page elements that the user pays attention to are displayed in the visual area of the page. It is understandable that in the process of multi-layer container linkage, when the control of the upper container moves to the boundary, the lower container is triggered to move. For the user, the process can be smooth from time to time without obvious lag; of course, also It can be that when the control of the upper container moves to the boundary, the set duration is paused, and then the movement of the lower container is triggered, so that the user can observe the movement effect of different page containers.
  • the method further includes the step of recalculating the compressed space.
  • the compressed space refers to the gap between the bottom container and the visual area 200 of the interface.
  • the blank space of is compressed to allow the bottom container to be displayed in the visual area 200 of the interface as much as possible.
  • the bottom page container in the interface is obtained, as the bottom container, all elements that have been added to the bottom container are obtained; to determine the interface hot zone, first determine A rectangle containing all the elements added to the bottom container is obtained, and a large rectangle is obtained, and the large rectangle is superimposed with the rectangle corresponding to the bottom container itself to determine a rectangular area and record it as the interface hot zone.
  • the rectangle R0 corresponding to all elements is obtained through the following algorithm:
  • the rectangle R of the interface hot zone can be obtained as:
  • R ((min(R0.x1,R s .x1),min(R0.y1,R s .y1)),
  • the element hot zone 301 of the bottom container 300 in the interface is completely displayed in the visible area 200.
  • the rectangle of the interface hot zone can be obtained. It can be seen that the rectangle of the interface hot zone is not completely displayed on the interface.
  • the visual area 200 of referring to the above-mentioned condition determination for moving the element hot area, it can be determined that the rectangle of the interface hot area needs to move horizontally to the right, and the bottom container 300 needs to be moved horizontally to the right.
  • FIG. 9B after the bottom container 300 moves horizontally to the right, when the interface hot zone is completely displayed in the visual area 200 of the interface, the bottom container 300 stops moving.
  • the movement of the bottom-layer container 300 is used to drive the movement of the elements on the bottom-layer container 300 to achieve the effect of moving the interface hot zone.
  • the method further includes: displaying the hot area of the interface in a centered manner in the visual area 200 of the interface. That is, in FIG. 9B, although the interface hot zone can be completely displayed in the visual area 200 of the interface, it is not displayed in the center. For this situation, the bottom container 300 is further moved until the interface hot zone is displayed in the center in the visual area 200 of the interface.
  • the display effect is shown in Figure 9C.
  • steps in the flowchart are displayed in sequence as indicated by the arrows, these steps are not necessarily performed in sequence in the order indicated by the arrows. Unless specifically stated in this article, the execution of these steps is not strictly limited in order, and these steps can be executed in other orders. Moreover, at least part of the steps in the flowchart of the method embodiment may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily executed at the same time, but can be executed at different times. These sub-steps Or the execution order of the stages is not necessarily carried out sequentially, but may be executed alternately or alternately with at least a part of other steps or sub-steps or stages of other steps.
  • this article also provides an embodiment of the interface display device; in the embodiment of the present disclosure, the visual area of the interface includes a page container for accommodating elements, the page container The shape is fixed.
  • the interface display device includes:
  • the display module 501 is configured to display the visual area of the interface; the visual area of the interface includes a page container for accommodating elements, and the shape of the page container is fixed.
  • the instruction receiving module 502 is used to receive element operation instructions
  • the element determination module 503 is configured to determine a target element in response to the operation instruction; the target element is an element operated by the operation instruction;
  • the container moving module 504 is configured to move the page container when the target element exceeds the visual area of the interface so that the target element approaches the center of the visual area of the interface; the page container is the target In the page container where the element is located, during the movement of the page container, the position of the target element in the page container remains unchanged.
  • the interface display device further includes: a control moving module, configured to move a first target control during the movement of the page container; the first target control is used to control the movement of the page container Controls.
  • the interface display device further includes: a movement control module for when the target element is completely displayed in the visual area of the interface, or when the first target control moves to the boundary , Stop moving the page container and the first target control.
  • the first target control includes a horizontal scroll bar and/or a vertical scroll bar; the horizontal scroll bar is used to control the page container to move in the horizontal direction of the visual area of the interface; The vertical scroll bar is used to control the page container to move in the vertical direction of the visible area of the interface.
  • the container moving module 504 specifically includes:
  • the first moving unit is configured to move the page container horizontally in the horizontal direction if the target element exceeds the visible area of the interface
  • the second moving unit is configured to move the page container vertically if the target element exceeds the visible area of the interface in the vertical direction.
  • the first moving unit is specifically configured to determine the area where the target element is located as an element hot zone; obtain that the element hot zone and the visible area of the interface are in the horizontal direction Move the page container horizontally; the displacement of the page container being moved horizontally corresponds to the first distance.
  • the second moving unit is specifically configured to determine the area where the target element is located as an element hot zone; acquire that the element hot zone and the visible area of the interface are in the vertical direction Move the page container vertically; the displacement of the page container being moved vertically corresponds to the second distance.
  • the visible area of the interface, the page container, and the element hot area are all rectangular.
  • the interface display device further includes: a movement judgment module for judging whether the horizontal movement condition/vertical movement condition is satisfied according to the relative position of the element hot zone and the visible area of the interface; If the horizontal movement condition is satisfied, the first moving unit is notified to move the page container horizontally; if the vertical movement condition is satisfied, the second moving unit is notified to move the page container vertically.
  • the horizontal movement condition is that in the horizontal direction, the left or right side of the element hot zone exceeds the visible area of the interface;
  • the vertical movement condition is that In the vertical direction, the upper side or the lower side of the element hot zone exceeds the visible area of the interface.
  • the interface display device further includes:
  • a lower container acquisition module configured to acquire the lower container of the page container if the target element still exceeds the visible area of the interface after the first target control moves to the boundary;
  • the lower container judging module is used to judge whether the lower container is the bottom canvas
  • the lower container moving module is used to move the lower container if not in a direction such that the target element approaches the center of the visible area of the interface; during the movement of the lower container, the page container and the The relative position of the lower container remains unchanged.
  • the various modules in the device for tracking and shooting by the smart terminal can be implemented in whole or in part by software, hardware and a combination thereof.
  • the above modules may be embedded in the form of hardware or independent of the processor in the computer equipment, or may be stored in the memory of the computer equipment in the form of software, so that the processor can call and execute the operations corresponding to the above modules.
  • the logical division of each program module is only an example. In actual applications, it can be based on needs, for example, due to the configuration requirements of the corresponding hardware or the convenience of software implementation.
  • the above function allocation is completed by different program modules, that is, the internal structure of the device for tracking and shooting by the smart terminal is divided into different program modules to complete all or part of the functions described above.
  • a computer device is provided.
  • the computer device may be a terminal, and its internal structure diagram may be as shown in FIG. 11.
  • the computer equipment includes a processor, a memory, a network interface, a display screen and an input device connected through a system bus.
  • the processor of the computer device is used to provide calculation and control capabilities.
  • the memory of the computer device includes a non-volatile storage medium and an internal memory.
  • the non-volatile storage medium stores an operating system and a computer program.
  • the internal memory provides an environment for the operation of the operating system and computer programs in the non-volatile storage medium.
  • the network interface of the computer device is used to communicate with an external terminal through a network connection.
  • the display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen
  • the input device of the computer equipment can be a touch layer covered on the display screen, or it can be a button, a trackball or a touchpad set on the computer equipment shell , It can also be an external keyboard, touchpad, or mouse.
  • FIG. 11 is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied.
  • the specific computer device may Including more or fewer parts than shown in the figure, or combining some parts, or having a different arrangement of parts.
  • a computer device including a display, a memory, and a processor.
  • the display is used for displaying page editing and editing;
  • the memory stores a computer program, and the processor implements the following steps when the computer program is executed:
  • the visual area of the interface includes a page container for accommodating elements, the shape of the page container is fixed; receiving an element operation instruction in the page container; responding to the operation instruction, Determine the target element; the target element is the element operated by the operation instruction; when the target element exceeds the visual area of the interface, move the page container in a direction such that the target element faces the The center of the visual area of the interface is close; during the movement of the page container, the position of the target element in the page container remains unchanged.
  • the processor further implements the following steps when executing the computer program: during the movement of the page container, the first target control is moved; the first target control is a control for controlling the movement of the page container.
  • the processor further implements the following steps when executing the computer program: after moving the page container, when the target element is completely displayed in the visual area of the interface, or the first target control moves When reaching the boundary, stop moving the page container and the first target control.
  • the first target control includes a horizontal scroll bar and/or a vertical scroll bar; the horizontal scroll bar is used to control the page container to move in the horizontal direction of the visual area of the interface; The vertical scroll bar is used to control the page container to move in the vertical direction of the visible area of the interface.
  • the processor further implements the following steps when executing the computer program: in the horizontal direction, if the target element exceeds the visible area of the interface, move the page container horizontally, and move the page container horizontally. Horizontal control; in the vertical direction, if the target element exceeds the visible area of the interface, move the page container vertically and move the vertical control vertically.
  • the processor further implements the following steps when executing the computer program: determining the area where the target element is located as the element hot zone; acquiring that the element hot zone and the visible area of the interface are in the horizontal direction /Distance in the vertical direction; horizontally/vertically move the page container; the displacement of the page container by the horizontal/vertical movement corresponds to the distance.
  • the visible area of the interface, the page container, and the element hot area are all rectangular.
  • the processor further implements the following steps when executing the computer program: judging whether the horizontal movement condition/vertical movement condition is satisfied according to the relative position of the element hot zone and the visible area of the interface; The horizontal movement condition moves the page container horizontally; if the vertical movement condition is satisfied, the page container moves vertically.
  • the horizontal movement condition is that in the horizontal direction, the left or right side of the element hot zone exceeds the visible area of the interface;
  • the vertical movement condition is that In the vertical direction, the upper side or the lower side of the element hot zone exceeds the visible area of the interface.
  • the processor further implements the following steps when executing the computer program: after the first target control moves to the boundary, if the target element still exceeds the visible area of the interface, obtain the page container Lower container; judge whether the lower container is the bottom canvas; if not, move the lower container in a direction such that the target element approaches the center of the visible area of the interface; during the movement of the lower container, The relative position of the page container and the lower container remains unchanged.
  • the processor further implements the following steps when executing the computer program: during the movement of the lower container, a second target control is moved; the second target control is a control for controlling the movement of the lower container.
  • the processor further implements the following steps when executing the computer program: when the target element is completely displayed in the visual area of the interface, or when the second target control moves to the boundary, stop moving The lower container and the second target control.
  • the processor further implements the following steps when executing the computer program: after the target element is completely displayed in the visual area of the interface, acquiring the bottommost page container in the interface as the bottom container; Determine the interface hot zone; the interface hot zone is the smallest outer rectangular area that contains the bottom container and all the elements that have been added to the bottom container; if the interface hot zone exceeds the visible area of the interface, move The moving direction of the bottom container is such that the interface hot zone approaches the center of the visual area of the interface.
  • the processor executes the computer program, the following steps are further implemented: in the visible area of the interface, the hot area of the interface is displayed in a centered manner.
  • the element operation instruction in the page container includes at least one of an operation instruction to add an element to the page container and an operation to edit an existing element in the page container.
  • the processor further implements the following steps when executing the computer program: making the display color of the page container different from the display color of the visual area of the interface.
  • the target element includes at least one of cursor, text, table, graph, multimedia file, mind map, and upper container.
  • a computer-readable storage medium is provided, and a computer program is stored thereon.
  • the computer program is executed by a processor, the following steps are implemented: the visual area of the interface is displayed; the visual area of the interface includes A page container for accommodating elements, the shape of the page container is fixed; the element operation instruction in the page container is received; the target element is determined in response to the operation instruction; the target element is the element operated by the operation instruction; when When the target element exceeds the visual area of the interface, move the page container in a direction such that the target element approaches the center of the visual area of the interface; during the movement of the page container, The position of the target element in the page container remains unchanged.
  • the visual area of the interface includes a page container for accommodating elements, and the shape of the page container is fixed.
  • the element operation instruction in the page container includes at least one of an operation instruction to add an element to the page container and an operation to edit an existing element in the page container.
  • the display color of the page container is different from the display color of the visual area of the interface.
  • the target element includes at least one of cursor, text, table, graph, multimedia file, mind map, and upper container.
  • Non-volatile memory may include read only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory.
  • Volatile memory may include random access memory (RAM) or external cache memory.
  • RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous chain Channel (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.
  • the "plurality” mentioned herein means two or more.
  • “And/or” describes the association relationship of the associated objects, indicating that there can be three relationships, for example, A and/or B, which can mean: A alone exists, A and B exist at the same time, and B exists alone.
  • the text "/" generally indicates that the associated objects are in an "or” relationship.
  • first ⁇ second mentioned in this article only distinguishes similar objects, and does not represent a specific order for the objects. Understandably, “first ⁇ second” can be interchanged with specific Order or precedence. It should be understood that the objects distinguished by “first ⁇ second” can be interchanged under appropriate circumstances, so that the embodiments described herein can be implemented in an order other than those illustrated or described herein.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)
  • Controls And Circuits For Display Device (AREA)

Abstract

一种界面显示方法、装置、计算机设备和存储介质，应用于终端设备。所述方法包括：显示界面的可视区，所述界面的可视区中包括用于容纳元素的页面容器；接收所述页面容器中的元素操作指令；响应所述操作指令，确定目标元素；当所述目标元素超出所述界面的可视区时，移动所述页面容器，移动方向为使得所述目标元素向所述界面的可视区的中心靠近；在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。该方法解决了编辑页面效率低的问题，并且简化了用户操作。

Description

界面显示方法、装置、计算机设备和存储介质
本申请要求在2019年2月19日提交中国专利局、申请号为201910121000.X的中国专利申请的优先权，以上申请的全部内容通过引用结合在本申请中。
技术领域
本公开涉及图形用户界面技术领域，例如是涉及界面显示方法、界面显示装置、计算机设备和存储介质。
背景技术
常见的用于页面编辑的图形用户界面(也称作“页面编辑界面”)中包括的处于编辑状态的页面，该页面也称作页面容器，用户可以向该页面容器中添加文字、图片、多媒体文件等元素，例如PPT编辑界面；在保存之后，可以将该页面容器以及添加到该页面容器中的全部元素作为一个整体图像进行显示。
在实现本申请的过程中，本申请的发明人发现相关技术中存在如下问题：在页面编辑界面中，用户向页面容器中添加文本等元素或者移动光标元素时，如果添加的元素或者移动后的光标超出界面的可视区，用户将无法看到自己最新添加的元素或者移动后的光标；针对这种情况，目前解决办法是，用户通过操作界面中的滚动条移动页面容器，以将最新添加的元素或者移动后的光标显示到界面的可视区内，然而该方法存在页面容器编辑效率低的问题。
发明内容
基于此，有必要针对上述页面编辑界面存在的问题，提供一种界面显示方法、界面显示装置、计算机设备和存储介质。
一方面，本公开实施例提供一种界面显示方法，包括：
显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定；
接收所述页面容器中的元素操作指令；
响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；
当所述目标元素超出所述界面的可视区时，移动所述页面容器，移动方向为使得所述目标元素向所述界面的可视区的中心靠近；在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。
在一个实施例中，还包括：在所述页面容器移动过程中，移动第一目标控件；所述第一目标控件为用于控制所述页面容器移动的控件。
在一个实施例中，所述移动所述页面容器的步骤之后，还包括：
当所述目标元素完全显示在所述界面的可视区中时，或者所述第一目标控件移动到边界处时，停止移动所述页面容器以及所述第一目标控件。
在一个实施例中，所述第一目标控件包括水平滚动条和/或竖直滚动条；
所述水平滚动条用于控制所述页面容器在所述界面的可视区的水平方向上移动；所述竖直滚动条用于控制所述页面容器在所述界面的可视区的竖直方向上移动。
在一个实施例中，所述移动所述页面容器的步骤，包括：
在所述水平方向上，若所述目标元素超出所述界面的可视区，水平移动所述页面容器，并水平移动所述水平控件；
在所述竖直方向上，若所述目标元素超出所述界面的可视区，竖直移动所述页面容器，并竖直移动所述竖直控件。
在一个实施例中，水平/竖直移动所述页面容器的步骤，包括：
将所述目标元素所在区域，确定为元素热区；获取所述元素热区与所述界面的可视区在所述水平方向/竖直方向上的距离；
水平/竖直移动所述页面容器；所述页面容器被水平/竖直移动的位移与所述距离相应。
在一个实施例中，所述界面的可视区、所述页面容器、所述元素热区均为矩形。
在一个实施例中，还包括：根据所述元素热区与所述界面的可视区的相对位置，判断是否满足水平移动条件/竖直移动条件；若满足所述水平移动条件，水平移动所述页面容器；若满足所述竖直移动条件，竖直移动所述页面容器。
在一个实施例中，所述水平移动条件为，在所述水平方向上，所述元素热区的左侧或者右侧超出所述界面的可视区；所述竖直移动条件为，在所述竖直方向上，所述元素热区的上侧或者下侧超出所述界面的可视区。
在一个实施例中，还包括：在所述第一目标控件移动到边界之后，若所述目标元素仍然超出所述界面的可视区，获取所述页面容器的下层容器；
判断所述下层容器是否为底层画布；
若否，移动所述下层容器，移动方向为使得所述目标元素向所述界面的可视区中心靠近；所述下层容器移动过程中，所述页面容器与所述下层容器的相对位置保持不变。
在一个实施例中，还包括：在所述下层容器移动过程中，移动第二目标控件；所述第二目标控件为用于控制所述下层容器移动的控件。
在一个实施例中，还包括：当所述目标元素完全显示在所述界面的可视区中时，或者所述第二目标控件移动到边界处时，停止移动所述下层容器以及所述第二目标控件。
在一个实施例中，还包括：当所述目标元素完全显示在所述界面的可视区中之后，获取所述界面中最底层的页面容器，作为底层容器；
确定界面热区；所述界面热区为包含所述底层容器以及已添加到所述底层容器中的全部元素的最小外包矩形区域；
若所述界面热区超出所述界面的可视区，移动所述底层容器，移动方向为使得所述界面热区向着所述界面的可视区的中心靠近的方向。
在一个实施例中，在移动所述底层容器之后，还包括：在所述界面的可视区中，将所述界面热区以居中方式显示。
在一个实施例中，所述页面容器中的元素操作指令包括：向所述页面容器中新增元素的操作指令、编辑所述页面容器中已有元素的操作中的至少一种。
在一个实施例中，所述页面容器的显示颜色不同于所述界面的可视区的显示颜色。
在一个实施例中，所述目标元素包括：光标、文本、表格、图形、多媒体文件、思维导图、上层容器中的至少一种。
另一方面，本公开实施例提供一种界面显示装置，包括：
显示模块，用于显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定；
指令接收模块，用于接收元素操作指令；
元素确定模块，用于响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；
容器移动模块，用于当所述目标元素超出所述界面的可视区时，移动页面容器，使得所述目标元素向所述界面的可视区中心靠近；所述页面容器为所述目标元素所在的页面容器，在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。
在一个实施例中，还包括：控件移动模块，用于在所述页面容器移动过程中，移动第一目标控件；所述第一目标控件为用于控制所述页面容器移动的控件。
在一个实施例中，还包括：移动控制模块，用于当所述目标元素完全显示在所述界面的可视区中时，或者所述第一目标控件移动到边界处时，停止移动所述页面容器。
在一个实施例中，还包括：
下层容器获取模块，用于在所述第一目标控件移动到边界之后，若所述目标元素仍然超出所述界面的可视区，获取所述页面容器的下层容器；
下层容器判断模块，用于判断所述下层容器是否为底层画布；
下层容器移动模块，用于若否，移动所述下层容器，移动方向为使得所述目标元素向所述界面的可视区中心靠近；所述下层容器移动过程中，所述页面容器与所述下层容器的相对位置保持不变。
再一方面，本公开实施例提供一种计算机设备，包括显示器、存储器和处理器，其中，所述显示器用于显示页面编辑界面；所述存储器存储有计算机程序；所述处理器执行所述程序时实现上述任一实施例的界面显示方法的步骤。
再一方面，本公开实施例提供一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现如上述界面显示方法。
上述技术方案中的一个技术方案具有如下优点或有益效果：用户在编辑页面容器时，操作页面容器中的元素，如果被操作的元素区域超出界面的可视区，可自动移动元素所在的页面容器，通过自动移动页面容器，将用户当前操作的元素移动到界面的可视区中显示，无需用户操作滚动条，有利于提高页面容器编辑效率。
附图说明
图1A为一个实施例中页面编辑界面的示意图；
图1B为另一个实施例中页面编辑界面的示意图；
图1C为另一个实施例中页面编辑界面的示意图；
图1D为在页面容器中添加古诗词学科工具并保存后的显示效果示意图；
图1E为图1A的页面编辑界面中页面容器保存后的显示效果示意图；
图2为一实施例的界面显示方法的示意性流程图；
图3A为一个实施例中页面编辑界面对页面容器文本操作之前的示意图；
图3B为对图3A中的页面容器文本操作之后的示意图；
图3C为对图3B中界面移动页面容器之后的示意图；
图4A为一个实施例中页面编辑界面对页面容器图形操作之前的示意图；
图4B为对图4A中的页面容器图形操作之后的示意图；
图4C为对图4B中界面移动页面容器之后的示意图；
图5A为一个实施例中页面编辑界面对页面容器窗口操作之前的示意图；
图5B为对图5A中的页面容器窗口操作之后的示意图；
图5C为对图5B中界面移动页面容器之后的示意图；
图6A为一个实施例中元素热区相对于可视区在X方向的位置示意图；
图6B为另一个实施例中元素热区相对于可视区在X方向的位置示意图；
图6C为另一个实施例中元素热区相对于可视区在X方向的位置示意图；
图6D为另一个实施例中元素热区相对于可视区在X方向的位置示意图；
图7A为一个实施例中元素热区相对于可视区在Y方向的位置示意图；
图7B为另一个实施例中元素热区相对于可视区在Y方向的位置示意图；
图7C为另一个实施例中元素热区相对于可视区在Y方向的位置示意图；
图7D为另一个实施例中元素热区相对于可视区在Y方向的位置示意图；
图8A为一个实施例中页面容器中添加有上层容器的示意图；
图8B为图8A中的上层容器被操作之后的示意图；
图8C为图8B中的界面中页面容器移动后的示意图；
图9A为一个实施例中界面热区的示意图；
图9B为图9A中的界面热区移动后的示意图；
图9C为图9B中的界面热区居中显示后的示意图；
图10为一实施例的界面显示装置的示意性结构图；
图11为一个实施例中计算机设备的内部结构图。
具体实施方式
为了使本公开的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本公开进行详细说明。应当理解，此处所描述的实施例仅仅用以解释本公开，并不用于限定本公开。
在本文中提及“实施例”意味着，结合实施例描述的特定特征、结构或特性可以包含在本申请的至少一个实施例中。在说明书中的各个位置出现该短语并不一定均是指相同的实施例，也不是与其它实施例互斥的独立的或备选的实施例。本领域技术人员显式地和隐式地理解的是，本文所描述的实施例可以与其它实施例相结合。
本申请提供的界面显示方法，可以应用于如图1A所示的页面编辑界面100中，界面的可视区200如图1A所示，可视区200中显示有处于编辑状态的页面容器300；页面容器300的形状固定，例如页面容器300可以为一个矩形；此外，页面容器300相对于可视区200可移动，例如图1B所示，页面容器300可以相对于可视区200向左移动；或者，如图1C所示，页面容器300可以相对于可视区200向上移动。
在实施例中，参考图1A所示，页面编辑界面100中还包括可选元素的类型201，可选元素的类型201可以包括文本、形状、多媒体、表格、思维导图以及其他工具。其中，其他工具可以根据具体应用场景设定。
用户选中任意一个类型的可选元素之后，便可以在页面容器300中添加相应类型的元素，例如，用户选中文本类型的可选元素，然后可以在页面容器300中添加文本；用户选中多媒体类型的可选元素，然后基于弹出的文件选择窗口选择添加多媒体文件，由此可以在页面容器300中添加多媒体文件；用户选中其他工具，然后基于弹出的学科工具选项，可以选择需要添加的学科工具，例如用户选择添加古诗词，可以在页面容器300中添加一个上层容器(即古诗词)，在该上层容器中，用户可以输入古诗词内容。在页面容器300编辑完成之后，古诗词容器内的内容显示，与页面容器300中的其他元素的显示相互独立，例如图1D所示。
需要说明的是，参见图1A所示，在页面编辑界面100中，添加到页面容器300中的元素，既包括显示在页面容器300的有效区的元素301，还包括显示在页面容器300的有效区之外的元素302，还包括部分显示在页面容器300的有效区内、部分显示在页面容器300的有效区之外的元素303；对计算机而言，元素301、元素302、元素303均为已经添加到页面容器300的元素。在保存页面容器300之后，页面容器300的显示效果如图1E所示，其中，在页面容器300的有效区内的元素部分将和页面容器有效区域一同显示出来，而在页面容器300的有效区内之外的元素部分无法显示出来。
本公开实施例中，在处于编辑状态的页面容器300中，用户操作的元素包括但不限于光标、文本、表格、图形、多媒体文件、思维导图、上层容器。其中，文本既可以是文字，还可以是符号；图形既可以是流程图、几何图形，又可以是普通的图片。
在一实施方式中，在页面编辑界面100中，还包括新建页面容器(即图1A中的“新建页面”)和“开始播放”等控件；当用户点击“新建页面”的控件时，可以在界面的可视区200中显示一个空白的页面容器；当用户点击“开始播放”的控件时，自动保存当前编辑的页面容器300，并将页面容器300及元素作为一个整体显示出来。
在一个实施例中，基于上述的页面编辑界面，如图2所示，提供了一种界面显示方法，包括以下步骤：
S100，显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定。
其中，界面的可视区、页面容器可参见上述实施例所述。
S110，接收页面容器中的元素操作指令。
本公开实施例中，页面容器中的元素操作指令，可以是向所述页面容器中添加元素的操作指令，也可以是编辑所述页面容器中已有元素的操作指令。其中，向页面容器中添加元素的操作指令，可以是向页面容器中输入文本、键入光标、插入图形、插入多媒体文件、添加表格、添加上层容器等操作指令。其中，编辑页面容器中已有元素的操作指令，可以是对已经添加到页面容器中的文本、光标、表格、图形、多媒体文件、上层容器进行编辑的操作指令，例如：对已经添加到页面容器中的文本的格式进行调整的操作指令，对已经添加到页面容器中的思维导图进行展开显示的操作指令，或者对已经添加到页面容器中的上层容器进行位置移动的操作指令。
S120，响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素。
本公开实施例中，目标元素指的是被所述操作指令操作之后的元素，例如：当用户对页面容器中的文本的格式进行调整时，对应的目标元素则为调整后的文本；当用户对页面容器中的思维导图进行展开操作时，对应的目标元素则为展开后的思维导图；当用户对页面容器 中的古诗词窗口进行移动时，对应的目标元素则为移动后的古诗词窗口。
其中，目标元素可以包括光标、文本、表格、图形、多媒体文件、思维导图、上层容器中的至少一种。
S130，当所述目标元素超出所述界面的可视区时，移动所述页面容器(即用于容纳所述目标元素的页面容器)，移动方向为所述目标元素向所述界面的可视区的中心靠近的方向；所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。
在本公开实施例中，当所述目标元素超出所述界面的可视区时，自动移动目标元素所在的页面容器，其情形例如：当用户在页面容器300中对文本“目标元素123123看不见”的格式进行调整时，调整前的界面显示如图3A所示；调整之后的界面显示如图3B所示，可见“目标元素123123看不见”超出了界面的可视区200；此时向左移动页面容器300，以使“目标元素123123看不见”能够完全显示到界面的可视区200中，效果如图3C所示。
在另一个场景中，当用户页面容器300中的思维导图“中心主题”进行展开操作时，思维导图“中心主题”展开前的界面显示如图4A所示；展开后的思维导图“中心主题”超出界面的可视区200，如图4B所示；此时自动向左移动页面容器300，以使展开后的思维导图“中心主题”能够完全显示在界面的可视区200，移动后的效果如图4C所示。
在另一个场景中，当用户对页面容器300中的上层容器400进行放大操作时，放大前的界面显示如图5A所示；放大后的上层容器401超出界面的可视区200，如图5B所示；此时自动向上移动页面容器300，以使放大后的上层容器400能够完全显示到界面的可视区200，移动后的效果如图5C所示。
传统的页面编辑界面中，用户进行输出或者移动光标的时候，如果界面的可视区没有显示出光标、用户最新输入的内容，用户除非自己移动滚动条，否则用户无法看到自己输入的光标或者最新输入的内容。通过上述实施例的界面显示方法，在页面编辑界面中，用户进行元素操作时，如果被操作的元素超出界面的可视区，可自动移动相应的页面容器，通过移动页面容器，将被操作的元素移动到界面的可视区中，无需用户操作滚动条，有利于提高页面容器编辑效率。
根据本公开的一个实施例，在移动页面容器的过程中，还同步移动界面中的第一目标控件；第一目标控件是用于控制页面容器移动的控件。在页面编辑界面中，还提供有用于控制所述页面容器移动的控件，例如图1A～1C中的水平滚动条102和竖直滚动条101，在移动页面容器300的过程中，还会同步移动界面中的水平滚动条102和/或竖直滚动条101。传统方式下用户移动水平滚动条102和/或竖直滚动条101，以使页面容器300做相应的移动，本公开实施例中，无需用户操作水平滚动条102和/或竖直滚动条101，便能自动移动页面容器300，并且保证页面容器300的移动与滚动条的移动相适应，例如，当页面容器300向下移动时，竖直滚动条101向上移动；当页面容器300向左移动时，水平滚动条102向右移动。其中，水平滚动条102用于控制页面容器300在所述界面的可视区200的水平方向上移动；竖直滚动条101用于控制页面容器300在所述界面的可视区200的竖直方向上移动。例如上述图3A～3C的场景，用户在元素操作过程中，页面容器300自动移动，同时自适应地移动界面中的水平滚动条102，让用户在可视区200看到完整的元素内容。
在一实施方式中，当目标元素完全显示在界面的可视区200中，或者第一目标控件移动到边界处时，则停止移动目标元素所在的页面容器，以及页面容器对应的第一目标控件。即 是，在页面容器移动过程中，当用户关注的元素已经完全显示到界面的可视区200中时，或者页面容器所对应的滚动条已移动到滚动区的边界处时，则暂停移动页面容器以及相应的滚动条；通过两个停止条件，既能将用户关注的元素完全显示到界面的可视区200，又能防止页面容器过多移动。
根据本公开的一个实施例，移动页面容器的情形包括：在界面的水平方向上移动页面容器，在界面的竖直方向上移动页面容器，或者在界面的水平方向以及竖直方向上均移动页面容器三种情形。具体为：在界面的水平方向上，若目标元素的对应区域有超出界面的可视区200，则水平移动页面容器，并同步水平移动水平控件(例如水平滚动条)；在界面的竖直方向上，若目标元素有超出界面的可视区200，则竖直移动页面容器，并同步竖直移动竖直控件(例如竖直滚动条)；在界面的水平和竖直方向上，若目标元素均有超出界面的可视区200，则既水平移动页面容器，又竖直移动页面容器，并同步移动水平控件/竖直控件。
当既需要水平移动页面容器，又需要竖直移动页面容器的情况下，可根据页面容器水平移动的距离和竖直移动的距离，计算页面容器的整体移动方向和该方向上的整体移动距离，然后移动页面容器，无需分两步移动页面容器，提高页面容器调整的效率。
在一实施方式中，为了方便移动页面容器，将用户当前关注的元素(即目标元素)所在区域定义为元素热区，通过计算元素热区与界面的可视区200在水平方向/竖直方向上的距离，根据该距离水平/竖直移动页面容器。用户当前关注的元素包括用户输入的内容、移动的光标、或者是对一个元素进行变形操作得到的元素。
下面将界面的可视区200、页面容器、元素热区均假设为矩形，对移动页面容器的实现方式进行说明。
根据本公开一个实施例，以界面的可视区200的左上角顶点为原点，建立右手坐标系。基于该坐标系，用户进行元素操作之后，得到元素热区301，元素热区301的情况可能是：元素热区301在X轴方向上未完全显示在界面的可视区200(如图6A～图6C所示)，元素热区301在Y轴方向上未完全显示在界面的可视区200(如图7A～图7C所示)。
当元素热区301在X轴方向上未完全显示在界面的可视区200时，分别计算元素热区301的左右边与界面的可视区200的左右边的距离，距离计算使用元素热区301的左右边所在的横坐标，减去界面的可视区200的左右边的横坐标。例如：如图6A所示，用页面容器300中的元素热区301的左侧边的横坐标，减去界面的可视区200的左侧边的横坐标，得到元素热区301与界面的可视区200的左侧的距离；如图6B所示，用页面容器300中的元素热区301的右侧边的横坐标，减去界面的可视区200的右侧边的横坐标，得到元素热区301与界面的可视区200的右侧的距离。
在一实施方式中，当左侧的距离小于零时，可设置页面容器300在X轴方向向右侧移动的距离等于所述左侧的距离的绝对值；当计算得到的右侧的距离大于零时，设置页面容器300在X轴方向向左移动的距离等于右侧的距离。只有左侧的距离小于零、右侧的距离大于零两个条件中只存在一个条件成立时，才进行页面容器300在X轴方向的移动。
若两个条件都满足的情况，即图6C所示的情况，由于在页面容器300中，元素热区301在X轴方向的宽度大于界面的可视区200在X轴方向的宽度，设置页面容器300在X轴方向的移动距离为0，即无需在X轴方向移动页面容器300。
若两个条件都不满足的情况，即图6D所示的情况，由于在页面容器300中元素热区301 在界面的可视区200内，因此也无需移动页面容器300。
基于上述实施例，若满足水平移动条件，则水平移动目标元素所在的页面容器，即在X轴方向上，若元素热区301的左侧或者右侧超出界面的可视区，则在X轴方向移动目标元素所在的页面容器300。
当在页面容器300中，元素热区301在Y轴方向上未完全显示在界面的可视区时，分别计算元素热区301的上下边与界面的可视区200的上下边的距离，距离计算使用元素热区301的上下边的纵坐标，减去界面的可视区200的上下边的纵坐标，例如：图7A中，用页面容器300中的元素热区301的下侧边的纵坐标，减去界面的可视区200的下侧边的纵坐标，得到元素热区301与界面的可视区200的下侧的距离；图7B中，用元素热区301的上侧边的纵坐标，减去界面的可视区200的上侧边的纵坐标，得到元素热区301与界面的可视区200的上侧的距离。
在一实施方式中，当计算得到的上侧的距离小于零时，可设置页面容器300竖直向下移动的距离等于上侧的距离的绝对值；当计算得到的下侧的距离大于零时，设置页面容器300竖直向上移动的距离等于下侧的距离。只有在上侧的距离小于零、下侧的距离大于零两个条件中只存在一个条件成立时，才进行页面容器300的竖直移动。
若两个条件都满足的情况，即图7C所示的情况，由于元素热区301在Y轴方向的宽度大于界面的可视区200在Y轴方向的宽度，设置页面容器300在Y轴方向的移动距离为0，即无需在Y轴方向移动页面容器300。
若两个条件都不满足的情况，即图7D所示的情况，元素热区301在界面的可视区200内，因此无需移动页面容器300。
上述实施例，若满足竖直移动条件，则竖直移动目标元素所在的页面容器300，即在Y轴方向上，元素热区301的上侧或者下侧超出界面的可视区200，则在Y轴方向移动目标元素所在的页面容器300。
根据本公开一个实施例，当用户操作的元素所在的页面容器并非底层容器时，必要时，还可以对界面中的多个页面容器进行移动。例如，图8A所示，页面编辑界面100的底层画布之上包含多层容器，具体包含被编辑的页面容器300以及添加到页面中的古诗词容器400。页面容器300是古诗词容器400的下层容器，古诗词容器400是页面容器300的上层容器；下层容器对应的目标控件为控件101以及控件102；上层容器对应的目标控件为控件401。若用户操作古诗词容器400中的元素，得到元素热区402，且元素热区402超出界面的可视区200，则首先移动古诗词容器400(在图8A的场景下，移动方向为竖直向上移动)，并同步移动控件401。
当控件401移动到边界时，界面效果如图8B所示。由于此时元素热区402仍然超出界面的可视区200中，则获取古诗词容器400的下层容器，即页面容器300，由于页面容器300并非底层画布，因此可以进一步移动页面容器300，移动方向为使得元素热区402向界面的可视区200中心靠近的方向(在图8B的场景下，移动方向为竖直向上移动)。页面容器300移动过程中，古诗词容器400与页面容器300的相对位置保持不变。在页面容器300移动过程中，还可以同步移动控件101以及控件102。当元素热区402完全显示在界面的可视区200中，或者控件101以及控件102均移动到边界处时，停止移动页面容器300，并停止移动控件101以及控件102；移动后的效果如图8C所示。
通过上述实施例，必要时可以对界面中的多层容器进行联动，进一步保证用户关注的页面元素显示到页面的可视区中。可以理解的是，在多层容器进行联动过程中，上层容器的控件移动到边界时，即触发下层容器移动，对于用户而言，该过程可以时流畅的，没有明显的卡顿；当然，也可以是上层容器的控件移动到边界时，暂停设定时长，再触发下层容器移动，便于用户观察到不同页面容器的移动效果。
根据本公开一实施例中，在元素热区完全显示在界面的可视区200之后，还包括步骤：重新计算一次压缩空间，压缩空间指的是对底层容器与界面的可视区200之间的空白空间进行压缩，让底层容器尽可能在界面的可视区200中显示。例如，在元素热区完全显示在界面的可视区200之后，获取所述界面中最底层的页面容器，作为底层容器，获取已添加到底层容器中的全部元素；确定界面热区，首先确定包含添加到底层容器的所有元素的矩形，得到一个大的矩形，将该大的矩形与底层容器本身对应的矩形叠加，确定一个矩形区域，将其记为界面热区。
在一些场景下，确定界面热区时，可定义矩形用(P1,P2)表示，其中P1＝(x1,y1)、P2＝(x2,y2)分别是一个矩形的两个顶点，同时满足P1.x1<P2.x2∪P1.y1<P2.y2；因为坐标是以界面的可视区200的左上角为原点，界面的可视区的左上角是P1，界面的可视区的右下角是P2，依靠这两个点可以表示一个矩形。
假设已添加到底层容器中的所有元素的矩形的集合为r，通过下面的算法，得到所有元素对应的矩形R0为：
R0＝(P1,P2)＝((x1,y1),(x2,y2))
＝((min(r.P1.x1),min(r.P1.y1)),(max(r.P2.x2),max(r.P2.y2)))
将底层容器对应的矩形R s和所有元素对应的矩形R0合并，可得到界面热区的矩形R为：
R＝((min(R0.x1,R s.x1),min(R0.y1,R s.y1)),
(max(R0.x2,R s.x2),max(R0.y2,R s.y2)))
如图9A所示，界面中的底层容器300的元素热区301完全显示在可视区200中，此时可得到界面热区的矩形，可以看到，界面热区的矩形未完全显示在界面的可视区200中，参照上述对元素热区进行移动的条件判定，可以确定出界面热区的矩形需要水平向右移动，及需要水平向右移动底层容器300。如图9B所示，底层容器300水平向右移动之后，当界面热区已完全显示在界面的可视区200中，则停止移动底层容器300。
上述实施例，通过底层容器300移动，带动底层容器300上的元素的移动，实现界面热区移动的效果。
根据本公开一个实施例，在移动底层容器300之后，还包括：在界面的可视区200中，将界面热区以居中方式显示。即图9B中，界面热区虽然能够完全显示在界面的可视区200，但是没有居中显示，针对该情况，进一步移动底层容器300，直到界面热区在界面的可视区200中居中显示，显示效果如图9C所示。
应该理解的是，对于前述的各方法实施例，虽然流程图中的各个步骤按照箭头的指示依次显示，但是这些步骤并不是必然按照箭头指示的顺序依次执行。除非本文中有明确的说明，这些步骤的执行并没有严格的顺序限制，这些步骤可以以其它的顺序执行。而且，方法实施例的流程图中的至少一部分步骤可以包括多个子步骤或者多个阶段，这些子步骤或者阶段并不必然是在同一时刻执行完成，而是可以在不同的时刻执行，这些子步骤或者阶段的执行顺 序也不必然是依次进行，而是可以与其它步骤或者其它步骤的子步骤或者阶段的至少一部分轮流或者交替地执行。
基于与上述实施例中的界面显示方法相同的思想，本文还提供了界面显示装置的实施例；本公开实施例中，界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定。
在一个实施例中，如图10所示，界面显示装置包括：
显示模块501，用于显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定。
指令接收模块502，用于接收元素操作指令；
元素确定模块503，用于响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；
容器移动模块504，用于当所述目标元素超出所述界面的可视区时，移动页面容器，使得所述目标元素向所述界面的可视区中心靠近；所述页面容器为所述目标元素所在的页面容器，在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。
在一个实施例中，所述界面显示装置还包括：控件移动模块，用于在所述页面容器移动过程中，移动第一目标控件；所述第一目标控件为用于控制所述页面容器移动的控件。
在一个实施例中，所述界面显示装置还包括：移动控制模块，用于当所述目标元素完全显示在所述界面的可视区中时，或者所述第一目标控件移动到边界处时，停止移动所述页面容器以及所述第一目标控件。
在一个实施例中，所述第一目标控件包括水平滚动条和/或竖直滚动条；所述水平滚动条用于控制所述页面容器在所述界面的可视区的水平方向上移动；所述竖直滚动条用于控制所述页面容器在所述界面的可视区的竖直方向上移动。
在一个实施例中，所述容器移动模块504具体包括：
第一移动单元，用于在所述水平方向上，若所述目标元素超出所述界面的可视区，水平移动所述页面容器；
第二移动单元，用于在所述竖直方向上，若所述目标元素超出所述界面的可视区，竖直移动所述页面容器。
在一个实施例中，所述第一移动单元，具体用于将所述目标元素所在区域，确定为元素热区；获取所述元素热区与所述界面的可视区在所述水平方向上的第一距离；水平移动所述页面容器；所述页面容器被水平移动的位移与所述第一距离相应。
在一个实施例中，所述第二移动单元，具体用于将所述目标元素所在区域，确定为元素热区；获取所述元素热区与所述界面的可视区在所述竖直方向上的第二距离；竖直移动所述页面容器；所述页面容器被竖直移动的位移与所述第二距离相应。
在一个实施例中，所述界面的可视区、所述页面容器、所述元素热区均为矩形。
在一个实施例中，所述界面显示装置还包括：移动判断模块，用于根据所述元素热区与所述界面的可视区的相对位置，判断是否满足水平移动条件/竖直移动条件；若满足所述水平移动条件，通知第一移动单元，以水平移动所述页面容器；若满足所述竖直移动条件，通知第二移动单元，以竖直移动所述页面容器。
在一个实施例中，所述水平移动条件为，在所述水平方向上，所述元素热区的左侧或者右侧超出所述界面的可视区；所述竖直移动条件为，在所述竖直方向上，所述元素热区的上 侧或者下侧超出所述界面的可视区。
在一个实施例中，所述界面显示装置还包括：
下层容器获取模块，用于在所述第一目标控件移动到边界之后，若所述目标元素仍然超出所述界面的可视区，获取所述页面容器的下层容器；
下层容器判断模块，用于判断所述下层容器是否为底层画布；
下层容器移动模块，用于若否，移动所述下层容器，移动方向为使得所述目标元素向所述界面的可视区中心靠近；所述下层容器移动过程中，所述页面容器与所述下层容器的相对位置保持不变。
关于智能终端跟踪拍摄的装置的限定可以参见上文中对于智能终端跟踪拍摄的方法的限定，在此不再赘述。上述智能终端跟踪拍摄的装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。
此外，上述示例的智能终端跟踪拍摄的装置的实施方式中，各程序模块的逻辑划分仅是举例说明，实际应用中可以根据需要，例如出于相应硬件的配置要求或者软件的实现的便利考虑，将上述功能分配由不同的程序模块完成，即将所述智能终端跟踪拍摄的装置的内部结构划分成不同的程序模块，以完成以上描述的全部或者部分功能。
在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图11所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的网络接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现一种智能终端跟踪拍摄的方法。该计算机设备的显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。
本领域技术人员可以理解，图11中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。
在一个实施例中，提供了一种计算机设备，包括显示器、存储器和处理器，显示器用于显示页面编辑编辑；所述存储器中存储有计算机程序，该处理器执行计算机程序时实现以下步骤：控制显示器显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定；接收所述页面容器中的元素操作指令；响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；当所述目标元素超出所述界面的可视区时，移动所述页面容器，移动方向为使得所述目标元素向所述界面的可视区的中心靠近；在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：在所述页面容器移动过程中，移动第一目标控件；所述第一目标控件为用于控制所述页面容器移动的控件。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：移动所述页面容器之后， 当所述目标元素完全显示在所述界面的可视区中时，或者所述第一目标控件移动到边界处时，停止移动所述页面容器以及所述第一目标控件。
在一个实施例中，所述第一目标控件包括水平滚动条和/或竖直滚动条；所述水平滚动条用于控制所述页面容器在所述界面的可视区的水平方向上移动；所述竖直滚动条用于控制所述页面容器在所述界面的可视区的竖直方向上移动。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：在所述水平方向上，若所述目标元素超出所述界面的可视区，水平移动所述页面容器，并水平移动所述水平控件；在所述竖直方向上，若所述目标元素超出所述界面的可视区，竖直移动所述页面容器，并竖直移动所述竖直控件。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：将所述目标元素所在区域，确定为元素热区；获取所述元素热区与所述界面的可视区在所述水平方向/竖直方向上的距离；水平/竖直移动所述页面容器；所述页面容器被水平/竖直移动的位移与所述距离相应。
在一个实施例中，所述界面的可视区、所述页面容器、所述元素热区均为矩形。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：根据所述元素热区与所述界面的可视区的相对位置，判断是否满足水平移动条件/竖直移动条件；若满足所述水平移动条件，水平移动所述页面容器；若满足所述竖直移动条件，竖直移动所述页面容器。
在一个实施例中，所述水平移动条件为，在所述水平方向上，所述元素热区的左侧或者右侧超出所述界面的可视区；所述竖直移动条件为，在所述竖直方向上，所述元素热区的上侧或者下侧超出所述界面的可视区。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：在所述第一目标控件移动到边界之后，若所述目标元素仍然超出所述界面的可视区，获取所述页面容器的下层容器；判断所述下层容器是否为底层画布；若否，移动所述下层容器，移动方向为使得所述目标元素向所述界面的可视区中心靠近；所述下层容器移动过程中，所述页面容器与所述下层容器的相对位置保持不变。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：在所述下层容器移动过程中，移动第二目标控件；所述第二目标控件为用于控制所述下层容器移动的控件。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：当所述目标元素完全显示在所述界面的可视区中时，或者所述第二目标控件移动到边界处时，停止移动所述下层容器以及所述第二目标控件。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：当所述目标元素完全显示在所述界面的可视区中之后，获取所述界面中最底层的页面容器，作为底层容器；确定界面热区；所述界面热区为包含所述底层容器以及已添加到所述底层容器中的全部元素的最小外包矩形区域；若所述界面热区超出所述界面的可视区，移动所述底层容器，移动方向为使得所述界面热区向着所述界面的可视区的中心靠近的方向。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：在所述界面的可视区中，将所述界面热区以居中方式显示。
在一个实施例中，所述页面容器中的元素操作指令包括：向所述页面容器中新增元素的操作指令、编辑所述页面容器中已有元素的操作中的至少一种。
在一个实施例中，处理器执行计算机程序时还实现以下步骤：使得所述页面容器的显示 颜色不同于所述界面的可视区的显示颜色。
在一个实施例中，所述目标元素包括：光标、文本、表格、图形、多媒体文件、思维导图、上层容器中的至少一种。
在一个实施例中，提供了一种计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现以下步骤：显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定；接收页面容器中的元素操作指令；响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；当所述目标元素超出所述界面的可视区时，移动所述页面容器，移动方向为使得所述目标元素向所述界面的可视区的中心靠近；在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。其中，所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定。
在一个实施例中，计算机程序被处理器执行时还实现以下上述界面显示方法的其他实施例中的相关步骤。
在一个实施例中，所述页面容器中的元素操作指令包括：向所述页面容器中新增元素的操作指令、编辑所述页面容器中已有元素的操作中的至少一种。
在一个实施例中，计算机程序被处理器执行时还能实现，使得所述页面容器的显示颜色不同于所述界面的可视区的显示颜色。
在一个实施例中，所述目标元素包括：光标、文本、表格、图形、多媒体文件、思维导图、上层容器中的至少一种。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于一非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。
以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其它实施例的相关描述。
本文实施例的术语“包括”和“具有”以及它们任何变形，意图在于覆盖不排他的包含。例如包含了一系列步骤或(模块)单元的过程、方法、系统、产品或设备没有限定于已列出的步骤或单元，而是还可以包括没有列出的步骤或单元，或还可以包括对于这些过程、方法、产品或设备固有的其它步骤或单元。
在本文中提及的“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表 示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。文本“/”一般表示前后关联对象是一种“或”的关系。
在本文中提及的“第一\第二”仅仅是是区别类似的对象，不代表针对对象的特定排序，可以理解地，“第一\第二”在允许的情况下可以互换特定的顺序或先后次序。应该理解“第一\第二”区分的对象在适当情况下可以互换，以使这里描述的实施例能够以除了在这里图示或描述的那些以外的顺序实施。
以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (23)

  1. 一种界面显示方法，包括：
    显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定；
    接收所述页面容器中的元素操作指令；
    响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；
    当所述目标元素超出所述界面的可视区时，移动所述页面容器，移动方向为使得所述目标元素向所述界面的可视区的中心靠近；在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。
  2. 根据权利要求1所述的方法，还包括：
    在所述页面容器移动过程中，移动第一目标控件；
    所述第一目标控件为用于控制所述页面容器移动的控件。
  3. 根据权利要求2所述的方法，所述移动所述页面容器的步骤之后，还包括：
    当所述目标元素完全显示在所述界面的可视区中时，或者所述第一目标控件移动到边界处时，停止移动所述页面容器。
  4. 根据权利要求2所述的方法，其中，所述第一目标控件包括水平滚动条和/或竖直滚动条；
    所述水平滚动条用于控制所述页面容器在所述界面的可视区的水平方向上移动；
    所述竖直滚动条用于控制所述页面容器在所述界面的可视区的竖直方向上移动。
  5. 根据权利要求4所述的方法，其中，所述移动所述页面容器的步骤，包括：
    在所述水平方向上，若所述目标元素超出所述界面的可视区，水平移动所述页面容器，并水平移动所述水平控件；
    在所述竖直方向上，若所述目标元素超出所述界面的可视区，竖直移动所述页面容器，并竖直移动所述竖直控件。
  6. 根据权利要求5所述的方法，其中，所述水平/竖直移动所述页面容器的步骤，包括：
    将所述目标元素所在区域，确定为元素热区；
    获取所述元素热区与所述界面的可视区在所述水平方向/竖直方向上的距离；
    水平/竖直移动所述页面容器；所述页面容器被水平/竖直移动的位移与所述距离相应。
  7. 根据权利要求6所述的方法，其中，所述界面的可视区、所述页面容器、所述元素热区均为矩形。
  8. 根据权利要求7所述的方法，还包括：
    根据所述元素热区的矩形与所述界面的可视区的矩形相对位置，判断是否满足水平移动条件/竖直移动条件；
    若满足所述水平移动条件，水平移动所述页面容器；
    若满足所述竖直移动条件，竖直移动所述页面容器。
  9. 根据权利要求8所述的方法，其中，
    所述水平移动条件为，在所述水平方向上，所述元素热区的左侧或者右侧超出所述界面的可视区；
    所述竖直移动条件为，在所述竖直方向上，所述元素热区的上侧或者下侧超出所述界面 的可视区。
  10. 根据权利要求3所述的方法，还包括：
    在所述第一目标控件移动到边界之后，若所述目标元素仍超出所述界面的可视区，获取所述页面容器的下层容器；
    判断所述下层容器是否为底层画布；
    若否，移动所述下层容器，移动方向为使得所述目标元素向所述界面的可视区中心靠近；所述下层容器移动过程中，所述页面容器与所述下层容器的相对位置保持不变。
  11. 根据权利要求10所述的方法，还包括：
    在所述下层容器移动过程中，移动第二目标控件；
    所述第二目标控件为用于控制所述下层容器移动的控件。
  12. 根据权利要求11所述的方法，还包括：
    当所述目标元素完全显示在所述界面的可视区中时，或者所述第二目标控件移动到边界处时，停止移动所述下层容器。
  13. 根据权利要求1至12任一所述的方法，还包括：
    当所述目标元素完全显示在所述界面的可视区中之后，获取所述界面中最底层的页面容器，作为底层容器；
    确定界面热区；所述界面热区为包含所述底层容器以及已添加到所述底层容器中的全部元素的最小外包矩形区域；
    若所述界面热区超出所述界面的可视区，移动所述底层容器，移动方向为使得所述界面热区向着所述界面的可视区的中心靠近的方向。
  14. 根据权利要求13所述的方法，所述移动所述底层容器的步骤之后，还包括：
    在所述界面的可视区中，将所述界面热区以居中方式显示。
  15. 根据权利要求1所述的方法，其中，所述页面容器中的元素操作指令包括：
    向所述页面容器中新增元素的操作指令、编辑所述页面容器中已有元素的操作中的至少一种。
  16. 根据权利要求1所述的方法，其中，
    所述页面容器的显示颜色不同于所述界面的可视区的显示颜色。
  17. 根据权利要求1所述的方法，其中，所述目标元素包括：光标、文本、表格、图形、多媒体文件、思维导图、上层容器中的至少一种。
  18. 一种界面显示装置，包括：
    显示模块，用于显示界面的可视区；所述界面的可视区中包括用于容纳元素的页面容器，所述页面容器的形状固定；
    指令接收模块，用于接收元素操作指令；
    元素确定模块，用于响应所述操作指令，确定目标元素；所述目标元素为被所述操作指令操作的元素；
    容器移动模块，用于当所述目标元素超出所述界面的可视区时，移动页面容器，使得所述目标元素向所述界面的可视区中心靠近；所述页面容器为所述目标元素所在的页面容器，在所述页面容器移动过程中，所述目标元素在所述页面容器中的位置保持不变。
  19. 根据权利要求18所述的装置，还包括：
    控件移动模块，用于在所述页面容器移动过程中，移动第一目标控件；所述第一目标控件为用于控制所述页面容器移动的控件。
  20. 根据权利要求19所述的装置，还包括：
    移动控制模块，用于当所述目标元素完全显示在所述界面的可视区中时，或者所述第一目标控件移动到边界处时，停止移动所述页面容器。
  21. 根据权利要求20所述的装置，还包括：
    下层容器获取模块，用于在所述第一目标控件移动到边界之后，若所述目标元素仍然超出所述界面的可视区，获取所述页面容器的下层容器；
    下层容器判断模块，用于判断所述下层容器是否为底层画布；
    下层容器移动模块，用于若否，移动所述下层容器，移动方向为使得所述目标元素向所述界面的可视区中心靠近；所述下层容器移动过程中，所述页面容器与所述下层容器的相对位置保持不变。
  22. 一种计算机设备，包括显示器、存储器和处理器，其中，所述显示器用于显示页面编辑界面；所述存储器存储有计算机程序；所述处理器执行所述程序时实现权利要求1至17任一所述方法的步骤。
  23. 一种计算机可读存储介质，其上存储有计算机程序，其中，该程序被处理器执行时实现权利要求1至17任一所述方法的步骤。
PCT/CN2019/124817 2019-02-19 2019-12-12 界面显示方法、装置、计算机设备和存储介质 WO2020168791A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN201910121000.X 2019-02-19
CN201910121000.XA CN109901902B (zh) 2019-02-19 2019-02-19 界面显示方法、装置、计算机设备和存储介质

Publications (1)

Publication Number Publication Date
WO2020168791A1 true WO2020168791A1 (zh) 2020-08-27

Family

ID=66944920

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2019/124817 WO2020168791A1 (zh) 2019-02-19 2019-12-12 界面显示方法、装置、计算机设备和存储介质

Country Status (2)

Country Link
CN (1) CN109901902B (zh)
WO (1) WO2020168791A1 (zh)

Families Citing this family (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109901902B (zh) * 2019-02-19 2020-09-01 广州视源电子科技股份有限公司 界面显示方法、装置、计算机设备和存储介质
CN110737380B (zh) * 2019-09-05 2021-09-07 广州视源电子科技股份有限公司 思维导图展示方法、装置、存储介质及电子设备
CN112287917A (zh) * 2020-12-30 2021-01-29 卡斯柯信号(北京)有限公司 目标设备的查找方法及装置
CN112379817A (zh) * 2021-01-13 2021-02-19 湖南新云网科技有限公司 图元变换方法、装置、终端设备及计算机可读存储介质
CN113805746B (zh) * 2021-08-12 2022-09-23 荣耀终端有限公司 显示光标的方法和装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103677496A (zh) * 2012-09-07 2014-03-26 腾讯科技（深圳）有限公司 界面控制方法及控制装置
US10019146B2 (en) * 2014-09-04 2018-07-10 Home Box Office, Inc. Snap points including ranges
CN109117051A (zh) * 2018-09-05 2019-01-01 广州视源电子科技股份有限公司 思维导图的展示方法、装置、设备及存储介质
CN109901902A (zh) * 2019-02-19 2019-06-18 广州视源电子科技股份有限公司 界面显示方法、装置、计算机设备和存储介质

Family Cites Families (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US5574836A (en) * 1996-01-22 1996-11-12 Broemmelsiek; Raymond M. Interactive display apparatus and method with viewer position compensation
US8245153B2 (en) * 2008-01-24 2012-08-14 International Business Machines Coporation System and method for displaying gantt charts with other project management tools
CN104050184B (zh) * 2013-03-13 2017-08-22 阿里巴巴集团控股有限公司 显示页面内容的方法及装置
CN103546818B (zh) * 2013-10-31 2017-01-04 乐视致新电子科技（天津）有限公司 智能电视的列表显示界面的焦点控制方法和装置
CN106155454B (zh) * 2015-03-30 2020-06-16 阿里巴巴集团控股有限公司 一种界面显示方法、装置及电子设备
CN105549934A (zh) * 2015-12-16 2016-05-04 广东威创视讯科技股份有限公司 显示界面控制方法和系统
CN106873854B (zh) * 2017-01-20 2019-12-13 北京安云世纪科技有限公司 终端及界面交互控制方法、联系人对象创建方法及装置
CN107608668B (zh) * 2017-09-22 2021-02-05 网易（杭州）网络有限公司 H5页面制作兼容显示的方法、装置、终端设备及存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103677496A (zh) * 2012-09-07 2014-03-26 腾讯科技（深圳）有限公司 界面控制方法及控制装置
US10019146B2 (en) * 2014-09-04 2018-07-10 Home Box Office, Inc. Snap points including ranges
CN109117051A (zh) * 2018-09-05 2019-01-01 广州视源电子科技股份有限公司 思维导图的展示方法、装置、设备及存储介质
CN109901902A (zh) * 2019-02-19 2019-06-18 广州视源电子科技股份有限公司 界面显示方法、装置、计算机设备和存储介质

Also Published As

Publication number Publication date
CN109901902B (zh) 2020-09-01
CN109901902A (zh) 2019-06-18

Similar Documents

Publication Publication Date Title
WO2020168791A1 (zh) 界面显示方法、装置、计算机设备和存储介质
US10782844B2 (en) Smart whiteboard interactions
US9582142B2 (en) System and method for collaborative computing
US20160132223A1 (en) Method and apparatus for dynamically resizing windows
US20160147432A1 (en) Automatically returning to an active window during a meeting
US20110181521A1 (en) Techniques for controlling z-ordering in a user interface
KR101932718B1 (ko) 화면 상의 디스플레이창의 크기를 변경하는 디바이스 및 방법
WO2012154258A1 (en) User-aided image segmentation
US9953447B2 (en) Making a computer display more expressive
US8773468B1 (en) System and method for intuitive manipulation of the layering order of graphics objects
KR20150032066A (ko) 화면 미러링 방법 및 그에 따른 소스 기기
AU2019457052B2 (en) Table processing method and apparatus, and intelligent interactive tablet and storage medium
CN109324722B (zh) 思维导图的节点添加方法、装置、设备及存储介质
US20210090330A1 (en) Virtual exhibition space providing method for efficient data management
US11024257B2 (en) Android platform based display device and image display method thereof
US11039196B2 (en) Method and device for displaying a screen shot
WO2015184736A1 (zh) 一种触屏设备背景图变换的方法及终端
TWI780497B (zh) 顯示系統、顯示方法及顯示器
JP5907196B2 (ja) 画像処理装置、画像処理方法、画像処理システムおよびプログラム
CN114168238A (zh) 通过计算设备实现的方法、系统和计算机可读存储介质
CN105094586A (zh) 一种显示窗口的调节方法及电子设备
TWI267774B (en) Image display system
JP6161290B2 (ja) 表示制御装置、表示制御方法及びそのプログラム
US20220083208A1 (en) Non-proportionally transforming and interacting with objects in a zoomable user interface
CN104731451A (zh) 信息处理方法及电子设备

Legal Events

Date Code Title Description
121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 19916244

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 19916244

Country of ref document: EP

Kind code of ref document: A1

122 Ep: pct application non-entry in european phase

Ref document number: 19916244

Country of ref document: EP

Kind code of ref document: A1

32PN Ep: public notification in the ep bulletin as address of the adressee cannot be established

Free format text: NOTING OF LOSS OF RIGHTS PURSUANT TO RULE 112(1) EPC (EPO FORM 1205 DATED 24/02/2022)

122 Ep: pct application non-entry in european phase

Ref document number: 19916244

Country of ref document: EP

Kind code of ref document: A1