WO2023221041A1 - 操作方法、装置、电子设备和计算机可读存储介质 - Google Patents

操作方法、装置、电子设备和计算机可读存储介质 Download PDF

Info

Publication number
WO2023221041A1
WO2023221041A1 PCT/CN2022/093859 CN2022093859W WO2023221041A1 WO 2023221041 A1 WO2023221041 A1 WO 2023221041A1 CN 2022093859 W CN2022093859 W CN 2022093859W WO 2023221041 A1 WO2023221041 A1 WO 2023221041A1
Authority
WO
WIPO (PCT)
Prior art keywords
display
window
display window
area
sub
Prior art date
Application number
PCT/CN2022/093859
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 京东方科技集团股份有限公司
Priority to CN202280001278.3A priority Critical patent/CN117425875A/zh
Priority to PCT/CN2022/093859 priority patent/WO2023221041A1/zh
Publication of WO2023221041A1 publication Critical patent/WO2023221041A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range

Definitions

  • Embodiments of the present disclosure relate to an operating method, an apparatus, an electronic device, and a computer-readable storage medium.
  • technologies such as smart cities, smart parks, and smart enterprises use new generation information technologies such as the Internet of Things, cloud computing, big data, and spatial information integration to promote cities, parks, or enterprises to enter intelligent service, management, and construction models.
  • technologies such as smart cities, smart parks, and smart enterprises can display data information or image information to users through visual management and control platforms.
  • At least one embodiment of the present disclosure provides an operating method, applied to a display page, the display page includes a display area, the display area includes a plurality of sub-display areas, the display page includes a current display window, the method includes: responding to the The position of the current display window in the display page satisfies a preset condition, and a size adjustment triggering operation performed on the current display window is obtained; in response to the size adjustment triggering operation, the current display window and the multiple The positional relationship of the sub-display areas; according to the positional relationship, determine the window area occupied in the display page after the current display window size is adjusted, and the window area includes at least part of the sub-display areas among the plurality of sub-display areas; and generating a first display window in the window area, and replacing the current display window with the first display window to visually adjust the current display window.
  • the positional relationship includes a sub-display area where at least some of the feature points in the current display window are located. According to the positional relationship, it is determined that the current display window is located in the sub-display area after the size is adjusted.
  • the window area occupied in the display page includes: determining the size of the window area based on the sub-display area where at least part of the feature points in the current display window are located; and determining the size of the window area based on the size of the window area. window area.
  • the current display window is a rectangle, and at least some of the feature points shown are at least some of the vertices of the rectangle.
  • area determining the size of the window area, including: determining the width and height of the window area based on the sub-display area where at least part of the vertices are located, and determining the window area based on the size of the window area, including: The window area is determined according to the width and height of the window area.
  • each of the plurality of sub-display areas is a rectangle
  • determining the width and height of the window area based on at least part of the vertices includes: based on the width of the current display window At least one sub-display area where the two width vertices in the direction are located determines the width of the window area; and based on at least one sub-display area where the two height vertices in the height direction of the current display window are located, the width of the window area is determined. The height of the window area.
  • determining the width of the window area based on the sub-display areas where the two width vertices in the width direction of the current display window are respectively located includes: The maximum distance in the width direction between the edges of at least one sub-display area where the two width vertices in the width direction of the window are located is taken as the width of the window area, based on the two heights in the height direction of the current display window At least one sub-display area where the apex is located determines the height of the window area, including: the maximum edge of the at least one sub-display area where the apex is located in the height direction of the current display window. The distance is taken as the height of the window area.
  • the current display window includes at least one element
  • generating the first display window in the window area includes: obtaining the position of each of the at least one element in the window area. ; And draw the first display window in the window area according to the position of each of the at least one element in the window area.
  • At least one element includes the current window display area
  • the method further includes: obtaining a signal source object bound to the current window display area; and responding to receiving the signal from the current window display area.
  • the image of the signal source object is displayed in the current window display area.
  • the operation method provided by an embodiment of the present disclosure further includes: in response to obtaining a zoom trigger operation for the current display window, and generating a second display window according to the zoom trigger operation to visually adjust the display window.
  • the currently displayed window is zoomed.
  • the currently displayed window includes at least one element, the at least one element includes a title bar and at least one control icon, and the at least one control icon is located in the title bar.
  • generating a second display window according to the zoom trigger operation to visually zoom the current display window including: in response to obtaining the zoom trigger operation for the current display window.
  • the scaling trigger operation of the current display window determines the size of the second display window according to the scaling operation; selects the second display window from the at least one control icon according to the size of the second display window. at least part of the control icons displayed in the window; and generating the second display window according to the size of the second display window and the at least part of the control icons.
  • the operation method provided by an embodiment of the present disclosure further includes: generating a canvas in a page container of the display page; and dividing the canvas to obtain the plurality of sub-display areas.
  • the canvas is used to simulate the display screen of the terminal device, and generating the canvas in the page container of the display page includes: obtaining the size of the display screen; according to the display determine the size of the canvas according to the size of the screen; and generate the canvas in the page container according to the size of the canvas.
  • determining the size of the canvas according to the size of the display screen includes: in response to the width of the display screen being greater than or equal to the height of the display screen, The width of the canvas is equal to the width of the page container; the height of the canvas is determined according to the aspect ratio of the display screen; and in response to the width of the display screen being less than the height of the display screen, the height of the canvas, etc. Based on the height of the page container, the width of the canvas is determined according to the aspect ratio of the display screen.
  • generating a canvas in the page container of the display page further includes: adjusting the position of the canvas so that the center of the canvas is located at the center of the page container.
  • the display screen includes multiple sub-display screens
  • dividing the canvas to obtain the multiple sub-display areas includes: obtaining the arrangement of the multiple sub-display screens. Information; divide the canvas according to the arrangement information of the multiple sub-displays to obtain the multiple sub-display areas, so that the arrangement of the multiple sub-display areas is consistent with the arrangement of the multiple sub-displays match.
  • the operation method provided by an embodiment of the present disclosure further includes: binding a trigger event to the canvas, where the trigger event at least includes the size adjustment trigger operation.
  • the display page includes multiple signal source objects
  • the trigger event further includes: a placement trigger operation for placing a target object selected from the multiple signal source objects.
  • the method further includes: in response to a placement triggering operation on the target object, creating an object display window in the sub-display area corresponding to the placement triggering operation; and binding the object display window to the target object .
  • the triggering event further includes: a drag triggering operation of dragging the display window in the display page
  • the method further includes: in response to obtaining the The drag-and-drop trigger operation of the object display window visually moves the object display window to the target position corresponding to the drag-and-drop trigger operation.
  • the size adjustment trigger operation includes an enlargement trigger operation for enlarging the current display window or a reduction trigger operation for reducing the current display window.
  • At least one embodiment of the present disclosure provides an operating device, which is applied to a display page, the display page includes a display area, the display area includes a plurality of sub-display areas, the display page includes a current display window, and the device includes: triggering an operation acquisition unit configured to acquire a size adjustment triggering operation performed on the current display window in response to the position of the current display window in the display page meeting a preset condition; a position relationship acquisition unit configured to respond to the The size adjustment triggering operation obtains the positional relationship between the current display window and the multiple sub-display areas; the determination unit is configured to determine, based on the positional relationship, the current display window occupies the display page after the size adjustment.
  • a window area including at least part of the sub-display areas among the plurality of sub-display areas; and a generating unit configured to generate a first display window in the window area, and replace the current display window with the first display window, to visually adjust the size of the currently displayed window.
  • At least one embodiment of the present disclosure provides an electronic device, including a processor; a memory including one or more computer program instructions; one or more computer program instructions are stored in the memory and executed by the processor. Instructions for implementing the operating method provided by any embodiment of the present disclosure.
  • At least one embodiment of the present disclosure provides a computer-readable storage medium that non-transitoryly stores computer-readable instructions.
  • the computer-readable instructions are executed by a processor, the operating method provided by any embodiment of the present disclosure can be implemented.
  • Figure 1A shows a flowchart of an operating method provided by at least one embodiment of the present disclosure
  • Figure 1B shows a schematic diagram in which the position of the current display window in the display page meets preset conditions provided by at least one embodiment of the present disclosure
  • Figure 1C shows a flow chart of another operating method provided by at least one embodiment of the present disclosure
  • Figure 1D shows a flow chart of a method for adaptive enlargement of a rectangular window provided by at least one embodiment of the present disclosure
  • Figure 1E shows a schematic diagram of the effect after performing an enlargement triggering operation on the current display window in Figure 1B provided by at least one embodiment of the present disclosure
  • 1F and 1G illustrate a schematic diagram of performing a reduction trigger operation on the current display window provided by at least one embodiment of the present disclosure
  • Figure 2A shows a method flow chart of step S30 in Figure 1A provided by at least one embodiment of the present disclosure
  • Figure 2B shows a schematic diagram of a newly created first display window provided by at least one embodiment of the present disclosure
  • Figure 2C shows a schematic diagram after binding a signal source object to a first display window provided by at least one embodiment of the present disclosure
  • Figure 3 shows a schematic diagram of performing a zoom triggering operation on the current display window provided by at least one embodiment of the present disclosure
  • Figure 4A shows a flowchart of a method for generating a second display window according to a zoom triggering operation provided by at least one embodiment of the present disclosure
  • 4B shows a schematic diagram of four second display windows provided by at least one embodiment of the present disclosure
  • Figure 4C shows a schematic diagram of step S401 in Figure 4A provided by at least one embodiment of the present disclosure
  • Figure 5A shows a flowchart of another operating method provided by at least one embodiment of the present disclosure
  • Figure 5B shows a method flow chart of step S40 in Figure 5A provided by at least one embodiment of the present disclosure
  • Figure 5C shows a schematic diagram of the effect of multiple sub-display areas provided by at least one embodiment of the present disclosure
  • Figure 6 shows a schematic diagram of selecting a signal source object from a signal source list and placing the signal source object in a certain sub-display area provided by at least one embodiment of the present disclosure
  • FIG. 7A to 7D show a schematic diagram of a display page provided by at least one embodiment of the present disclosure
  • Figure 8 shows a schematic block diagram of an operating device provided by at least one embodiment of the present disclosure
  • Figure 9 shows a schematic block diagram of an electronic device provided by at least one embodiment of the present disclosure.
  • Figure 10 shows a schematic block diagram of another electronic device provided by at least one embodiment of the present disclosure.
  • Figure 11 shows a schematic diagram of a computer-readable storage medium provided by at least one embodiment of the present disclosure.
  • the visual management and control platform can include a scene editor, in which users can perform visual operations on various graphics.
  • the user can perform various window operations on the web page provided by the scene editor, such as moving the window, changing the size of the window, etc.; after each window operation is completed, corresponding instructions will be sent to the background server, so that the user can perform various window operations according to the user's operation in the scene.
  • Various window operations are performed in the editor to generate scenes.
  • the scene created by the user in the scene editor can be saved as a thumbnail so that it can be recalled and displayed at any time.
  • At least one embodiment of the present disclosure provides an operating method, an apparatus, an electronic device, and a computer-readable storage medium.
  • the operation method is applied to a display page.
  • the display page includes a display area.
  • the display area includes multiple sub-display areas.
  • the display page includes a current display window.
  • the method includes: in response to the position of the current display window in the display page meeting a preset condition, obtaining A size adjustment triggering operation performed on the current display window; in response to the size adjustment triggering operation, obtaining the positional relationship between the current display window and the multiple sub-display areas; and determining, based on the positional relationship, the size of the current display window in the display page after the size adjustment Occupied window area, the window area includes at least part of the sub-display areas of the plurality of sub-display areas; and generating a first display window in the window area, replacing the current display window with the first display window to visually adjust the current display window size of.
  • This method can accurately control the position of the edge of the first display window after the current display window is resized, and alleviates the technical problem that the edge of the first display window cannot be accurately controlled due to external factors such as limb occlusion.
  • FIG. 1A shows a flowchart of an operating method provided by at least one embodiment of the present disclosure.
  • the method may include steps S10 to S40.
  • This operation method is applied to the display page, which includes a display area, which includes multiple sub-display areas, and the display page includes the current display window.
  • Step S10 In response to the position of the current display window in the display page meeting the preset condition, obtain the size adjustment trigger operation performed on the current display window.
  • Step S20 In response to the size adjustment triggering operation, obtain the positional relationship between the current display window and multiple sub-display areas.
  • Step S30 According to the position relationship, determine the window area occupied by the current display window in the display page after the size adjustment.
  • the window area includes at least part of the sub-display areas among the multiple sub-display areas.
  • Step S40 Generate a first display window in the window area, and replace the current display window with the first display window to visually adjust the size of the current display window.
  • the preset condition is, for example, that the current display window overlaps at least part of at least two of the plurality of sub-display areas.
  • the plurality of sub-display areas include a first sub-display area and a second sub-display area, the first part of the current display window is located in the first sub-display area, and the second part of the current display window is located in the second sub-display area.
  • the preset condition may be that a vertex of the current display window is aligned with a vertex of the page container in the display page, and so on.
  • This disclosure does not limit the preset conditions, and those skilled in the art can set the preset conditions according to actual needs.
  • the operation method provided by the present disclosure will be described by taking the preset condition that the current display window overlaps at least part of at least two sub-display areas among the plurality of sub-display areas as an example.
  • step S10 may be to obtain a size adjustment triggering operation performed on the current display window in response to the current display window respectively overlapping at least a partial area of at least two sub-display areas among the plurality of sub-display areas.
  • FIG. 1B shows a schematic diagram in which the position of the current display window in the display page satisfies the preset condition provided by at least one embodiment of the present disclosure.
  • the preset condition is that the current display window overlaps at least part of at least two of the plurality of sub-display areas.
  • the display page 100 includes a display area 1000 , and the display area 1000 includes the current display window 11 .
  • the display area 1000 includes a plurality of sub-display areas, for example, sub-display area 9, sub-display area 1, sub-display area 2, sub-display area 3, sub-display area 4, sub-display area 5, sub-display area 6, sub-display area 7 and sub-display area 8.
  • the current display window 11 overlaps with at least part of the sub-display area 4 , the sub-display area 5 , the sub-display area 7 and the sub-display area 8 respectively. Therefore, the current display window meets the preset conditions.
  • the size adjustment triggering operation may include an enlargement triggering operation for enlarging the current display window, and the size adjustment triggering operation may include a reduction triggering operation for reducing the current display window.
  • the resizing trigger operation includes a click operation on the currently displayed window.
  • a double-click operation on the current display window is a trigger operation for enlarging the current display window
  • a triple-click operation on the current display window is a trigger operation for shrinking the current display window.
  • the display page is displayed on the touch screen. If the time between two click operations on the current display window is less than a preset time length (for example, 1 s), the operation is a double-click operation. Similarly, for example, if the total duration of three consecutive click operations is less than the preset duration (for example, 2s), the operation is a three-click operation.
  • the size adjustment triggering operation may also be other operations, such as a sliding operation, etc. This disclosure does not limit the size adjustment triggering operation, and those skilled in the art can set the size adjustment triggering operation by themselves.
  • step S20 for example, in response to a double-click operation performed on the current display window, obtain the positional relationship between the current display window and multiple sub-display areas.
  • the positional relationship includes a sub-display area in the current display window where at least some of the feature points are located.
  • the current display window is a rectangle, and at least some of the feature points may be three or four vertices of the rectangle.
  • Step S10 may be to obtain the sub-display area where the three or four vertices of the current display window are located.
  • each sub-display area is traversed to find the three sub-display areas where the three vertices A, B, and C of the upper left corner, upper right corner, and lower left corner of the current display window (rectangle) are located.
  • vertex A in Figure 1B as an example to illustrate the method of determining whether the sub-display area includes the vertex of the current display window.
  • multiple sub-display areas are also rectangles.
  • the coordinates of the upper-left corner vertex of a certain sub-display area are (gridX, gridY), the width is gridW, and the height is gridH.
  • the coordinates of the upper-left corner vertex A of the current display window are (left, top), then If one of the following conditions (1) to (4) is met, it means that vertex A falls within the sub-display area:
  • the vertex coordinates (gridX, gridY), width gridW, and height gridH can be obtained according to the API provided by fabric.js.
  • Fabric.js is an open source canvas-based drawing library. The JSAPI provided simplifies native canvas operations. Canvas is a method provided by HTML5 to draw graphics on web pages using scripts.
  • the size of the window area is determined based on the sub-display area where at least some of the feature points in the current display window are located; and the window area is determined based on the size of the window area.
  • the window area includes at least portions of at least two sub-display areas.
  • the window area includes one or more of at least two sub-display areas.
  • the width and height of the window area are determined according to the sub-display area where at least part of the vertices are located.
  • the width of the window area is determined based on at least one sub-display area where two width vertices in the width direction of the current display window are located; and based on at least one sub-display area where two height vertices in the height direction of the current display window are located. , determine the height of the window area.
  • Duplicate vertices can exist for two width vertices and two height vertices.
  • vertex A in Figure 1B can serve as either one of the width vertices or one of the height vertices.
  • the width of the window area is determined based on the sub-display areas where the two width vertices in the width direction of the current display window are respectively located, including: where the two width vertices in the width direction of the current display window are located.
  • the maximum distance between the edges of at least one sub-display area in the width direction is used as the width of the window area.
  • the height of the window area is determined based on at least one sub-display area where the two height vertices in the height direction of the current display window are located, including: The maximum distance in the height direction between the edges of at least one sub-display area where the two height vertices of the current display window are located is used as the height of the window area.
  • the vertex A in the upper left corner can be The width of the window area is determined based on the sub-display area 4 where the vertex B in the upper-right corner is located and the sub-display area 5 where the vertex B in the upper-right corner is located.
  • Sub-display area 7 determines the height of the window area.
  • the two width vertices in the width direction of the current display window include vertex A at the upper left corner and vertex B at the upper right corner of the current display window 11 .
  • the distance between the upper left corner vertex O of the sub-display area 4 where the upper left corner vertex A is located and the upper right corner vertex P of the sub-display area where the upper right corner vertex B is located is the maximum edge of at least one sub-display area in the width direction.
  • the width of the window area is the distance between vertex O and vertex P.
  • the two height vertices in the height direction of the current display window include vertex A at the upper left corner of the current display window 11 and vertex C at the lower left corner.
  • the distance between the upper left corner vertex O of the sub-display area 4 where the upper left corner vertex A is located and the lower left corner vertex M of the sub-display area where the lower left corner vertex C is located is the maximum edge of at least one sub-display area in the height direction. distance, so the height of the window area is the distance between vertex O and vertex M.
  • the window area is determined based on the width and height of the window area. For example, in the example of Figure 1B, according to the width of the window area being the distance between vertex O and vertex P, and the height of the window area being the distance between vertex O and vertex M, then the window area is vertex O, vertex P, The rectangular area formed by vertex N and vertex M (hereinafter referred to as "window area OPNM").
  • the current display window can also be in other shapes, such as pentagon, hexagon, etc., and the present disclosure does not limit the shapes of the current display window and the sub-display area. Based on the shapes of the current display window and the sub-display area, those skilled in the art can design appropriate methods for determining the size of the window area, which are not listed here.
  • the size adjustment trigger operation in step S20 includes an enlargement trigger operation for enlarging the current display window.
  • Step S30 includes: obtaining each sub-display area where the feature points of the current display window are located; and dividing the maximum area formed by each sub-display area. As the window area occupied in the display page after the current display window size is adjusted.
  • the sub-display areas where the feature points of the current display window are vertex A in the upper left corner, vertex B in the upper right corner, vertex C in the lower left corner, and vertex D in the lower right corner are sub-display area 4, sub-display area 4, and sub-display area 4.
  • the maximum area formed by sub-display area 4, sub-display area 5, sub-display area 7 and sub-display area 8 is OPNM. Therefore, the window area occupied in the display page after the current display window size is adjusted is OPNM.
  • the size adjustment trigger operation in step S20 includes a reduction trigger operation for reducing the current display window.
  • Step S30 includes: in response to the size adjustment trigger operation, obtaining the overlapping areas of the current display window and multiple sub-display areas respectively; and determining the current display window.
  • the window area occupied in the display page after the display window size is adjusted is the sub-display area with the largest overlapping area.
  • a zoom-out trigger operation is illustratively described below in FIGS. 1G and 1F.
  • step S40 for example, the display window is redrawn in the window area OPNM to obtain the first display window, and the original current display window 11 is deleted, and the first display window displays the same content as the current display window 11, so that the first display window 11 displays the same content as the current display window 11.
  • the display window replaces the current display window 11 to visually enlarge the current display window 11 .
  • FIG. 1C shows a flowchart of another operating method provided by at least one embodiment of the present disclosure.
  • the method may include steps S110 to S130.
  • This operation method is applied to the display page, which includes a display area, which includes multiple sub-display areas, and the display page includes the current display window.
  • the operation method shown in Figure 1C is a specific embodiment of the operation method shown in Figure 1A.
  • Step S110 In response to the current display window overlapping with at least part of the at least two sub-display areas of the plurality of sub-display areas, obtain a size adjustment trigger operation performed on the current display window.
  • This step S110 is similar to the step S10 described in FIG. 1A above. Please refer to the above related description.
  • Step S120 In response to the size adjustment triggering operation, determine the window area occupied in the display page after the size of the current display window is adjusted, and the window area at least includes parts of at least two sub-display areas.
  • This step S120 is similar to the steps S20 and S30 described in FIG. 1A above. Please refer to the relevant description above.
  • the size adjustment trigger operation includes an enlargement trigger operation for enlarging the current display window.
  • Step S120 may include: obtaining each sub-display area where the feature points of the current display window are located; and using the maximum area formed by each sub-display area as the current display The window area occupied in the displayed page after the window is resized.
  • the size adjustment trigger operation includes a reduction trigger operation for reducing the current display window.
  • Step S120 includes: responding to the size adjustment trigger operation, obtaining the overlapping areas of the current display window and multiple sub-display areas respectively; and determining the size adjustment of the current display window.
  • the window area occupied later in the display page is the sub-display area with the largest overlapping area.
  • a zoom-out trigger operation is illustratively described below in FIGS. 1G and 1F.
  • Step S130 Generate a first display window in the window area, and replace the current display window with the first display window to visually adjust the size of the current display window.
  • This step S130 is similar to the step S40 described in FIG. 1A above. Please refer to the above related description.
  • FIG. 1D shows a flow chart of a method for adaptive enlargement of a rectangular window provided by at least one embodiment of the present disclosure.
  • the method may include steps S101 to S111.
  • Step S101 Obtain the amplification trigger operation. For example, it may be to obtain the double-click operation on the current rectangular display window in the display page on the touch screen.
  • Step S102 Traverse multiple sub-display areas in the display area.
  • Step S103 Determine whether the sub-display area includes the upper left vertex A of the current display window. For example, whether the vertex A falls within the sub-display area can be determined according to the conditions (1) to (4) described above. If vertex A falls within the sub-display area, step S104 is executed; if vertex A does not fall within the sub-display area, step S105 is executed.
  • Step S104 Record the sub-display area. For example, record the name, position coordinates, contained vertex A and other information of the sub-display area.
  • Step S105 Determine whether the sub-display area includes the upper right vertex B of the current display window. For example, whether vertex B falls within the sub-display area can be determined according to the conditions (1) to (4) described above. If vertex B falls within the sub-display area, step S106 is executed; if vertex B does not fall within the sub-display area, step S107 is executed.
  • Step S106 Record the sub-display area. For example, record the name, position coordinates, contained vertex B and other information of the sub-display area.
  • Step S107 Determine whether the sub-display area includes the lower left vertex C of the current display window. For example, whether the vertex C falls within the sub-display area can be determined according to the conditions (1) to (4) described above. If the vertex C falls within the sub-display area, step S108 is executed; if the vertex C does not fall within the sub-display area, step S109 is executed.
  • Step S108 Record the sub-display area. For example, record the name, position coordinates, contained vertex C and other information of the sub-display area.
  • Step S109 Determine whether the sub-display areas where the three vertices are located are found. If the sub-display area where the three vertices are respectively located is found, step S110 and step S111 are executed; if the sub-display area where the three vertices are respectively located is not found, step S102 is executed to continue traversing the next sub-display area.
  • Step S110 Calculate the size of the window area based on the sub-display areas where the three vertices are respectively located. For example, the size of the calculation window may be determined according to the method described in step S30.
  • Step S111 Draw the first display window and delete the current display window according to the size of the window area.
  • FIG. 1E shows a schematic diagram of the effect after performing an enlargement triggering operation on the current display window in FIG. 1B provided by at least one embodiment of the present disclosure.
  • the display content of the current display window 11 is displayed by the enlarged first display window, and the first display window fills the sub-display area 4, sub-display area 5, sub-display area 7 and sub-display area 8, The effect of visually enlarging the current display window 11 is achieved.
  • the operation method provided by the present disclosure divides the display area into multiple sub-display areas, responds to the size adjustment trigger operation, and adaptively adjusts the size of the current display window according to the sub-display area where the feature point of the current display window is located, which alleviates the problem of using fingers. Adjusting the size of the current display window by dragging the edge of the current display window causes the problem of being unable to accurately control the position of the edge after size adjustment, thereby achieving the technical effect of accurately adjusting the size of the current display window.
  • the currently displayed window includes at least one element.
  • At least one element may include, for example, a display area and/or a title bar for displaying an image, or the like.
  • the current display window may include a current window display area 11-1 for displaying images and a title bar 11-2.
  • the current window display area displays images from the signal source object bound to the current display window.
  • the method may further include obtaining a signal source object bound to the current window display area; and in response to receiving the image from the signal source object, displaying the image in the current window display area.
  • obtaining a signal source object bound to the current window display area is performed; and in response to receiving an image from the signal source object, displaying an image in the current window display area.
  • the title bar is located on one side of the current window display area.
  • the title bar 11 - 2 is located above the current window display area 11 - 1 .
  • image information of an image displayed in the current window display area may be displayed in the title bar.
  • the image information may include, for example, the name of the image, the resolution of the image, and the like.
  • At least one element may further include a control icon located in the title bar.
  • the control icons may include, for example, an unlock icon, a sound control icon, a close icon, and the like. Those skilled in the art can set multiple control icons in the title bar according to actual needs.
  • 1F and 1G illustrate schematic diagrams of performing a reduction triggering operation on the current display window provided by at least one embodiment of the present disclosure.
  • the current display window 301 overlaps with the entire area of the sub-display area 4 (please refer to Figure 1B, the label "4" is covered), overlaps with a part of the sub-display area 5, and overlaps with a part of the sub-display area 7. overlap and overlap with a partial area of the sub-display area 8 .
  • the sub-display area with the largest overlapping area is selected from the sub-display areas that overlap at least part of the current display window 301 as the current display window 301. Reduce the first display window after triggering the operation.
  • the overlapping area of the current display window 301 and the sub-display area 4 is the largest. Therefore, the sub-display area 4 is the area occupied by the first display window 302 after the reduction trigger operation is performed on the current display window 301 .
  • This embodiment adaptively reduces the size of the current display window according to the overlapping area of the current display window and the sub-display area, which alleviates the inability to accurately control the size reduction caused by reducing the size of the current display window by dragging the edge of the current display window with fingers.
  • the issue of where the trailing edge is located achieves the technical effect of accurately reducing the size of the current display window.
  • FIG. 2A shows a method flowchart of step S40 in FIG. 1A provided by at least one embodiment of the present disclosure.
  • step S40 may include step S41 and step S42.
  • Step S41 Obtain the position of each element in the window area at least one element.
  • Step S42 Draw the first display window in the window area according to the position of each element in the window area.
  • step S41 for example, the position of the rectangular element of the first display window in the window area, the position of the title bar in the window area, the position of the control icon in the window area, etc. are obtained.
  • the Group-related API for example, combined graphics
  • the concept of Group is to be able to conveniently operate multiple objects at the same time.
  • the combined graphic may include three graphic elements: the lockImg icon of the unlock button, the soundImg icon of the sound control button, and the closeImg icon of the close button, as well as the rectangular element header of the title bar and the rectangular element Body of the first display window. .
  • first create each independent element and the position (x, y) of each element is the coordinate relative to the upper left corner vertex of the entire window area, that is, the upper left corner vertex of the window area is used as the origin.
  • the width and height of the entire window area are width and height respectively
  • the height of the title bar is headerHeight
  • the coordinates of the unlock button icon lockImg relative to the origin are (iconLeft, iconTop)
  • the width and height of each icon are iconWidth, between the two icons The distance between them is iconLeft, from which the position and size of other elements can be obtained.
  • the position and size of each element are shown in Table 1 below.
  • var winShape new Group([body, header, lockImg, soundImg, closeImg]);
  • FIG. 2B shows a schematic diagram of a newly created first display window provided by at least one embodiment of the present disclosure.
  • the newly created first display window is a blank form.
  • the newly created first display window includes a title bar 201 and a first window display area 202.
  • a signal source needs to be bound to the blank form, and only after the synchronization operation is enabled, the video picture will be played in the first window display area 202 of the first display window.
  • the signal source object may be a video, that is, a multi-frame image, and then the first window display area may display the multi-frame image in sequence.
  • control icons are distributed on the title bar 201, such as an unlock icon 211, a sound control icon 221, a close icon 231, etc.
  • the abscissa of the unlock icon 211 is iconLeft in Table 1
  • the ordinate is iconTop in Table 1
  • the width of the first display window is the width in Table 1
  • the height is height in Table 1.
  • elements can be added to the blank window, which may include, for example, the video image videoImg (graphical element), the title of the first display window (text element) and image information ( text elements) etc.
  • the API provided by fabric.js to add elements to an existing combined shape: group.add(shape).
  • group.add(shape) When dynamically adding elements, the coordinates (x, y) of each element default to the coordinates relative to the center point of the combined graphic. As shown in Figure 2C, the abscissa title(x) and ordinate title(y) of the title title are relative. The coordinates of the center point of the combined figure. Therefore, the title of the first display window and the coordinates of the video screen are as shown in Table 2 below.
  • At least one element further includes a video display window located in the title bar, and the video display window is used to display video from another signal source object bound to the video display window.
  • the current display window 11 is bound to the signal source object 1, and the video (ie, multi-frame images) from the signal source object 1 is displayed in the first display window display area of the first display window, then the The video display window in the title bar can be bound to another signal source object (for example, signal source object 2), so that the video from signal source object 2 is displayed in the video display window.
  • signal source object 2 for example, signal source object 2
  • another signal source object is displayed in the title bar in the form of a thumbnail at the same time as the signal source object bound to the current display window, which facilitates the user to observe the two signal source objects at the same time, thereby facilitating the user to compare the two signal source objects.
  • Signal source object is displayed in the title bar in the form of a thumbnail at the same time as the signal source object bound to the current display window, which facilitates the user to observe the two signal source objects at the same time, thereby facilitating the user to compare the two signal source objects.
  • Signal source object is displayed in the title bar in the form of a thumbnail at the same time as the signal source object bound to the current display window
  • FIG. 2C shows a schematic diagram after binding a signal source object to a first display window provided by at least one embodiment of the present disclosure.
  • the first display window adds a video picture videoImg 203 and a title title 204 of the first display window, and the first window display area 202 displays the video picture videoImg 203.
  • first display window can be created according to the method described in FIGS. 2A to 2C above
  • other display windows for example, the current display window, the second display window, etc.
  • the method described in Figure 2C is created and will not be described again.
  • the operation method may also include, in response to obtaining a zoom trigger operation for the current display window, generating a second display according to the zoom trigger operation. Window to visually zoom the currently displayed window.
  • the zoom triggering operation on the currently displayed window may be performed before step S10, for example.
  • This method allows the user to manually adjust the size of the current display window. For example, use the mouse or finger to press and hold the control point on the edge of the current display window and drag to zoom in or out. When the mouse or finger is lifted, the size needs to be adjusted according to the modified size. The form is redrawn to obtain the second display window.
  • This method improves the flexibility and diversity of controlling the display window. The user can select appropriate operations according to needs, and it is convenient for the user to adjust the current display window that does not meet the preset conditions to a display window that meets the preset conditions, thereby facilitating Perform a size adjustment trigger operation on the display window that meets the preset conditions.
  • the zoom triggering operation includes a pulling operation on a control point of the currently displayed window.
  • generating a second display window to visually zoom the current display window according to the zoom trigger operation including: in response to a pull operation, making the first display window of the current display window The side is moved to the first side position, and the first side position is used as the second side position of the second side corresponding to the first side in the second display window; and the second display window is generated according to the second side position.
  • Figure 3 below provides an exemplary description of this embodiment.
  • the display area is divided into a plurality of sub-display areas by a plurality of grid lines, and the plurality of grid lines include grid lines extending along the first direction and grid lines extending along the second direction.
  • the zoom triggering operation includes a pulling operation on a first side of the currently displayed window, and the first side extends along the first direction.
  • generating a second display window to visually zoom the current display window according to the zoom trigger operation including: moving the first edge to the first edge along the second direction in response to the pull operation Side position: determine the second side position of the second side corresponding to the first side in the second display window based on the first side position.
  • the second side position is the grid extending along the first direction that is closest to the first side position. line; and generating a second display window based on the position of the second side and the sides of the current display window except the first side.
  • FIG. 4C below exemplarily describes moving the first edge in the second direction to the first edge position in response to the pulling operation, and determining the second edge of the second edge in the second display window corresponding to the first edge according to the first edge position.
  • the position of the second side is the closest grid line extending along the first direction to the position of the first side. Please refer to the description of Figure 4C below regarding this embodiment.
  • FIG. 3 shows a schematic diagram of performing a zoom triggering operation on the current display window provided by at least one embodiment of the present disclosure.
  • the current display window 11 is included in this schematic diagram.
  • the current display window 11 overlaps with at least part of the sub-display areas 4 , 5 , 7 and 8 respectively.
  • the finger can press and hold the control point (for example, vertex B) of the edge of the current display window 11 to drag, and the current display window 11 will visually enlarge as the finger drags.
  • the window is redrawn according to the modified size, so that the current display window 11 is visually enlarged into the second display window 12 .
  • the upper side of the current display window 11 is moved to position FQ (ie, the first side position), so the second display window is located at the second side corresponding to the first side.
  • the second side position is position FQ.
  • the other three sides of the current display window 11 move in a similar manner to the upper side, and finally the current display window 11 is visually enlarged into the second display window 12 .
  • the enlarged window area of the current display window 11 is the window area OPNM. If a zoom trigger operation is first performed on the current display window 11, and then the current display window 11 is enlarged into the second display window 12, and then a zoom trigger operation is performed on the second display window 12, then the second display window 12 will be further enlarged.
  • the area is UVNM, for example, so the current display window 11 is eventually enlarged to fill sub-display area 1, sub-display area 2, sub-display area 4, sub-display area 5, sub-display area 7 and sub-display area 8.
  • This method allows the user to first perform a scaling trigger operation on the current display window to a suitable size as needed, and then perform a size adjustment trigger operation on the second display window, so that the size of the current display window is finally adjusted to the size required by the user.
  • the current display window can also be reduced first, and then the enlargement triggering operation can be performed on the reduced window, so that the sub-display area finally filled by the current display window meets the requirements.
  • another display window 13 overlaps with at least part of the sub-display area 9, sub-display area 1, sub-display area 3, sub-display area 4, sub-display area 6 and sub-display area 7 respectively.
  • the user wants the display When the window 13 fills up the sub-display area 3, the sub-display area 4, the sub-display area 6 and the sub-display area 7, you can first perform a zoom trigger operation on the display window 13 to reduce the display window to the same size as the sub-display area 3, sub-display area 7.
  • the second display window 14 overlaps at least part of the area 4, the sub-display area 6 and the sub-display area 7. After that, an enlargement triggering operation is performed on the reduced second display window 14, so that the reduced display window 14 is enlarged to Sub-display area 3, sub-display area 4, sub-display area 6 and sub-display area 7 are filled.
  • This operation method eliminates the need for the user to strictly drag the edge of the current display window to the target position. It only requires the user to scale the current display window to the approximate position of the target position, and then perform a size adjustment trigger operation on the scaled display window. Precisely control the edge of the currently displayed window to the target position.
  • FIG. 4A shows a flowchart of a method for generating a second display window according to a zoom triggering operation provided by at least one embodiment of the present disclosure.
  • the method may include steps S401 to S403. This method is applied, for example, to the situation where the currently displayed window includes at least one element including a title bar and at least one control icon, and the at least one control icon is located in the title bar.
  • Step S401 In response to obtaining a zoom trigger operation for the current display window, determine the size of the second display window according to the zoom operation.
  • Step S402 Select at least part of the control icons displayed in the second display window from at least one control icon according to the size of the second display window.
  • Step S403 Generate a second display window based on the size of the second display window and at least part of the control icons.
  • the size of the second display window may be the height and width of the second display window.
  • step S402 for example, in a situation where the size of the current display window is controlled to be reduced to less than a size threshold in response to a zoom triggering operation, a portion of the control icons displayed in the second display window are selected from at least one control icon. For example, in the case where the size of the current display window is controlled to be greater than or equal to the size threshold in response to the zoom triggering operation, at least one control icon is displayed in the second display window.
  • the title bar of the second display window extends along the width direction, that is, multiple icons are arranged sequentially along the width direction, then at least some elements located in the second display window can be selected from at least one element according to the width of the second display window.
  • the title bar of the second display window extends along the height direction, that is, multiple icons are arranged in sequence along the height direction, then at least some elements located in the second display window can be selected from at least one element according to the height of the second display window. .
  • At least some elements located in the second display window may be selected according to priorities of multiple elements. For example, the close icon has a higher priority than the unlock icon, and the unlock icon has a higher priority than the sound control icon.
  • At least some elements located in the second display window are selected from at least one element to implement adaptive scaling of the window.
  • multiple icons are arranged sequentially along the width direction of the second display window, iconLeft refers to the horizontal distance between the icon and the border of the second display window, and iconWidth refers to the width of the icon).
  • the minimum scalable width is 2 ⁇ iconLeft+iconWidth, that is, the minimum width of the display window is 2 ⁇ iconLeft+iconWidth. If the width of the second display window is greater than or equal to 2 ⁇ iconLeft+iconWidth and less than 3 ⁇ iconLeft+2 ⁇ iconWidth, the second display window only contains one icon, and the icon may be a close icon, for example. If the width of the second display window is greater than or equal to 3 ⁇ iconLeft+2 ⁇ iconWidth and less than 4 ⁇ iconLeft+3 ⁇ iconWidth, the second display window may include two icons, such as an unlock icon and a close icon.
  • the second display window may include three icons, such as an unlock icon, a sound control icon and Close icon. If the width of the second display window is greater than or equal to 6 ⁇ iconLeft+3 ⁇ iconWidth+titleWidth, it may contain at least 4 icons.
  • the window When the window is redrawn after zooming, it needs to be based on the width of the second display window and the above 2 ⁇ iconLeft+iconWidth, 3 ⁇ iconLeft+2 ⁇ iconWidth, 4 ⁇ iconLeft+3 ⁇ iconWidth and 6 ⁇ iconLeft+3 ⁇ iconWidth+titleWidth. Compare to determine which icons to display in the title bar.
  • the size threshold may be, for example, 6 ⁇ iconLeft+3 ⁇ iconWidth+titleWidth.
  • each control icon is displayed in the second display window. Displayed in the window, when the width of the second display window is less than 6 ⁇ iconLeft+3 ⁇ iconWidth+titleWidth, the control icon displayed in the second display window is selected according to the priority described above.
  • the second display window is drawn according to the size of the second display window and the position of at least part of each element. For example, a selected part of the control icons is displayed in the title bar to generate a second display window.
  • FIG. 4B shows a schematic diagram of four types of second display windows provided by at least one embodiment of the present disclosure.
  • the width of the second display window 410 is greater than or equal to 2 ⁇ iconLeft+iconWidth and less than 3 ⁇ iconLeft+2 ⁇ iconWidth.
  • the title bar of the second display window 410 only displays the close icon. .
  • the width of the second display window 420 is greater than or equal to 3 ⁇ iconLeft+2 ⁇ iconWidth and less than 4 ⁇ iconLeft+3 ⁇ iconWidth, and the title bar display in the second display window 420 is turned off. icon and unlock icon.
  • the width of the second display window 430 is greater than or equal to 4 ⁇ iconLeft+3 ⁇ iconWidth, and less than 6 ⁇ iconLeft+3 ⁇ iconWidth+titleWidth.
  • the title bar in the second display window 430 Shows the close icon, unlock icon, and sound control icon.
  • the width of the second display window 440 is greater than or equal to 6 ⁇ iconLeft+3 ⁇ iconWidth+titleWidth, and the title bar of the second display window 440 displays a close icon, an unlock icon, and a sound control icon. , also shows the title camera1.
  • the method of generating the first display window in response to the shrink trigger operation is similar to the method of generating the second display window according to the zoom trigger operation described in FIGS. 4A and 4B.
  • the icon displayed in the first display window may also be selected according to the priority of the icon, which will not be described in detail in this disclosure.
  • the display area is divided into a plurality of sub-display areas by a plurality of grid lines, and the plurality of grid lines include grid lines extending along the first direction and grid lines extending along the second direction.
  • the zoom triggering operation includes a pulling operation on a first side of the currently displayed window, and the first side extends along the first direction.
  • Step S401 includes: moving the first edge along the second direction to the first edge position in response to the pulling operation, and determining the second edge position of the second edge corresponding to the first edge in the second display window based on the first edge position.
  • the position of the two sides is the grid line extending along the first direction that is closest to the position of the first side.
  • a plurality of grid lines divide the display area 1000 into sub-display areas 1 to 9.
  • the plurality of grid lines include grid lines extending along the OP direction and grid lines extending along the MO direction.
  • FIG. 4C shows a schematic diagram of step S401 in FIG. 4A provided by at least one embodiment of the present disclosure.
  • the zoom triggering operation is a pulling operation on the side S above the current display window 11 , and the side S extends along the OP direction.
  • Side S is an example of the first side.
  • the first side S is moved along the second direction (ie, the MO direction) to the first side position.
  • the first side position for example, the S' position
  • the second display window is in the same position as the first side.
  • the corresponding second side ie, the upper side of the second display window
  • the pulling operation on the upper side S of the current display window 11 causes the first side S to move to the S' position, and then the second display window is the area filled with diagonal lines in FIG. 4C.
  • the positions and sizes of other sides in the current display window other than the first side are It remains unchanged in the second display window.
  • the size and position of the other three sides of the current display window 11 in the second display window remain unchanged. That is, compared with the first display window, except for the position of the upper side S' of the second display window and the upper side S of the first display window 11, the other three sides of the second display window are different. The sides are consistent with the other three sides of the first display window 11 .
  • This embodiment achieves precise control of a single edge.
  • the user only needs to pull the single edge that he wants to pull to the approximate position, and this embodiment can adaptively align the single edge with the grid line, thereby achieving precise control. And it makes the user's control over the display window more free and diverse.
  • FIG. 5A shows a flowchart of another operating method provided by at least one embodiment of the present disclosure.
  • the operation method may further include step S50 and step S60 .
  • Step S50 Generate a canvas in the page container for displaying the page.
  • Step S60 Divide the canvas to obtain multiple sub-display areas.
  • canvas technology is used to generate a canvas in the page container of the displayed page, for example.
  • step S60 grid lines are drawn on the canvas to obtain multiple sub-display areas.
  • the canvas is used to simulate a display screen of a terminal device, and the display screen of the terminal device includes multiple sub-display screens, grid lines can be drawn on the canvas according to the arrangement of the multiple sub-display screens to obtain multiple sub-display areas.
  • step S50 may include obtaining arrangement information of multiple sub-displays; dividing the canvas according to the arrangement information of multiple sub-displays to obtain multiple sub-display areas, such that multiple sub-display areas are obtained.
  • the arrangement of the display area matches the arrangement of multiple sub-displays.
  • the arrangement of multiple sub-display areas is the same as the arrangement of multiple sub-displays interacting with the display page.
  • the arrangement information of multiple sub-displays is obtained by communicating with the terminal device, or the input arrangement information is received.
  • the layout information is that 8 screens are arranged in a 4 ⁇ 2 array, so four grid lines are drawn in the canvas, one grid line along the width direction of the canvas, and three grid lines along the height direction of the canvas.
  • the position coordinates (x, y) and width and height (w) of each rectangle on the canvas , h) can be calculated by the following formula.
  • index is the index of each rectangle, counting from 0:
  • FIG. 5B shows a method flowchart of step S50 in FIG. 5A provided by at least one embodiment of the present disclosure.
  • step S50 may include steps S51 to S53.
  • Step S51 Obtain the size of the display screen.
  • Step S52 Determine the size of the canvas according to the size of the display screen.
  • Step S53 Generate a canvas in the page container according to the size of the canvas.
  • the server interface is called to obtain the size of the display screen of the terminal device.
  • the width and height of the display are screenWidth and screenHeight respectively.
  • step S52 for example, in response to the width of the display screen being greater than or equal to the height of the display screen, the width of the canvas is equal to the width of the page container; the height of the canvas is determined according to the aspect ratio of the display screen; and in response to the width of the display screen being smaller than the width of the display screen The height of the canvas is equal to the height of the page container, and the width of the canvas is determined according to the aspect ratio of the display screen.
  • the width of the display screen is the width obtained by the combination of the multiple sub-display screens
  • the height of the display screen is the height obtained by the combination of the multiple sub-display screens.
  • the width and height of the above-mentioned page container can be obtained through the standard API getBoundingClientRect provided by the browser.
  • getBoundingClientRect is an API used to obtain the browser viewport.
  • the page container where the canvas is located is a container
  • the width containerWidth and height containerHeight of the page container container can be obtained as follows.
  • containerWidth container.getBoundingClientRect().width;
  • ContainerHeight container.getBoundingClientRect().height.
  • canvasH that is, the height of the canvas
  • the width of the canvas is equal to the width of the page container (i.e., the browser viewport), and the height of the canvas is determined based on the aspect ratio of the display screen.
  • canvasW (screenWidth ⁇ canvasH)/screenHeight.
  • the height of the canvas is equal to the height of the page container (i.e., the browser viewport), and the width of the canvas is determined based on the aspect ratio of the display screen.
  • canvasW may be larger than the width of the container's visible area, and the zoom ratio needs to be calculated again.
  • the final calculated width and height of the canvas are:
  • the operating method may further include adjusting the position of the canvas so that the center of the canvas is located at the center of the page container.
  • the canvas position calculated according to the above step S52 is located at the upper left corner of the page container, and the canvas needs to be translated horizontally and vertically by a certain distance to place the canvas at the center of the page container.
  • the moving distance in the horizontal and vertical directions can be calculated according to the following formula.
  • moveX containerWidth/2–canvasWidth/2;
  • moveY containerHeight/2–canvasHeight/2.
  • FIG. 5C shows a schematic diagram of the effect of multiple sub-display areas provided by at least one embodiment of the present disclosure.
  • a page container 510 is displayed in the page, and a canvas 521 is drawn on the page container 510 .
  • the size of the canvas 521 can be obtained according to step S52 in FIG. 5B , and the center of the canvas 521 is located at the center of the page container 510 .
  • the canvas 521 is divided into 8 rectangles by grid lines, and rectangular objects are added to each rectangle to obtain 8 sub-display areas.
  • the operation method may further include step S70 .
  • Step S70 Bind a trigger event to the canvas, which at least includes a size adjustment trigger operation.
  • fabric.js provides a rich event system, so you can use fabric.js to bind various events and related event processing function handlers to the canvas or objects on the canvas.
  • the event handler of the press event is canvas.on('mouse:down',handler);
  • the event handler of the double-click event is canvas.on('mouse:dblclick',handler);
  • the event handler of the lift event The processing function handler is canvas.on('mouse:uphandler);
  • the event processing function handler for the placement event of an object in the canvas is canvas.on('drop', handler), etc.
  • the zoom-in trigger operation is a double-click event performed on the canvas.
  • the display page includes multiple signal source objects
  • the triggering event further includes: a placement triggering operation of placing a target object selected from the multiple signal source objects
  • the operation method further includes: responding to Perform a placement trigger operation on placing the target object, create an object display window in a sub-display area corresponding to the placement trigger operation; and bind the object display window to the target object to display an image from the target object in the object display window.
  • the placement triggering operation may be performed before step S10 in FIG. 1A , or may be performed after step S40 .
  • the display page 100 may also include a signal source list 2000 in addition to the display area 1000 formed by the page container.
  • the signal source list 2000 arranges multiple signal source objects in sequence. For example, each source object is a video source.
  • the signal source list 2000 may be located on one side of the display area 1000 , such as the right side.
  • Trigger events also include placement trigger operations that place a target object selected from multiple source objects. For example, select a target object from multiple signal source objects and place the target object at a certain position in the display area.
  • Each object display window includes, for example, a title bar, control icons (including unlock, sound, close), window display area, etc., which can be drawn using the API of combined graphics provided by fabric.js.
  • the object display window is drawn according to the method described in FIG. 2A above. The position parameters of the object display window are determined by the grid where the object is placed when dragged and dropped.
  • the position parameters (x, y, w, h) of the current rectangle can be determined according to the parameters of the placement trigger operation, so that according to the position Parameters draw object window graphics in the subdisplay area.
  • FIG. 6 shows a schematic diagram of selecting a signal source object from a signal source list 2000 and placing the signal source object in a certain sub-display area provided by at least one embodiment of the present disclosure.
  • the user selects signal source object 2 from the signal source list 2000, and moves the signal source object 2 to the position of the sub-display area 9 and releases it, that is, the user triggers the placement of the signal source object 2. operate.
  • Some embodiments of the present disclosure provide an operation method that, in response to the placement triggering operation, adds an object display window 61 in the sub-display area 9 , and displays the picture of the signal source object 2 in the object display window 61 .
  • the triggering event further includes: a drag triggering operation of dragging the display window in the display page.
  • the drag triggering operation includes: while selecting the object display window, dragging the object display window until the object display window is dragged to the target position; and in response to the object display window being dragged to the target position, releasing the object display window. control.
  • the operation method also includes: in response to obtaining a drag trigger operation on the object display window, visually moving the object display window to a target position corresponding to the drag trigger operation.
  • the object display window in response to the object display window satisfying the preset condition at the target position, the object display window may be used as the current display window.
  • the object display window is an example of a display window in the display page.
  • the user can drag and drop any display window in the display page to trigger the operation.
  • the drag triggering operation includes: while selecting the object display window, dragging the object display window until the object display window is dragged to the target position; and in response to the object display window After being dragged to the target position, control of the object display window is released.
  • the user can perform a drag triggering operation on the object display window 61 , for example, drag the object display window 61 to the target position T.
  • the display window is redrawn at the target position T, and the redrawn display window has the same content as the object display window 61 , thereby visually causing the object display window 61 to be dragged to the target position T.
  • the redrawn display window at the target position T covers sub-display area 3, sub-display area 4, sub-display area 6 and sub-display area 7 respectively.
  • the redrawn display window at the target position T satisfies the preset condition (for example, the current display window overlaps with at least part of the at least two sub-display areas among the plurality of sub-display areas), then the re-drawn display window at the target position
  • the display window at the target position T can be used as the current display window, that is, the user can perform the size adjustment triggering operation described above in FIG. 1A on the display window at the target position T.
  • FIGS. 7A to 7D show schematic diagrams of a display page provided by at least one embodiment of the present disclosure. The operation method provided by the present disclosure will be further described below with reference to FIGS. 7A to 7D .
  • this display page is the command center visual control platform.
  • the command center visual control platform is used to monitor and manage smart cities.
  • the display page 700 of the command center visual control platform includes four page areas, namely page areas A1 to A4.
  • page area A1 is a display area, which is divided into 8 sub-display areas (sub-display areas 701-708) to simulate the splicing of 8 display screens (in Figure 7A, thicker lines are used to mark each separate display).
  • Page area A2 is the user selection area. The user can choose to divide the display screen again and divide a single display screen into 1, 4, 9, or 16 sub-display units for display. For example, if the user selects 4, the single display screen is divided into 4 sub-display units again (as shown by the dotted line in Figure 7A).
  • Page area A3 signal source object list, users can see all signal source objects, as well as real-time preview screen.
  • Page area A4 is the scene list saved after the user completes editing of page area A1, and supports one-click retrieval.
  • the arrangement strategy of multiple sub-display areas in the display area can be determined based on the actual arrangement of multiple sub-display screens to simulate a real splicing display screen and adjust the display screen of the splicing screen on the touch screen. Restore on the screen to prevent the image from overflowing the display area.
  • a real splicing display includes 11 sub-displays.
  • the 11 sub-displays include 1 largest sub-display, 8 smallest sub-displays and two medium-sized sub-displays; two medium-sized sub-displays.
  • the sub-displays are arranged up and down in a "day" font, and every four of the eight smallest sub-displays form a "field"-shaped display group, with two sub-display groups arranged up and down; the largest sub-display and The two sub-displays in the group " ⁇ " font are located on both sides of the eight smallest sub-displays. Then the corresponding display areas formed by the sub-display areas 701 to 704 in Figure 7A can be used to create the largest display area.
  • the display window corresponds to the largest sub-display.
  • the sub-display areas 705 and 706 can be divided into 4 sub-display units respectively to correspond to the 8 smallest sub-displays.
  • the sub-display area 707 and the sub-display area 708 can Corresponding to two medium-sized sub-displays respectively.
  • Those skilled in the art can divide the display area according to the arrangement of the real splicing screen, which can avoid the overflow display of the image or the underutilization of the display area due to the small image screen, thereby meeting various display needs of users.
  • the video source 71 in a certain signal source object list in the page area A3 is dragged and placed to the page area A1.
  • the display window 72 for displaying the picture of the video source 71 may be created directly at the position where the video source 71 is released in the page area A1.
  • a display window can be created in a certain sub-display area of the page area A1 according to the release position, so that the dragged signal source can be displayed in the corresponding sub-display area of the large screen.
  • the above-mentioned operation of creating a display window in the page area A1 will be referred to as "window opening" in the following.
  • the display window 72 is enlarged or reduced. If the display window 72 needs to be aligned with the auxiliary lines (ie, the grid lines in the screen), the display window 72 can be dragged to the edge of each auxiliary line, and the display window 72 will automatically absorb the auxiliary lines.
  • this edge adsorption method is inconvenient to operate, especially when operating on a Pad. Due to the obstruction of the touch operation finger and the limitation of operation precision on a small screen, it is often difficult to accurately control the exact position of the edge of the display window. In this way Window opening operation is less accurate.
  • the operation method provided by this disclosure does not require dragging the edge of the display window. Instead, first move the display window to the area you want to fill, press the display window against the auxiliary line, and then double-click the display window to display The window automatically fills the area where the auxiliary line is located.
  • This interactive method is more convenient to operate on the Pad and is less error-prone.
  • the display window 72 shown in FIG. 7B is dragged and triggered to visually move the display window 72 to the area that the display window needs to occupy.
  • the drag triggering operation may be, for example, first clicking the display window 72 and then dragging the display window 72 .
  • the display window 72 is moved to the area 722 by the area 721 (ie, the area formed by the sub-display units S4, S5, S7, and S8). After the display window 72 is moved to the area 722, respectively At least a partial area of each of the sub-display units S1 to S9 is covered. Afterwards, a magnification triggering operation can be performed on the display window located in area 722.
  • the newly obtained first display window fills the sub-display units S1 to S9.
  • fabric.js an open source canvas-based drawing library
  • SVG Scalable Vector Graphics
  • the native canvas also provides various drawing APIs, such as drawing a rectangle, polygon, circle, etc. But it does not support event handling. To implement operations such as changing the position and scaling of a rectangle, and obtaining the size and position after the operation, users need to implement the relevant logic and calculations themselves. In addition, the native canvas does not provide support for graphic combination operations.
  • SVG is a language that uses XML to describe 2D graphics. Its biggest advantage over canvas is that each drawn graphic is regarded as an object, and related event handlers can be added to it; SVG images are enlarged or resized when they are enlarged or resized. There will be no loss in graphics quality. However, if you want to save images on the canvas in .png or .jpg format, it is not as convenient as canvas, and for visual operations such as dragging and panning, you still need to write a lot of implementation logic and calculations, and the overall operation of graphic combination is not as good as fabric. .js is convenient.
  • the operation method is similar to the enlargement trigger operation described above.
  • the current display window covers four sub-display areas among multiple sub-display areas.
  • the shrink trigger operation it is determined that the window area occupied by the current display window in the display page after the size adjustment is three of the four sub-display areas. , thereby generating a first display window in the three sub-display areas, and replacing the current display window with the first display window to visually reduce the size of the current display window.
  • FIG. 8 shows a schematic block diagram of an operating device 800 provided by at least one embodiment of the present disclosure.
  • the operation device 800 includes a trigger operation acquisition unit 810 , an area determination unit 820 and a window generation unit 830 .
  • the trigger operation acquisition unit 810 is configured to acquire a size adjustment trigger operation performed on the current display window in response to the current display window respectively overlapping at least a partial area of at least two of the plurality of sub-display areas.
  • the trigger operation acquisition unit 810 may, for example, perform step S110 described in FIG. 1C.
  • the area determination unit 820 is configured to respond to the size adjustment triggering operation and determine the window area occupied in the display page after the current display window size is adjusted, wherein the window area at least includes the at least two sub-display areas. part.
  • the area determination unit 820 may, for example, perform step S120 described in FIG. 1C.
  • the window generation unit 830 is configured to generate a first display window in the window area, and replace the current display window with the first display window to visually adjust the current display window.
  • the window generation unit 830 may, for example, perform step S130 described in FIG. 1C.
  • the trigger operation acquisition unit 810, the area determination unit 820, and the window generation unit 830 may be hardware, software, firmware, or any feasible combination thereof.
  • the trigger operation acquisition unit 810, the area determination unit 820 and the window generation unit 830 may be dedicated or general-purpose circuits, chips or devices, or may be a combination of a processor and a memory.
  • the embodiments of the present disclosure do not limit this.
  • the device can accurately control the position of the edge of the first display window after the current display window is resized, and alleviates the technical problem that the edge of the first display window cannot be accurately controlled due to external factors such as limb occlusion.
  • each unit of the operating device 800 corresponds to each step of the aforementioned operating method.
  • the relevant description of the operating method which will not be described again here.
  • the components and structures of the operating device 800 shown in FIG. 8 are only exemplary and not restrictive.
  • the operating device 800 may also include other components and structures as needed.
  • At least one embodiment of the present disclosure also provides an electronic device including a processor and a memory including one or more computer program instructions.
  • One or more computer program instructions are stored in the memory and configured to be executed by the processor.
  • the one or more computer program instructions include instructions for implementing the above-described operating methods.
  • the electronic device can accurately control the position of the edge of the first display window after the current display window is resized, thereby alleviating the technical problem that the edge of the first display window cannot be accurately controlled due to external factors such as limb occlusion.
  • Figure 9 is a schematic block diagram of an electronic device provided by some embodiments of the present disclosure.
  • the electronic device 900 includes a processor 910 and a memory 920 .
  • Memory 920 is used to store non-transitory computer-readable instructions (eg, one or more computer program modules).
  • the processor 910 is configured to execute non-transitory computer-readable instructions. When the non-transitory computer-readable instructions are executed by the processor 910, one or more steps in the above-described operating method can be performed.
  • Memory 920 and processor 910 may be interconnected by a bus system and/or other forms of connection mechanisms (not shown).
  • the processor 910 may be a central processing unit (CPU), a graphics processing unit (GPU), or other forms of processing units having data processing capabilities and/or program execution capabilities.
  • the central processing unit (CPU) may be of X86 or ARM architecture.
  • the processor 910 may be a general-purpose processor or a special-purpose processor that may control other components in the electronic device 900 to perform desired functions.
  • memory 920 may include any combination of one or more computer program products, which may include various forms of computer-readable storage media, such as volatile memory and/or non-volatile memory.
  • Volatile memory may include, for example, random access memory (RAM) and/or cache memory (cache), etc.
  • Non-volatile memory may include, for example, read-only memory (ROM), hard disk, erasable programmable read-only memory (EPROM), portable compact disk read-only memory (CD-ROM), USB memory, flash memory, and the like.
  • One or more computer program modules may be stored on the computer-readable storage medium, and the processor 910 may run the one or more computer program modules to implement various functions of the electronic device 900 .
  • Various application programs and various data, as well as various data used and/or generated by the application programs, etc. can also be stored in the computer-readable storage medium.
  • FIG 10 is a schematic block diagram of another electronic device provided by some embodiments of the present disclosure.
  • the electronic device 1000 is, for example, suitable for implementing the operation method provided by the embodiment of the present disclosure.
  • the electronic device 1000 may be a terminal device or the like. It should be noted that the electronic device 1000 shown in Figure 10 is only an example, which does not bring any limitations to the functions and scope of use of the embodiments of the present disclosure.
  • the electronic device 1000 may include a processing device (eg, central processing unit, graphics processor, etc.) 1010 , which may be loaded into a random access device according to a program stored in a read-only memory (ROM) 1020 or from a storage device 1080 .
  • the program in the memory (RAM) 1030 executes various appropriate actions and processes.
  • various programs and data required for the operation of the electronic device 1000 are also stored.
  • the processing device 1010, ROM 1020 and RAM 1030 are connected to each other via a bus 1040.
  • An input/output (I/O) interface 1050 is also connected to bus 1040.
  • the following devices may be connected to the I/O interface 1050: input devices 1060 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; including, for example, a liquid crystal display (LCD), speakers, vibration An output device 1070 such as a computer; a storage device 1080 including a magnetic tape, a hard disk, etc.; and a communication device 1090.
  • the communication device 1090 may allow the electronic device 1000 to communicate wirelessly or wiredly with other electronic devices to exchange data.
  • FIG. 10 illustrates electronic device 1000 having various means, it should be understood that implementation or provision of all illustrated means is not required, and electronic device 1000 may alternatively implement or be provided with more or fewer means.
  • the above operation method may be implemented as a computer software program.
  • embodiments of the present disclosure include a computer program product including a computer program carried on a non-transitory computer-readable medium, the computer program including program code for performing the above-mentioned operating method.
  • the computer program can be downloaded and installed from the network through the communication device 1090, or installed from the storage device 1080, or installed from the ROM 1020.
  • the processing device 1010 When the computer program is executed by the processing device 1010, the functions defined in the operating methods provided by the embodiments of the present disclosure can be implemented.
  • At least one embodiment of the present disclosure also provides a computer-readable storage medium for non-transitory storage of computer-readable instructions, which can implement the above operations when the computer-readable instructions are executed by a computer. method.
  • the computer-readable storage medium can be used to accurately control the position of the edge of the first display window after the current display window is resized, thereby alleviating the technical problem that the edge of the first display window cannot be accurately controlled due to external factors such as limb obstruction. .
  • Figure 11 is a schematic diagram of a storage medium provided by some embodiments of the present disclosure. As shown in FIG. 11, storage medium 1100 is used to store non-transitory computer-readable instructions 1110. For example, the non-transitory computer readable instructions 1110, when executed by a computer, may perform one or more steps in the operating method described above.
  • the storage medium 1100 can be applied to the above-mentioned electronic device 900.
  • the storage medium 1100 may be the memory 920 in the electronic device 900 shown in FIG. 9 .
  • the relevant description of the storage medium 1100 may refer to the corresponding description of the memory 920 in the electronic device 900 shown in FIG. 9 , which will not be described again here.

Landscapes

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

Abstract

一种操作方法、装置、电子设备和计算机可读存储介质。该操作方法应用于显示页面，显示页面包括显示区域，显示区域包括多个子显示区域，显示页面包括当前显示窗口，该方法包括：响应于当前显示窗口在显示页面中的位置满足预设条件，获取对当前显示窗口执行的尺寸调整触发操作(S10)；响应于尺寸调整触发操作，获取当前显示窗口与所述多个子显示区域的位置关系(S20)；根据位置关系，确定当前显示窗口尺寸调整后在显示页面中占据的窗口区域(S30)；以及在窗口区域生成第一显示窗口，由第一显示窗口替代当前显示窗口(S40)。该方法可以缓解由于肢体遮挡等外因导致的第一显示窗口的边缘无法被精确地控制的问题。

Description

操作方法、装置、电子设备和计算机可读存储介质 技术领域
本公开的实施例涉及一种操作方法、装置、电子设备和计算机可读存储介质。
背景技术
随着电子技术和互联网技术的发展，电子设备提供的功能越来越丰富，使得人们的生活越来越智能化。
例如，智慧城市、智慧园区、智慧企业等技术是运用物联网、云计算、大数据、空间信息集成等新一代信息技术，促进城市、园区或者企业等进入智慧化的服务、管理、建设的模式。智慧城市、智慧园区、智慧企业等技术可以通过可视化管控平台向用户展示数据信息或者图像信息。
发明内容
本公开至少一个实施例提供一种操作方法，应用于显示页面，显示页面包括显示区域，所述显示区域包括多个子显示区域，所述显示页面包括当前显示窗口，所述方法包括：响应于所述当前显示窗口在所述显示页面中的位置满足预设条件，获取对所述当前显示窗口执行的尺寸调整触发操作；响应于所述尺寸调整触发操作，获取所述当前显示窗口与所述多个子显示区域的位置关系；根据所述位置关系，确定所述当前显示窗口尺寸调整后在所述显示页面中占据的窗口区域，窗口区域包括所述多个子显示区域中的至少部分子显示区域；以及在所述窗口区域生成第一显示窗口，由第一显示窗口替代当前显示窗口，以在视觉上调整所述当前显示窗口。
例如，在本公开一实施例提供的操作方法中，位置关系包括所述当前显示窗口中至少部分特征点所在的子显示区域，根据所述位置关系，确定所述当前显示窗口尺寸调整后在所述显示页面中占据的所述窗口区域，包括：根据所述当前显示窗口中至少部分特征点所在的子显示区域，确定所述窗口区域的尺寸；以及根据所述窗口区域的尺寸，确定所述窗口区域。
例如，在本公开一实施例提供的操作方法中，当前显示窗口为矩形，所示至少部分特征点为所述矩形的至少部分顶点，根据所述当前显示窗口中至少部分特征点所在的子显示区域，确定所述窗口区域的尺寸，包括：根据所述至少部分顶点所在的子显示区域，确定所述窗口区域的宽和高，根据所述窗口区域的尺寸，确定所述窗口区域，包括：根据所述窗口区域的宽和高，确定所述窗口区域。
例如，在本公开一实施例提供的操作方法中，多个子显示区域每个为矩形，根据所述至少部分顶点，确定所述窗口区域的宽和高，包括：根据所述当前显示窗口的宽度方向上的两个宽度顶点所在的至少一个子显示区域，确定所述窗口区域的宽；以及根据所述当前显示窗口的高度方向上的两个高度顶点所在的至少一个子显示区域，确定所述窗口区域的高。
例如，在本公开一实施例提供的操作方法中，根据所述当前显示窗口的宽度方向上的两个宽度顶点分别所在的子显示区域，确定所述窗口区域的宽，包括：所述当前显示窗口的宽度方向上的两个宽度顶点所在的至少一个子显示区域的边缘在所述宽度方向上的最大距离作为所述窗口区域的宽，根据所述当前显示窗口的高度方向上的两个高度顶点所在的至少一个子显示区域，确定所述窗口区域的高，包括：所述当前显示窗口的高度方向上的两个高度顶点所在的至少一个子显示区域的边缘在所述高度方向上的最大距离作为所述窗口区域的高。
例如，在本公开一实施例提供的操作方法中，当前显示窗口包括至少一个元素，在所述窗口区域生成所述第一显示窗口，包括：获取所述至少一个元素每个在窗口区域的位置；以及根据所述至少一个元素每个在窗口区域的位置，在所述窗口区域绘制所述第一显示窗口。
例如，在本公开一实施例提供的操作方法中，至少一个元素包括当前窗口显示区域，所述方法还包括：获取与所述当前窗口显示区域绑定的信号源对象；以及响应于接收来自所述信号源对象的图像，在所述当前窗口显示区域显示所述图像。
例如，在本公开一实施例提供的操作方法中，还包括：响应于获取对所述当前显示窗口的缩放触发操作，根据所述缩放触发操作，生成第二显示窗口以在视觉上对所述当前显示窗口进行缩放。
例如，在本公开一实施例提供的操作方法中，在所述当前显示窗口包括至少一个元素，所述至少一个元素包括标题栏和至少一个控制图标，所述至少一个控制图标位于所述标题栏的情形中，响应于获取对所述当前显示窗口的缩放触发操作，根据所述缩放触发操作，生成第二显示窗口以在视觉上对所述当前显示窗口进行缩放，包括：响应于获取对所述当前显示窗口的缩放触发操作，根据所述缩放操作，确定所述第二显示窗口的尺寸；根据所述第二显示窗口的尺寸，从所述至少一个控制图标中选择在所述第二显示窗口中显示的至少部分控制图标；以及根据所述第二显示窗口的尺寸和所述至少部分控制图标，生成所述第二显示窗口。
例如，在本公开一实施例提供的操作方法中，还包括：在所述显示页面的页面容器中生成画布；对所述画布进行划分，以得到所述多个子显示区域。
例如，在本公开一实施例提供的操作方法中，画布用于模拟终端设备的显示屏，在所述显示页面的页面容器中生成画布，包括：获取所述显示屏的尺寸；根据所述显示屏的尺寸，确定所述画布的尺寸；以及根据所述画布的尺寸，在所述页面容器中生成所述画布。
例如，在本公开一实施例提供的操作方法中，根据所述显示屏的尺寸，确定所述画布的尺寸，包括：响应于所述显示屏的宽大于或者等于所述显示屏的高，所述画布的宽等于所述页面容器的宽；所述画布的高根据所述显示屏的宽高比确定；以及响应于所述显示屏的宽小于所述显示屏的高，所述画布的高等于所述页面容器的高，所述画布的宽根据所述显示屏的宽高比确定。
例如，在本公开一实施例提供的操作方法中，在所述显示页面的页面容器中生成画布还 包括：调整画布的位置，使得所述画布的中心位于页面容器的中心。
例如，在本公开一实施例提供的操作方法中，显示屏包括多个子显示屏，对所述画布进行划分，以得到所述多个子显示区域，包括：获取所述多个子显示屏的排布信息；按照所述多个子显示屏的排布信息，对所述画布进行划分，以得到所述多个子显示区域，使得所述多个子显示区域的排布与所述多个子显示屏的排布相匹配。
例如，在本公开一实施例提供的操作方法中，还包括：为所述画布绑定触发事件，所述触发事件至少包括所述尺寸调整触发操作。
例如，在本公开一实施例提供的操作方法中，显示页面包括多个信号源对象，所述触发事件还包括：将从所述多个信号源对象中选择的目标对象进行放置的放置触发操作，所述方法还包括：响应于对所述目标对象的放置触发操作，在所述放置触发操作对应的子显示区域中创建对象显示窗口；以及将所述对象显示窗口与所述目标对象绑定。
例如，在本公开一实施例提供的操作方法中，触发事件还包括：对所述显示页面中的显示窗口进行拖拽的拖拽触发操作，所述方法还包括：响应于获取到对所述对象显示窗口的拖拽触发操作，在视觉上将所述对象显示窗口移动到所述拖拽触发操作对应的目标位置。
例如，在本公开一实施例提供的操作方法中，尺寸调整触发操作包括用于放大当前显示窗口的放大触发操作或者用于缩小所述当前显示窗口的缩小触发操作。
本公开至少一个实施例提供一种操作装置，应用于显示页面，所述显示页面包括显示区域，所述显示区域包括多个子显示区域，所述显示页面包括当前显示窗口，所述装置包括：触发操作获取单元，配置为响应于所述当前显示窗口在所述显示页面中的位置满足预设条件，获取对所述当前显示窗口执行的尺寸调整触发操作；位置关系获取单元，配置为响应于所述尺寸调整触发操作，获取所述当前显示窗口与所述多个子显示区域的位置关系；确定单元，配置为根据所述位置关系，确定所述当前显示窗口尺寸调整后在所述显示页面中占据的窗口区域，窗口区域包括所述多个子显示区域中的至少部分子显示区域；以及生成单元，配置为在所述窗口区域生成第一显示窗口，由所述第一显示窗口替代当前显示窗口，以在视觉上调整所述当前显示窗口的尺寸。
本公开至少一个实施例提供一种电子设备，包括处理器；存储器，包括一个或多个计算机程序指令；一个或多个计算机程序指令被存储在所述存储器中，并由所述处理器执行时实现本公开任一实施例提供的操作方法的指令。
本公开至少一个实施例提供一种计算机可读存储介质，非暂时性存储有计算机可读指令，当所述计算机可读指令由处理器执行时可以实现本公开任一实施例提供的操作方法。
附图说明
为了更清楚地说明本公开实施例的技术方案，下面将对实施例的附图作简单地介绍，显而易见地，下面描述中的附图仅仅涉及本公开的一些实施例，而非对本公开的限制。
图1A示出了本公开至少一个实施例提供的一种操作方法的流程图；
图1B示出了本公开至少一个实施例提供的当前显示窗口在显示页面中的位置满足预设条件的示意图；
图1C示出了本公开至少一个实施例提供的另一种操作方法的流程图；
图1D示出了本公开至少一个实施例提供的一种矩形窗口自适应放大的方法流程图；
图1E示出了本公开至少一个实施例提供的对图1B中的当前显示窗口执行放大触发操作之后的效果示意图；
图1F和1G示出了本公开至少一个实施例提供的对当前显示窗口执行缩小触发操作的示意图；
图2A示出了本公开至少一个实施例提供的一种图1A中步骤S30的方法流程图；
图2B示出了本公开至少一个实施例提供的一种新创建的第一显示窗口的示意图；
图2C示出了本公开至少一个实施例提供的一种第一显示窗口绑定信号源对象之后的示意图；
图3示出了本公开至少一个实施例提供的对当前显示窗口进行缩放触发操作的示意图；
图4A示出了本公开至少一个实施例提供的根据缩放触发操作生成第二显示窗口的方法流程图；
图4B示出了本公开至少一个实施例提供的四种第二显示窗口的示意图；
图4C示出了本公开至少一个实施例提供的图4A中步骤S401的示意图；
图5A示出了本公开至少一个实施例提供的另一种操作方法的流程图；
图5B示出了本公开至少一个实施例提供的一种图5A中步骤S40的方法流程图；
图5C示出了本公开至少一个实施例提供的一种多个子显示区域的效果示意图；
图6示出了本公开至少一个实施例提供的一种从信号源列表中选择信号源对象并且将信号源对象放置在某个子显示区域的示意图；
图7A～图7D示出了本公开至少一个实施例提供的一种显示页面的示意图；
图8示出了本公开至少一个实施例提供的一种操作装置的示意框图；
图9示出了本公开至少一个实施例提供的一种电子设备的示意框图；
图10示出了本公开至少一个实施例提供的另一种电子设备的示意框图；以及
图11示出了本公开至少一个实施例提供的一种计算机可读存储介质的示意图。
具体实施方式
为使本公开实施例的目的、技术方案和优点更加清楚，下面将结合本公开实施例的附图，对本公开实施例的技术方案进行清楚、完整地描述。显然，所描述的实施例是本公开的一部分实施例，而不是全部的实施例。基于所描述的本公开的实施例，本领域普通技术人员在无需创造性劳动的前提下所获得的所有其他实施例，都属于本公开保护的范围。
除非另外定义，本公开使用的技术术语或者科学术语应当为本公开所属领域内具有一般技能的人士所理解的通常意义。本公开中使用的“第一”、“第二”以及类似的词语并不表 示任何顺序、数量或者重要性，而只是用来区分不同的组成部分。同样，“一个”、“一”或者“该”等类似词语也不表示数量限制，而是表示存在至少一个。“包括”或者“包含”等类似的词语意指出现该词前面的元件或者物件涵盖出现在该词后面列举的元件或者物件及其等同，而不排除其他元件或者物件。“连接”或者“相连”等类似的词语并非限定于物理的或者机械的连接，而是可以包括电性的连接，不管是直接的还是间接的。“上”、“下”、“左”、“右”等仅用于表示相对位置关系，当被描述对象的绝对位置改变后，则该相对位置关系也可能相应地改变。
随着电子设备提供的功能越来越丰富，电子设备与用户的交互也越来越多。例如，可视化管控平台可以包括场景编辑器，用户可以在场景编辑器中进行各种图形的可视化操作。例如，用户可以在场景编辑器提供的网页上进行各种窗口操作，如移动窗口、改变尺寸窗口的尺寸等；每一种窗口操作完成后会发送相应的指令给后台服务器，从而根据用户在场景编辑器中执行各种窗口操作生成场景，用户在场景编辑器中所创建的场景可以保存为一张缩略图，以便随时调用显示。
例如，在场景编辑器中，如果让用户手动来调整窗口尺寸，由于例如手部的遮挡导致难以精确地调整窗口尺寸。
本公开至少一个实施例提供一种操作方法、装置、电子设备和计算机可读存储介质。该操作方法应用于显示页面，显示页面包括显示区域，显示区域包括多个子显示区域，显示页面包括当前显示窗口，该方法包括：响应于当前显示窗口在显示页面中的位置满足预设条件，获取对当前显示窗口执行的尺寸调整触发操作；响应于所述尺寸调整触发操作，获取当前显示窗口与所述多个子显示区域的位置关系；根据位置关系，确定当前显示窗口尺寸调整后在显示页面中占据的窗口区域，窗口区域包括所述多个子显示区域中的至少部分子显示区域；以及在窗口区域生成第一显示窗口，由第一显示窗口替代当前显示窗口，以在视觉上调整当前显示窗口的尺寸。该方法能够精确地控制当前显示窗口调整尺寸后的第一显示窗口的边缘的位置，缓解由于肢体遮挡等外因导致的第一显示窗口的边缘无法被精确地控制的技术问题。
需要说明的是，虽然本公开以在场景编辑器中调整窗口尺寸为例来说明本公开要解决的技术问题，但是这对本公开提供的操作方法不具有限定作用，本公开的操作方法可以应用于任何情景。
图1A示出了本公开至少一个实施例提供的一种操作方法的流程图。
如图1A所示，该方法可以包括步骤S10～S40。该操作方法应用于显示页面，显示页面包括显示区域，显示区域包括多个子显示区域，显示页面包括当前显示窗口。
步骤S10：响应于当前显示窗口在显示页面中的位置满足预设条件，获取对当前显示窗口执行的尺寸调整触发操作。
步骤S20：响应于所述尺寸调整触发操作，获取当前显示窗口与多个子显示区域的位置关系。
步骤S30：根据位置关系，确定当前显示窗口尺寸调整后在显示页面中占据的窗口区域，窗口区域包括多个子显示区域中的至少部分子显示区域。
步骤S40：在窗口区域生成第一显示窗口，由第一显示窗口替代当前显示窗口，以在视觉上调整当前显示窗口的尺寸。
在本公开的一些实施例中，预设条件例如为当前显示窗口分别与多个子显示区域中至少两个子显示区域中的至少部分区域重叠。例如，多个子显示区域包括第一子显示区域和第二子显示区域，当前显示窗口的第一部分位于第一子显示区域，当前显示窗口的第二部分位于第二子显示区域。
又例如，预设条件可以是当前显示窗口的一个顶点与显示页面中页面容器的顶点对齐等等。本公开对预设条件不做限定，本领域技术人员可以根据实际需求设置预设条件。在下文中以预设条件为当前显示窗口分别与多个子显示区域中至少两个子显示区域中的至少部分区域重叠为例来说明本公开提供的操作方法。
在本公开的一些实施例中，步骤S10可以是响应于当前显示窗口分别与多个子显示区域中至少两个子显示区域中的至少部分区域重叠，获取对当前显示窗口执行的尺寸调整触发操作。
图1B示出了本公开至少一个实施例提供的当前显示窗口在显示页面中的位置满足预设条件的示意图。
在图1B的示例中，预设条件为当前显示窗口分别与多个子显示区域中至少两个子显示区域中的至少部分区域重叠。
如图1B所示，显示页面100包括显示区域1000，显示区域1000包括当前显示窗口11。显示区域1000包括多个子显示区域，例如，子显示区域9、子显示区域1、子显示区域2、子显示区域3、子显示区域4、子显示区域5、子显示区域6、子显示区域7和子显示区域8。
如图1B所示，当前显示窗口11分别与子显示区域4、子显示区域5、子显示区域7和子显示区域8中的至少部分区域重叠，因此，当前显示窗口满足预设条件。
对于步骤S10，在本公开的一些实施例中，尺寸调整触发操作可以包括用于放大当前显示窗口的放大触发操作，尺寸调整触发操作可以包括用于缩小当前显示窗口的缩小触发操作。
在本公开的一些实施例中，尺寸调整触发操作包括对所述当前显示窗口进行的点击操作。例如，对当前显示窗口进行双击操作即为对当前显示窗口进行放大触发操作，对当前显示窗口进行三连击操作即为对当前显示窗口进行缩小触发操作。例如，该显示页面显示于触摸屏上，若对当前显示窗口执行两次点击操作之间的时间长度小于预设时长(例如，1s)，则该操作为双击操作。类似地，例如，三次连续点击操作的总时长小于预设时长(例如，2s)，则该操作为三连击操作。尺寸调整触发操作也可以是其他的操作，例如滑动操作等，本公开对尺寸调整触发操作不做限定，本领域技术人员可以自行设置尺寸调整触发操作。
在下文中除非特别说明均以尺寸调整触发操作为放大触发操作为例说明本公开的实施例。
对于步骤S20：例如，响应于对当前显示窗口执行的双击操作，获取当前显示窗口与多个子显示区域的位置关系。
在本公开的一些实施例中，位置关系包括当前显示窗口中至少部分特征点所在的子显示区域。
例如，当前显示窗口为矩形，至少部分特征点可以是矩形的三个或者四个顶点，步骤S10可以是获取当前显示窗口的三个或者四个顶点所在的子显示区域。
例如，如图1B所示，遍历每个子显示区域，找出当前显示窗口(矩形)的左上角、右上角、左下角三个顶点A、B、C所在的三个子显示区域。
以图1B中的顶点A为例说明判断子显示区域是否包括当前显示窗口的顶点的方法。假设多个子显示区域也是矩形，某个子显示区域的左上角顶点坐标为(gridX,gridY)、宽为gridW,高为gridH，当前显示窗口的左上角顶点A的坐标为(left,top)，则满足以下条件(1)～条件(4)之一即说明顶点A落在该子显示区域内：
(1)left＝＝gridX且top＝＝gridY；
(2)left>gridX且left<gridX+gridW且top>gridY且top<gridY+gridH；
(3)top＝＝gridY且left>gridX且left<gridX+gridW；
(4)left＝＝gridX且top>gridY且top<gridY+gridH。
需要说明的是，上述条件(1)～条件(4)考虑了顶点落在子显示区域的边上的情况。判断当前显示窗口的右上顶点B和左下顶点C的方法与上述顶点A的判断方法类似。
在本公开的一些实施例中，例如子显示区域是利用fabric.js提供的API绘制的，则顶点坐标(gridX,gridY)、宽gridW、高gridH可以根据fabric.js提供的API获取。fabric.js是一个开源的基于canvas的绘图库，提供的JSAPI简化了原生canvas操作，canvas是HTML5提供的在网页上利用脚本绘制图形的方法。
当然，本领域技术人员也可以采用其他的判断方法来判断子显示区域是否包括当前显示窗口的顶点，本公开对此不做限定。
对于步骤S30，例如，根据当前显示窗口中至少部分特征点所在的子显示区域，确定窗口区域的尺寸；以及根据窗口区域的尺寸，确定窗口区域。
在本公开的一些实施例中，窗口区域至少包括至少两个子显示区域中的部分。例如，窗口区域包括至少两个子显示区域中的一个或者多个。
例如，在上述窗口区域为矩形，至少部分特征点包括矩形的至少部分顶点的情形中，根据至少部分顶点所在的子显示区域，确定窗口区域的宽和高。
例如，根据当前显示窗口的宽度方向上的两个宽度顶点所在的至少一个子显示区域，确定窗口区域的宽；以及根据当前显示窗口的高度方向上的两个高度顶点所在的至少一个子显示区域，确定窗口区域的高。
两个宽度顶点和两个高度顶点可以存在重复的顶点。例如，图1B中的顶点A既可以作为宽度顶点中的一个，也可以作为高度顶点中的一个。
在本公开的一些实施例中，根据当前显示窗口的宽度方向上的两个宽度顶点分别所在的子显示区域，确定窗口区域的宽，包括：当前显示窗口的宽度方向上的两个宽度顶点所在的至少一个子显示区域的边缘在宽度方向上的最大距离作为窗口区域的宽，根据当前显示窗口的高度方向上的两个高度顶点所在的至少一个子显示区域，确定窗口区域的高，包括：当前显示窗口的高度方向上的两个高度顶点所在的至少一个子显示区域的边缘在高度方向上的最大距离作为窗口区域的高。
例如，如图1B所示，至少部分顶点包括当前显示窗口的左上角的顶点A、当前显示窗口的右上角的顶点B和当前显示窗口的左下角的顶点C，则可以根据左上角的顶点A所在的子显示区域4、右上角的顶点B所在的子显示区域5，确定窗口区域的宽，并且根据左上角的顶点A所在的子显示区域4、当前显示窗口的左下角的顶点C所在的子显示区域7，确定窗口区域的高。
例如，在放大触发操作中，当前显示窗口的宽度方向上的两个宽度顶点包括当前显示窗口11的左上角的顶点A和右上角的顶点B。左上角的顶点A所在的子显示区域4的左上角顶点O和右上角的顶点B所在的子显示区域的右上角顶点P之间的距离为至少一个子显示区域的边缘在宽度方向上的最大距离，从而窗口区域的宽为顶点O和顶点P之间的距离。例如，当前显示窗口的高度方向上的两个高度顶点包括当前显示窗口11的左上角的顶点A和左下角的顶点C。左上角的顶点A所在的子显示区域4的左上角顶点O和左下角的顶点C所在的子显示区域的左下角顶点M之间的距离为至少一个子显示区域的边缘在高度方向上的最大距离，从而窗口区域的高为顶点O和顶点M之间的距离。
对于步骤S30，在确定窗口区域的宽和高之后，根据窗口区域的宽和高，确定窗口区域。例如，在图1B的示例中，根据窗口区域的宽为顶点O和顶点P之间的距离，窗口区域的高为顶点O和顶点M之间的距离，则窗口区域为顶点O、顶点P、顶点N和顶点M形成的矩形区域(以下简称“窗口区域OPNM”)。
当然，当前显示窗口也可以是其他的形状，例如五边形、六边形等，本公开不限定当前显示窗口和子显示区域的形状。根据当前显示窗口和子显示区域的形状，本领域技术人员可以设计适当的确定窗口区域的尺寸的方法，在此不一一列出。
例如，步骤S20中的尺寸调整触发操作包括用于放大当前显示窗口的放大触发操作，步骤S30包括：获取当前显示窗口的特征点所在的各个子显示区域；以及将各个子显示区域形成的最大区域作为当前显示窗口尺寸调整后在显示页面中占据的窗口区域。
例如，如图1B所示，当前显示窗口的特征点左上角的顶点A、右上角的顶点B、左下角的顶点C和右下角的顶点D所在的各个子显示区域为子显示区域4、子显示区域5、子显示区域7和子显示区域8。子显示区域4、子显示区域5、子显示区域7和子显示区域8形成的最大区域为OPNM，因此，当前显示窗口尺寸调整后在显示页面中占据的窗口区域为 OPNM。
又例如，步骤S20中的尺寸调整触发操作包括用于缩小当前显示窗口的缩小触发操作，步骤S30包括：响应尺寸调整触发操作，获取当前显示窗口分别与多个子显示区域的重叠面积；以及确定当前显示窗口尺寸调整后在显示页面中占据的窗口区域为重叠面积最大的子显示区域。下文图1G和1F示例性描述了缩小触发操作。
对于步骤S40，例如，在窗口区域OPNM中重新绘制显示窗口得到第一显示窗口，并且将原来的当前显示窗口11删除，由第一显示窗口显示与当前显示窗口11相同的内容，从而由第一显示窗口替代当前显示窗口11，以在视觉上放大当前显示窗口11。
图1C示出了本公开至少一个实施例提供的另一种操作方法的流程图。
如图1C所示，该方法可以包括步骤S110～S130。该操作方法应用于显示页面，显示页面包括显示区域，显示区域包括多个子显示区域，显示页面包括当前显示窗口。
图1C所示的操作方法为图1A所示的操作方法的一个具体实施例。
步骤S110：响应于当前显示窗口分别与多个子显示区域中至少两个子显示区域中的至少部分区域重叠，获取对当前显示窗口执行的尺寸调整触发操作。该步骤S110类似于上文图1A描述的步骤S10，请参考上文的相关描述。
步骤S120：响应于尺寸调整触发操作，确定当前显示窗口尺寸调整后在显示页面中占据的窗口区域，窗口区域至少包括至少两个子显示区域中的部分。
该步骤S120类似于上文图1A描述的步骤S20和S30，请参考上文的相关描述。
例如，尺寸调整触发操作包括用于放大当前显示窗口的放大触发操作，步骤S120可以包括：获取当前显示窗口的特征点所在的各个子显示区域；以及将各个子显示区域形成的最大区域作为当前显示窗口尺寸调整后在显示页面中占据的窗口区域。
又例如，尺寸调整触发操作包括用于缩小当前显示窗口的缩小触发操作，步骤S120包括：响应尺寸调整触发操作，获取当前显示窗口分别与多个子显示区域的重叠面积；以及确定当前显示窗口尺寸调整后在显示页面中占据的窗口区域为所述重叠面积最大的子显示区域。下文图1G和1F示例性描述了缩小触发操作。
步骤S130：在窗口区域生成第一显示窗口，由第一显示窗口替代当前显示窗口，以在视觉上调整当前显示窗口的尺寸。该步骤S130类似于上文图1A描述的步骤S40，请参考上文的相关描述。
图1D示出了本公开至少一个实施例提供的一种矩形窗口自适应放大的方法流程图。
如图1D所示，该方法可以包括步骤S101～步骤S111。
步骤S101：获取放大触发操作。例如可以是获取对触摸屏中显示页面中呈矩形的当前显示窗口进行的双击操作。
步骤S102：遍历显示区域中的多个子显示区域。
步骤S103：判断该子显示区域是否包含当前显示窗口的左上顶点A。例如，可以根据上文描述的条件(1)～(4)来判断顶点A是否落在该子显示区域内。若顶点A落在该子显 示区域内，则执行步骤S104；若顶点A未落在该子显示区域内，则执行步骤S105。
步骤S104：记录该子显示区域。例如，记录该子显示区域的名称、位置坐标以及包含的顶点A等信息。
步骤S105：判断该子显示区域是否包含当前显示窗口的右上顶点B。例如，可以根据上文描述的条件(1)～(4)来判断顶点B是否落在该子显示区域内。若顶点B落在该子显示区域内，则执行步骤S106；若顶点B未落在该子显示区域内，则执行步骤S107。
步骤S106：记录该子显示区域。例如，记录该子显示区域的名称、位置坐标以及包含的顶点B等信息。
步骤S107：判断该子显示区域是否包含当前显示窗口的左下顶点C。例如，可以根据上文描述的条件(1)～(4)来判断顶点C是否落在该子显示区域内。若顶点C落在该子显示区域内，则执行步骤S108；若顶点C未落在该子显示区域内，则执行步骤S109。
步骤S108：记录该子显示区域。例如，记录该子显示区域的名称、位置坐标以及包含的顶点C等信息。
步骤S109：判断是否找到三个顶点分别所在的子显示区域。若找到三个顶点分别所在的子显示区域，则执行步骤S110和步骤S111；若未找到三个顶点分别所在的子显示区域，则执行步骤S102，以继续遍历下一个子显示区域。
步骤S110：根据三个顶点分别所在的子显示区域计算窗口区域的尺寸。例如可以根据步骤S30中描述的方法确定计算窗口的尺寸。
步骤S111：根据窗口区域的尺寸，绘制第一显示窗口并且删除当前显示窗口。
图1E示出了本公开至少一个实施例提供的对图1B中的当前显示窗口执行放大触发操作之后的效果示意图。
如图1B和1E所示，当前显示窗口11的显示内容由放大后的第一显示窗口显示，第一显示窗口填满子显示区域4、子显示区域5、子显示区域7和子显示区域8，达到了在视觉上放大当前显示窗口11的效果。
本公开的提供的操作方法，将显示区域划分为多个子显示区域，响应于尺寸调整触发操作，根据当前显示窗口的特征点所在的子显示区域自适应地调整当前显示窗口尺寸，缓解了通过手指拖拽当前显示窗口的边缘等方法调整当前显示窗口的尺寸导致的无法精确地控制尺寸调整后边缘所在的位置的问题，从而实现了精确地调整当前显示窗口的尺寸的技术效果。
在本公开的一些实施例中，当前显示窗口包括至少一个元素。至少一个元素例如可以包括用于显示图像的显示区域和/或标题栏等。如图1B所示，当前显示窗口可以包括用于显示图像的当前窗口显示区域11-1和标题栏11-2。
例如，当前窗口显示区域显示来自与当前显示窗口绑定的信号源对象的图像。在本公开的一些实施例中，该方法还可以包括获取与当前窗口显示区域绑定的信号源对象；以及响应于接收来自信号源对象的图像，在当前窗口显示区域显示图像。例如，在步骤S10之前执行 获取与当前窗口显示区域绑定的信号源对象；以及响应于接收来自信号源对象的图像，在当前窗口显示区域显示图像。该方法使得用户能够自主将当前窗口显示区域与信号源对象绑定，提高了用户体验和操作方法的灵活性。
在本公开的一些实施例中，例如标题栏位于当前窗口显示区域的一侧。例如，在图1B所示的示例中，标题栏11-2位于当前窗口显示区域11-1的上方。
在本公开的一些实施例中，标题栏中可以显示当前窗口显示区域显示的图像的图像信息。图像信息例如可以包括图像的名称、图像的分辨率等。
在本公开的一些实施例中，至少一个元素还可以包括控制图标，控制图标位于标题栏中。控制图标例如可以包括解锁图标、声音控制图标和关闭图标等。本领域技术人员可以根据实际需要在标题栏中设置多个控制图标。
图1F和1G示出了本公开至少一个实施例提供的对当前显示窗口执行缩小触发操作的示意图。
如图1F所示，当前显示窗口301与子显示区域4(请参考图1B，标号“4”被覆盖)全部区域重叠、与子显示区域5的部分区域重叠、与子显示区域7的部分区域重叠以及与子显示区域8的部分区域重叠。
例如，对当前显示窗口301进行缩小触发操作(例如，三连击)，则从与当前显示窗口301至少部分区域重叠的子显示区域中选择重叠面积最大的子显示区域作为对当前显示窗口301进行缩小触发操作后的第一显示窗口。
如图1G所示，当前显示窗口301与子显示区域4重叠面积最大，因此，子显示区域4作为对当前显示窗口301进行缩小触发操作后的第一显示窗口302所占据的区域。
该实施例根据当前显示窗口与子显示区域的重叠面积自适应地缩小当前显示窗口尺寸，缓解了通过手指拖拽当前显示窗口的边缘等方法缩小当前显示窗口的尺寸导致的无法精确地控制尺寸缩小后边缘所在的位置的问题，从而实现了精确地缩小当前显示窗口的尺寸的技术效果。
图2A示出了本公开至少一个实施例提供的一种图1A中步骤S40的方法流程图。
如图2A所示，步骤S40可以包括步骤S41和步骤S42。
步骤S41：获取至少一个元素每个在窗口区域的位置。
步骤S42：根据至少一个元素每个在窗口区域的位置，在窗口区域绘制第一显示窗口。
对于步骤S41，例如获取第一显示窗口的矩形元素在窗口区域的位置，标题栏在窗口区域的位置，控制图标在窗口区域的位置等。
对于步骤S42，例如可以利用fabric.js提供的Group相关API(例如，组合图形)来绘制，Group的概念为能够同时方便地操作多个对象。fabric.js中创建一个组合图形对象的API为：var group＝new fabric.Group([shape1,shape2,shape3…])，其中每个shape就是组合图形中的各个图形。在上述实施例中，组合图形里可以包含解锁按钮的图标lockImg、声音控制按钮的图标soundImg和关闭按钮的图标closeImg三个图形元素，以及标题栏的矩形元素 header和第一显示窗口的矩形元素Body。例如，先创建每一个独立的元素，每个元素的位置(x,y)均是相对于整个窗口区域的左上角顶点的坐标，即将窗口区域的左上角顶点作为原点。
假设整个窗口区域的宽高分别为width和height，标题栏的高度为headerHeight，解锁按钮图标lockImg相对于原点的坐标为(iconLeft,iconTop)，每个图标的宽高均为iconWidth，两个图标之间距离为iconLeft，由此可得其他元素的位置和尺寸。例如，各个元素的位置和尺寸如下表一所示。
表一
Figure PCTCN2022093859-appb-000001
创建组合图形时需要注意元素在API中的排列顺序，必须把尺寸大的子元素放在前面。例如，第一显示窗口的矩形元素body的尺寸大于标题栏的矩形元素header的尺寸，因此将第一显示窗口的矩形元素body放在标题栏的矩形元素header的前面，以避免无法正确显示窗口的标题栏和图标，因此窗体的创建函数为(需要说明的是，如下仅为简化后的代码，实际还需要设置窗体对象的其他许多属性)：
var winShape＝new Group([body,header,lockImg,soundImg,closeImg])；
canvas.add(winShape)。
图2B示出了本公开至少一个实施例提供的一种新创建的第一显示窗口的示意图。
如图2B所示，新创建的第一显示窗口是一个空白窗体。新创建的第一显示窗口包括标题栏201和第一窗口显示区域202。在得到空白窗体之后，还需要为空白窗体绑定信号源，开启同步操作之后，才会在第一显示窗口的第一窗口显示区域202播放视频画面。
例如，确定当前显示窗口绑定的信号源对象；以及响应于接收来自信号源对象的图像，在第一窗口显示区域显示该图像。在本公开的一些实施例中，例如信号源对象可以是视频，即多帧图像，则第一窗口显示区域可以依次显示多帧图像。
如图2B所示，标题栏201上分布有控制图标，例如解锁图标211、声音控制图标221和关闭图标231等。例如，解锁图标211的横坐标为表一中的iconLeft，纵坐标为表一中的iconTop，第一显示窗口的宽为表一中的width，高为表一中的height。
在为空白窗体绑定信号源，并且开启同步操作之后，例如可以在空白窗口增加元素，例如可以包括视频画面videoImg(图形元素)、第一显示窗口的标题title(文本元素)和图像信息(文本元素)等。例如，可以利用fabric.js提供的向已有的组合图形中添加元素的API：group.add(shape)来实现。动态添加元素时每个元素的坐标(x,y)均默认为相对于组合图形中心点的坐标，如图2C所示，标题title的横坐标title(x)和纵坐标title(y)为相对于组合图形中心点的坐标。因此第一显示窗口的标题和视频画面的坐标如下表二所示。
表二
Figure PCTCN2022093859-appb-000002
在本公开的一些实施例中，至少一个元素还包括视频显示窗口，视频显示窗口位于标题栏中，视频显示窗口用于显示来自与视频显示窗口绑定的另一信号源对象的视频。
例如，在图1B的示例中，当前显示窗口11绑定信号源对象1，在第一显示窗口的第一显示窗口显示区域显示来自信号源对象1的视频(即，多帧图像)，则位于标题栏中的视频显示窗口可以与另一信号源对象(例如，信号源对象2)绑定，从而在视频显示窗口中显示来自信号源对象2的视频。
在该实施例中，另一信号源对象在标题栏中以缩略图的形式与当前显示窗口绑定的信号源对象同时展示，便于用户同时观察到两个信号源对象，从而便于用户比较两个信号源对象。
图2C示出了本公开至少一个实施例提供的一种第一显示窗口绑定信号源对象之后的示意图。
如图2C所示，在绑定信号源之后，第一显示窗口增加了视频画面videoImg 203和第一显示窗口的标题title 204，由第一窗口显示区域202显示该视频画面videoImg 203。
可以理解的是，除第一显示窗口可以按照上文图2A～图2C描述的方法来创建之外，其他显示窗口(例如，当前显示窗口、第二显示窗口等)均可以按照上述图2A～图2C描述的方法来创建，不再赘述。
在本公开的一些所示中，操作方法除包括图1A所示的步骤S10～步骤S40之外，还可以包括响应于获取对当前显示窗口的缩放触发操作，根据缩放触发操作，生成第二显示窗口以在视觉上对当前显示窗口进行缩放。该对当前显示窗口的缩放触发操作例如可以在步骤S10之前执行。
该方法使得用户可以对当前显示窗口的尺寸进行手动调整，比如用鼠标或者手指按住当前显示窗口边缘的控制点拖动进行放大或缩小，当鼠标或者手指抬起后需要按照修改之后的尺寸对窗体重新绘制得到第二显示窗口。该方法提高了对显示窗口进行控制的灵活性和多样性，用户可以根据需求选择合适的操作，并且便于用户将不满足预设条件的当前显示窗口调整为满足预设条件的显示窗口，从而便于对满足预设条件的显示窗口进行尺寸调整触发操作。
在本公开的一些实施例中，例如缩放触发操作包括对当前显示窗口的控制点进行的拉动操作。响应于获取对所述当前显示窗口的缩放触发操作，根据缩放触发操作，生成第二显示窗口以在视觉上对所述当前显示窗口进行缩放，包括：响应于拉动操作使当前显示窗口的第一边移动到第一边位置，将第一边位置作为第二显示窗口中与第一边对应的第二边的第二边位置；以及根据第二边位置生成第二显示窗口。下文图3对该实施例进行了示例性的描述。
在本公开的另一些实施例中，显示区域由多个网格线划分为多个子显示区域，多个网格线包括沿第一方向延伸的网格线和沿第二方向延伸的网格线，缩放触发操作包括对当前显示窗口的第一边进行的拉动操作，第一边沿第一方向延伸。响应于获取对当前显示窗口的缩放触发操作，根据缩放触发操作，生成第二显示窗口以在视觉上对当前显示窗口进行缩放，包括：响应于拉动操作使第一边沿第二方向移动到第一边位置，根据第一边位置，确定第二显示窗口中与第一边对应的第二边的第二边位置，第二边位置为第一边位置最靠近的沿第一方向延伸的网格线；以及根据第二边位置和当前显示窗口除第一边之外的边，生成第二显示窗口。下文图4C示例性描述了响应于拉动操作使第一边沿第二方向移动到第一边位置，根据第一边位置，确定第二显示窗口中与第一边对应的第二边的第二边位置，第二边位置为第一边位置最靠近的沿第一方向延伸的网格线。关于该实施例请参考下文图4C的描述。
图3示出了本公开至少一个实施例提供的对当前显示窗口进行缩放触发操作的示意图。
如图3所示，在该示意图中包括当前显示窗口11。当前显示窗口11分别与子显示区域4、子显示区域5、子显示区域7和子显示区域8中的至少部分区域重叠。
例如，手指可以按住当前显示窗口11的边缘的控制点(例如，顶点B)拖动，当前显示窗口11在视觉上随着手指的拖动而放大。若手指在点F处抬起，则按照修改之后的尺寸对窗体重新绘制，使得当前显示窗口11在视觉上被放大为第二显示窗口12。例如，若手指在点F处抬起，当前显示窗口11的位于上方的边被移动到位置FQ(即，第一边位置)，因此第二显示窗口与第一边对应的第二边所在的第二边位置即位置FQ。当前显示窗口11的其他三条边与该上方的边的移动方式类似，最终当前显示窗口11在视觉上被放大为第二显示窗口12。
如上文所述，若直接对当前显示窗口11进行放大触发操作，在当前显示窗口11放大后的窗口区域为窗口区域OPNM。若对当前显示窗口11先进行缩放触发操作，将当前显示窗口11放大为第二显示窗口12之后，再对第二显示窗口12进行放大触发操作，则第二显示 窗口12被进一步放大后的窗口区域例如为UVNM，因此当前显示窗口11最终被放大至填满子显示区域1、子显示区域2、子显示区域4、子显示区域5、子显示区域7和子显示区域8。该方法使得用户可以根据需要先对当前显示窗口进行缩放触发操作至合适大小，在对第二显示窗口进行尺寸调整触发操作，使得当前显示窗口的尺寸最终被调整为用户所需要的尺寸。
类似地，也可以先对当前显示窗口进行缩小操作，再对缩小后的窗口进行放大触发操作，以使得当前显示窗口最终填满的子显示区域符合要求。
例如，另一显示窗口13分别与子显示区域9、子显示区域1、子显示区域3、子显示区域4、子显示区域6和子显示区域7中的至少部分区域重叠，若用户想要该显示窗口13填满子显示区域3、子显示区域4、子显示区域6和子显示区域7，则可以先对该显示窗口13进行缩放触发操作，将该显示窗口缩小为与子显示区域3、子显示区域4、子显示区域6和子显示区域7中的至少部分区域重叠的第二显示窗口14，之后，对缩小后的第二显示窗口14进行放大触发操作，使得缩小后的显示窗口14被放大至填满子显示区域3、子显示区域4、子显示区域6和子显示区域7。
该操作方法使得用户不需要严格地拖动当前显示窗口的边缘到目标位置，只需要用户将当前显示窗口缩放到目标位置的大致位置，再对缩放后的显示窗口进行尺寸调整触发操作，便可以精确地控制当前显示窗口的边缘到目标位置。
图4A示出了本公开至少一个实施例提供的根据缩放触发操作生成第二显示窗口的方法流程图。
如图4A所示，该方法可以包括步骤S401～步骤S403。该方法例如应用于当前显示窗口包括至少一个元素，至少一个元素包括标题栏和至少一个控制图标，至少一个控制图标位于标题栏的情形中。
步骤S401：响应于获取对当前显示窗口的缩放触发操作，根据缩放操作，确定第二显示窗口的尺寸。
步骤S402：根据第二显示窗口的尺寸，从至少一个控制图标中选择在第二显示窗口中显示的至少部分控制图标。
步骤S403：根据第二显示窗口的尺寸和至少部分控制图标，生成第二显示窗口。
例如，对当前显示窗口进行缩小操作时，由于当前显示窗口被缩小，需要根据调整之后的第二显示窗口的尺寸对标题栏中的条目进行隐藏或显示，避免第二显示窗口过小导致的多个图标重叠在一起的问题。
例如，对于步骤S401，第二显示窗口的尺寸例如可以是第二显示窗口的高度和宽度。
对于步骤S402，例如，在响应缩放触发操作控制当前显示窗口的尺寸缩小至小于尺寸阈值的情形中，从至少一个控制图标中选择在第二显示窗口中显示的部分控制图标。例如，在响应缩放触发操作控制当前显示窗口的尺寸大于等于尺寸阈值的情形中，至少一个控制图标均在第二显示窗口中显示。
例如，若第二显示窗口的标题栏沿宽度方向延伸，即多个图标沿宽度方向依次排列，则可以根据第二显示窗口的宽度从至少一个元素中选择位于第二显示窗口的至少部分元素。又例如，若第二显示窗口的标题栏沿高度方向延伸，即多个图标沿高度方向依次排列，则可以根据第二显示窗口的高度从至少一个元素中选择位于第二显示窗口的至少部分元素。
在本公开的一些实施例中，可以按照多个元素的优先级选择位于第二显示窗口的至少部分元素。例如，关闭图标的优先级大于解锁图标，解锁图标的优先级大于声音控制图标。
例如，按照关闭图标的优先级大于解锁图标，解锁图标的优先级大于声音控制图标从至少一个元素中选择位于第二显示窗口的至少部分元素，以实现窗口的自适应缩放。在如下的示例中，多个图标沿第二显示窗口的宽度方向依次排列，iconLeft是指图标距离第二显示窗口的边框的水平距离，iconWidth是指图标的宽度)。
可缩放的最小宽度为2×iconLeft+iconWidth，也即显示窗口的最小宽度为2×iconLeft+iconWidth。若第二显示窗口的宽度大于或者等于2×iconLeft+iconWidth，并且小于3×iconLeft+2×iconWidth，则第二显示窗口仅包含1个图标，该图标例如可以是关闭图标。若第二显示窗口的宽度大于等于3×iconLeft+2×iconWidth，并且小于4×iconLeft+3×iconWidth，则第二显示窗口可以包括两个图标，例如解锁图标和关闭图标。若第二显示窗口的宽度大于等于4×iconLeft+3×iconWidth，并且小于6×iconLeft+3×iconWidth+titleWidth，则第二显示窗口可以包括三个图标，例如分别为解锁图标、声音控制图标和关闭图标。若第二显示窗口的宽度大于等于6×iconLeft+3×iconWidth+titleWidth，则可以包含至少4个图标。
在缩放结束重新绘制窗口时，需要根据第二显示窗口的宽度和上述2×iconLeft+iconWidth、3×iconLeft+2×iconWidth、4×iconLeft+3×iconWidth以及6×iconLeft+3×iconWidth+titleWidth去比较，来决定标题栏显示哪些图标。在该实施例中，尺寸阈值例如可以是6×iconLeft+3×iconWidth+titleWidth，当第二显示窗口的宽度大于等于6×iconLeft+3×iconWidth+titleWidth时，每个控制图标均在第二显示窗口中显示，当第二显示窗口的宽度小于6×iconLeft+3×iconWidth+titleWidth时，按照上文描述的优先级选择在第二显示窗口中显示的控制图标。
对于步骤S403，根据第二显示窗口的尺寸和至少部分元素每个的位置，绘制第二显示窗口。例如，在标题栏显示选择出的部分控制图标，以生成第二显示窗口。
图4B示出了本公开至少一个实施例提供的四种第二显示窗口的示意图。
如图4B中的图(1)所示，第二显示窗口410的宽度大于或者等于2×iconLeft+iconWidth，并且小于3×iconLeft+2×iconWidth，第二显示窗口410中标题栏仅显示关闭图标。
如图4B中的图(2)所示，第二显示窗口420的宽度大于或者等于3×iconLeft+2×iconWidth，并且小于4×iconLeft+3×iconWidth，第二显示窗口420中标题栏显示关闭图标和解锁图标。
如图4B中的图(3)所示，第二显示窗口430的宽度大于或者等于4×iconLeft+3× iconWidth，并且小于6×iconLeft+3×iconWidth+titleWidth，第二显示窗口430中标题栏显示关闭图标、解锁图标和声音控制图标。
如图4B中的图(4)所示，第二显示窗口440的宽度大于或者等于6×iconLeft+3×iconWidth+titleWidth，第二显示窗口440中标题栏显示关闭图标、解锁图标和声音控制图标，还显示标题camera1。
可以理解的是，若尺寸调整触发操作为缩小触发操作，则响应缩小触发操作生成第一显示窗口的方法与上述图4A和图4B所描述的根据缩放触发操作生成第二显示窗口的方法类似，也可以根据图标的优先级选择在第一显示窗口中显示的图标，对此本公开不再赘述。
在本公开的一些实施例中，由多个网格线将显示区域划分为多个子显示区域，多个网格线包括沿第一方向延伸的网格线和沿第二方向延伸的网格线。缩放触发操作包括对当前显示窗口的第一边进行的拉动操作，第一边沿第一方向延伸。步骤S401包括：响应于拉动操作使第一边沿第二方向移动到第一边位置，根据第一边位置，确定第二显示窗口中与第一边对应的第二边的第二边位置，第二边位置为第一边位置最靠近的沿第一方向延伸的网格线。
如图1B和下文图4C所示，多个网格线将显示区域1000划分为子显示区域1～9。多个网格线包括沿OP方向延伸的网格线和沿MO方向延伸的网格线。
图4C示出了本公开至少一个实施例提供的图4A中步骤S401的示意图。
如图4C所示，例如，缩放触发操作为对当前显示窗口11的上方的边S进行的拉动操作，边S沿OP方向延伸。边S为第一边的示例。
响应于拉动操作使第一边S沿第二方向(即，MO方向)移动到第一边位置，根据第一边位置(例如，S’位置)，则确定第二显示窗口中与第一边对应的第二边(即，第二显示窗口的上边)位于S’位置最靠近的沿第一方向延伸的网格线，即网格线R1R2。即，响应于缩放操作对当前显示窗口11的上方的边S进行的拉动操作使得第一边S移动到S’位置，则第二显示窗口为图4C中斜线填充的区域。
在该实施例中，除当前显示窗口中第一边被移动到第二边位置以由第二边替代第一边之外，当前显示窗口中除第一边之外的其他边的位置和尺寸在第二显示窗口中不变。如图4C所示，除当前显示窗口11的上方的边S之外，当前显示窗口11的其他三条边在第二显示窗口中的尺寸和位置保持不变。即，第二显示窗口与第一显示窗口相比，除第二显示窗口的位于上方的边S’与第一显示窗口11位于上方的边S的位置不同之外，第二显示窗口的其他三条边与第一显示窗口11的其他三条边一致。
该实施例实现了对单条边的精确控制，用户只需要将想要拉动的单条边拉动到大致位置，该实施例便能够自适应地将单条边与网格线对齐，从而实现了精确控制，并且使得用户对显示窗口的控制更加自由和多样化。
图5A示出了本公开至少一个实施例提供的另一种操作方法的流程图。
如图5A所示，该操作方法在包括图1A所示的步骤S10～步骤S40的基础上，还可以进一步包括步骤S50和步骤S60。
步骤S50：在显示页面的页面容器中生成画布。
步骤S60：对画布进行划分，以得到多个子显示区域。
对于步骤S50，在本公开的一些实施例中，例如利用canvas技术在显示页面的页面容器中生成画布。
对于步骤S60，在画布上绘制网格线，以得到多个子显示区域。例如，画布用于模拟终端设备的显示屏，终端设备的显示屏包括多个子显示屏，则可以按照多个子显示屏的排布在画布上绘制网格线，得到多个子显示区域。
因此，在本公开的一些实施例中，步骤S50可以包括获取多个子显示屏的排布信息；按照多个子显示屏的排布信息，对画布进行划分，以得到多个子显示区域，使得多个子显示区域的排布与多个子显示屏的排布相匹配。例如，多个子显示区域的排布和与显示页面交互的多个子显示屏的排布相同。
例如，通过与终端设备通信来获取多个子显示屏的排布信息，或者接收输入的排布信息。例如，排布信息为8块屏幕排列为4×2的阵列，因此在画布中绘制4条网格线，一条网格线沿画布的宽度方向，三条网格线沿画布的高度方向。
例如，在将画布使用网格线划分为8个矩形之后，在8个矩形中绘制8个矩形对象，作为放置显示窗口的容器元素。
例如，多个子显示屏的总宽度、高度分别是width、height，每个子显示屏位于的行列数分别为row、column，则画布上每个矩形的位置坐标(x,y)和宽高(w,h)(见图5C所示)可通过下面的公式计算得到，在下面的公式中index为每个矩形的索引，从0开始计数：
x＝(index％column)×(width/column)
y＝(index/column)×(height/row)
w＝width/column
h＝height/row
在得到每个矩形的位置坐标(x,y)和宽高(w,h)之后，可以利用fabric.js提供的API来绘制矩形对象：var rect＝new fabric.Rect({left,top,width,height,option})。例如，矩形对象的背景色设为透明，使得矩形对象对用户来说是不可见的，只是作为窗体放置的容器。
图5B示出了本公开至少一个实施例提供的一种图5A中步骤S50的方法流程图。
如图5B所示，步骤S50可以包括步骤S51～步骤S53。
步骤S51：获取显示屏的尺寸。
步骤S52：根据显示屏的尺寸，确定画布的尺寸。
步骤S53：根据画布的尺寸，在页面容器中生成画布。
对于步骤S51，例如，调用服务端接口得到终端设备的显示屏的尺寸。例如，显示屏的宽高分别为screenWidth和screenHeight。
对于步骤S52，例如响应于显示屏的宽大于或者等于显示屏的高，画布的宽等于页面容器的宽；画布的高根据显示屏的宽高比确定；以及响应于显示屏的宽小于显示屏的高，画布 的高等于页面容器的高，画布的宽根据显示屏的宽高比确定。
若终端设备的显示屏为多个子显示屏的组合，则显示屏的宽为多个子显示屏的组合后得到的宽，显示屏的高为多个子显示屏组合后得到的高。
在本公开的一些实施例中，上述页面容器的宽和高可以通过浏览器提供的标准APIgetBoundingClientRect得到。getBoundingClientRect为用于获取浏览器视口的API。
例如，画布所在的页面容器为container，页面容器container的宽containerWidth和高containerHeight可以分别按照如下的方法得到。
containerWidth＝container.getBoundingClientRect().width；
containerHeight＝container.getBoundingClientRect().height。
例如，以显示屏的宽为screenWidth,显示屏的高为screenHeight为例说明步骤S52。如果screenWidth/screenHeight>＝1，则：
canvasW(即，画布的宽)＝containerWidth；
canvasH(即，画布的高)＝(canvasW×screenHeight)/screenWidth。
也即，画布的宽等于页面容器(即，浏览器视口)的宽，画布的高根据显示屏的宽高比确定。
此时的画布的高canvasH可能会大于页面容器containerHeight的高度，需要再计算缩放比例zoom。若canvasH>containerHeight，则zoom＝(containerHeight/canvasH)×ratio。如果canvasH<＝containerHeight，则zoom＝ratio。ratio是在一个缩放系数(取值0.9)，以保证画布的尺寸小于页面容器的尺寸。
如果screenWidth/screenHeight<1，则：
canvasH＝containerHeight；
canvasW＝(screenWidth×canvasH)/screenHeight。
也即，画布的高等于页面容器(即，浏览器视口)的高，画布的宽根据显示屏的宽高比确定。
此时canvasW可能会大于容器可视区域的宽度，需要再计算缩放比例zoom。
如果canvasW>containerWidth，则：
zoom＝(containerWidth/canvasW)×ratio；如果canvasW<＝containerWidth，则zoom＝ratio。
最终计算出画布的宽高分别为：
canvasWidth＝canvasW×zoom；
canvasHeight＝canvasH×zoom。
在本公开的一些实施例中，操作方法还可以包括调整画布的位置，使得画布的中心位于页面容器的中心。
例如，按照上述步骤S52计算出的画布位置位于页面容器的左上角，还需要对画布进行一定距离的水平方向和垂直方向的平移，以将画布放置于页面容器的中心位置。水平方向和垂直方向的移动距离可以按照如下的公式计算。
moveX＝containerWidth/2–canvasWidth/2；
moveY＝containerHeight/2–canvasHeight/2。
图5C示出了本公开至少一个实施例提供的一种多个子显示区域的效果示意图。
如图5C所示，显示页面中页面容器510，页面容器510绘制有画布521。该画布521的尺寸可以是根据图5B中步骤S52得到的，画布521的中心位于页面容器510的中心位置。画布521被网格线划分为8个矩形，在每个矩形中添加矩形对象得到8个子显示区域。
如图5A所示，该操作方法在包括步骤S10～步骤S60的基础上，还可以进一步包括步骤S70。
步骤S70：为画布绑定触发事件，触发事件至少包括尺寸调整触发操作。
fabric.js提供了丰富的事件系统，从而可以利用fabric.js为画布或者画布上的对象绑定各类事件和相关的事件处理函数handler。例如：按下事件的事件处理函数handler为canvas.on('mouse:down',handler)；双击事件的事件处理函数handler为canvas.on('mouse:dblclick',handler)；抬起事件的事件处理函数handler为canvas.on('mouse:uphandler)；画布中对象的放置事件的事件处理函数handler为canvas.on('drop',handler)等。例如，在本公开的一些实施例中，放大触发操作即为对画布执行的双击事件。
在本公开的一些实施例中，显示页面包括多个信号源对象，触发事件还包括：将从多个信号源对象中选择的目标对象进行放置的放置触发操作，该操作方法还包括：响应于对目标对象进行放置的放置触发操作，在放置触发操作对应的子显示区域中创建对象显示窗口；以及将对象显示窗口与目标对象绑定，以在对象显示窗口显示来自目标对象的图像。例如，放置触发操作可以在图1A的步骤S10之前执行，或者也可以在步骤S40之后执行。
如图1B、图1E和图3所示，显示页面100除包括页面容器形成的显示区域1000之外，还可以包括信号源列表2000，信号源列表2000依次排列多个信号源对象。例如每个信号源对象为视频源。如图1B所示，信号源列表2000可以位于显示区域1000的一侧，例如右侧。触发事件还包括将从多个信号源对象中选择的目标对象进行放置的放置触发操作。例如，从多个信号源对象中选择目标对象，并且将目标对象放置于显示区域的某个位置。
例如，用户在右侧的信号源列表2000中选择一个视频源，拖拽至画布中的某个子显示区域内，会自动在该网格内添加一个对象显示窗口。每个对象显示窗口例如包括标题栏、控制图标(包含解锁、声音、关闭)、窗口显示区域等组成，可以用fabric.js提供的组合图形的API来绘制。例如，按照上文图2A所描述的方法进行对象显示窗口的绘制。对象显示窗口的位置参数由拖拽放置时所在的网格决定。由于前面已经在每个网格内绘制了一个矩形区域，在画布的放置触发操作中，根据放置触发操作的参数可以确定当前所属矩形的位置参数(x,y,w,h)，从而根据位置参数在子显示区域中绘制对象窗口图形。
图6示出了本公开至少一个实施例提供的一种从信号源列表2000中选择信号源对象并且将信号源对象放置在某个子显示区域的示意图。
如图6所示，用户从信号源列表2000中选择了信号源对象2，并且将信号源对象2移 动到子显示区域9所在的位置处释放，也即用户对信号源对象2进行了放置触发操作。本公开的一些实施例提供的操作方法，响应于该放置触发操作，在子显示区域9中添加对象显示窗口61，并且在该对象显示窗口61中显示信号源对象2的画面。
在本公开的一些实施例中，触发事件还包括：对显示页面中的显示窗口进行拖拽的拖拽触发操作。拖拽触发操作包括：在选中对象显示窗口的同时，对对象显示窗口进行拖拽直到对象显示窗口被拖拽到目标位置；以及响应于对象显示窗口被拖拽到目标位置，释放对对象显示窗口的控制。
操作方法还包括：响应于获取到对对象显示窗口的拖拽触发操作，在视觉上将对象显示窗口移动到拖拽触发操作对应的目标位置。
例如，响应于对象显示窗口在目标位置满足预设条件，对象显示窗口可以作为当前显示窗口。
对象显示窗口为显示页面中显示窗口的示例，用户可以对显示页面中的任何显示窗口进行拖拽触发操作。
例如，拖拽触发操作包括：在选中所述对象显示窗口的同时，对所述对象显示窗口进行拖拽直到所述对象显示窗口被拖拽到所述目标位置；以及响应于所述对象显示窗口被拖拽到所述目标位置，释放对所述对象显示窗口的控制。
例如，在上述图6所示的示例中，用户可以对对象显示窗口61进行拖拽触发操作，例如将对象显示窗口61拖拽到目标位置T。例如，在目标位置T重新绘制显示窗口，该重新绘制的显示窗口与对象显示窗口61的内容相同，从而在视觉上使得对象显示窗口61被拖拽到目标位置T。例如，重新绘制的在目标位置T的显示窗口分别覆盖子显示区域3、子显示区域4、子显示区域6和子显示区域7。由于重新绘制的在目标位置T的显示窗口满足预设条件(例如，所述当前显示窗口分别与所述多个子显示区域中至少两个子显示区域中的至少部分区域重叠)，则重新绘制的在目标位置T的显示窗口可以作为当前显示窗口，也即，用户可以对在目标位置T的显示窗口进行上文图1A描述的尺寸调整触发操作。
图7A～图7D示出了本公开至少一个实施例提供的一种显示页面的示意图。下面结合图7A～图7D对本公开提供的操作方法做进一步说明。
如图7A所示，该显示页面为指挥中心可视化控制平台。例如，该指挥中心可视化控制平台用于对智慧城市进行监测和管理。
该指挥中心可视化控制平台的显示页面700中包括4个页面区域，分别为页面区域A1～A4。如图7A所示，页面区域A1为显示区域，该显示区域划分为8个子显示区域(子显示区域701～708)以模拟8个显示屏的拼接(图7A中用较粗的线条标识每个单独的显示屏)。页面区域A2为用户选择区域，用户可以选择再次对显示屏进行分割，将单个显示屏分割成1、4、9、16个子显示单元进行显示。例如，若用户选择4，则将单个显示屏再次分割为4个子显示单元(如图7A中虚线所示)。页面区域A3信号源对象列表，用户可以看到所有的信号源对象，以及实时的预览画面。页面区域A4为用户对页面区域A1进行编辑完 成之后保存的场景列表，支持一键调取。
在本公开的另一些实施例中，显示区域中多个子显示区域的排布策略可以根据实际中多个子显示屏的排布确定，以模拟真实的拼接显示屏以对拼接屏的显示画面在触摸屏上还原，避免图像画面溢出显示区域。例如，真实的拼接显示屏包括11个子显示屏，11个子显示屏包括位于1个尺寸最大的子显示屏、8个最小的子显示屏和两个中等尺寸的子显示屏；两个中等尺寸的子显示屏上下排布成“日”字型，8个最小的子显示屏每四个组成一个“田”字型显示屏组，两个子显示屏组上下排布；尺寸最大的子显示屏和组“日”字型的两个子显示屏分别位于8个最小的子显示屏这个整体的两侧，则图7A中的子显示区域701～704形成的整体对应的显示区域可以用于创建尺寸最大的显示窗口以与尺寸最大的子显示屏对应，子显示区域705和706可以分别被划分为4个子显示单元，以分别与8个最小的子显示屏对应，子显示区域707和子显示区域708可以分别与两个中等尺寸的子显示屏对应。
本领域技术人员可以根据真实拼接屏的排布对显示区域进行划分，这样能够避免图像画面溢出显示，或者图像画面较小导致显示区域未充分利用，从而满足用户各种显示需求。
如图7B所示，页面区域A3中的某个信号源对象列表中的视频源71被拖拽并且放置到页面区域A1。在本公开的一些实施例中，可以直接在该视频源71在页面区域A1中的释放的位置创建显示窗口72用于显示该视频源71的画面。在本公开的另一些实施例中，可以根据释放的位置在页面区域A1的某个子显示区域内创建显示窗口，实现在大屏幕对应的子显示区域内显示拖拽的信号源。以下将上述在页面区域A1中创建显示窗口的操作简称为“开窗”。
在一些不同于上述本公开描述的实施例中，如果需要在更大的区域显示例如信号源对象71的视频源时，可以点击页面区域A1“开窗”的区域边缘，例如以拖拽的方式将显示窗口72放大缩小，如果需要将显示窗口72对齐辅助线(即，画面中的网格线)，可以将显示窗口72拖拽到各个辅助线边缘，由显示窗口72自动吸附辅助线。但是，这种边缘吸附的方式操作不便，尤其是在Pad上操作时，由于触摸操作手指的遮挡，以及小屏幕上操作精细度的限制，往往较难精确的控制显示窗口边缘的准确位置，这样开窗操作较不准确。
本公开提供的例如图1A所示的操作方法不需要拖拽显示窗口边缘，而是先移动显示窗口到想要占满的区域，将显示窗口压住辅助线，之后双击显示窗口，则将显示窗口自动填满辅助线所在区域。这种交互方式在Pad上操作更加方便，不易出错。
例如，对图7B所示的显示窗口72进行拖拽触发操作，以使显示窗口72在视觉上移动到显示窗口需要占满的区域。拖拽触发操作例如可以是先点击显示窗口72然后拖拽显示窗口72。
如图7C所示，在视觉上，显示窗口72被由区域721(即，子显示单元S4、S5、S7和S8形成的区域)移动到区域722，在显示窗口72被移动到区域722之后分别覆盖子显示单元S1～S9每个的至少部分区域。之后，可以对位于区域722的显示窗口执行放大触发操作。
如图7D和图7C所示，在对位于区域722的显示窗口执行放大触发操作之后，重新得 到的第一显示窗口填满子显示单元S1～S9。
在上述的实施例中，均使用了fabric.js这个开源的基于canvas的绘图库，来实现对显示窗口的各种操作。本领域技术人员也可以采用其他的方式来实现显示窗口的绘制、控制等交互操作。例如，也可以使用原生的canvas和可缩放矢量图形(Scalable Vector Graphics，SVG)技术在网页上实现2D平面图形的绘制和交互。
原生的canvas也提供了各种绘图的API，比如绘制一个矩形、多边形、圆形等。但是其不支持事件处理的功能。若要实现对例如一个矩形的改变位置、缩放等操作，并获取操作之后的尺寸位置，需要用户自己去实现相关的逻辑和计算，另外原生的canvas也没有提供对图形组合操作的支持。
SVG是一种使用XML描述2D图形的语言，它相比canvas最大的优势是：每个被绘制的图形都被视为对象，可以为其添加相关的事件处理器；SVG图像在放大或改变尺寸的情况下其图形质量不会有所损失。但是若想以.png或.jpg等格式保存画布上的图像不如canvas方便，并且对于拖拽、平移等可视化操作，会仍需要编写大量的实现逻辑和计算以及对于图形组合的整体操作也不如fabric.js方便。
对于尺寸调整触发操作为缩小触发操作的情形，操作方法类似于上文描述的放大触发操作。例如，当前显示窗口覆盖多个子显示区域中的四个子显示区域，响应于缩小触发操作，确定当前显示窗口尺寸调整后在显示页面中占据的窗口区域为该四个子显示区域中的三个子显示区域，从而在三个子显示区域中生成第一显示窗口，由第一显示窗口替代当前显示窗口，以在视觉上缩小当前显示窗口的尺寸。
图8示出了本公开至少一个实施例提供的一种操作装置800的示意框图。
例如，如图8所示，该操作装置800包括触发操作获取单元810、区域确定单元820和窗口生成单元830。
触发操作获取单元810配置为响应于所述当前显示窗口分别与所述多个子显示区域中至少两个子显示区域中的至少部分区域重叠，获取对所述当前显示窗口执行的尺寸调整触发操作。
触发操作获取单元810例如可以执行图1C描述的步骤S110。
区域确定单元820配置为响应所述尺寸调整触发操作，确定所述当前显示窗口尺寸调整后在所述显示页面中占据的窗口区域，其中，所述窗口区域至少包括所述至少两个子显示区域中的部分。
区域确定单元820例如可以执行图1C描述的步骤S120。
窗口生成单元830配置为在所述窗口区域生成第一显示窗口，由所述第一显示窗口替代所述当前显示窗口，以在视觉上调整所述当前显示窗口。
窗口生成单元830例如可以执行图1C描述的步骤S130。
例如，触发操作获取单元810、区域确定单元820和窗口生成单元830可以为硬件、软件、固件以及它们的任意可行的组合。例如触发操作获取单元810、区域确定单元820和窗 口生成单元830可以为专用或通用的电路、芯片或装置等，也可以为处理器和存储器的结合。关于上述各个单元的具体实现形式，本公开的实施例对此不作限制。
该装置能够精确地控制当前显示窗口调整尺寸后的第一显示窗口的边缘的位置，缓解由于肢体遮挡等外因导致的第一显示窗口的边缘无法被精确地控制的技术问题。
需要说明的是，本公开的实施例中，操作装置800的各个单元与前述的操作方法的各个步骤对应，关于操作装置800的具体功能可以参考关于操作方法的相关描述，此处不再赘述。图8所示的操作装置800的组件和结构只是示例性的，而非限制性的，根据需要，该操作装置800还可以包括其他组件和结构。
本公开的至少一个实施例还提供了一种电子设备，该电子设备包括处理器和存储器，存储器包括一个或多个计算机程序指令。一个或多个计算机程序指令被存储在存储器中并被配置为由处理器执行，一个或多个计算机程序指令包括用于实现上述的操作方法的指令。该电子设备能够精确地控制当前显示窗口调整尺寸后的第一显示窗口的边缘的位置，缓解由于肢体遮挡等外因导致的第一显示窗口的边缘无法被精确地控制的技术问题。
图9为本公开一些实施例提供的一种电子设备的示意框图。如图9所示，该电子设备900包括处理器910和存储器920。存储器920用于存储非暂时性计算机可读指令(例如一个或多个计算机程序模块)。处理器910用于运行非暂时性计算机可读指令，非暂时性计算机可读指令被处理器910运行时可以执行上文所述的操作方法中的一个或多个步骤。存储器920和处理器910可以通过总线系统和/或其它形式的连接机构(未示出)互连。
例如，处理器910可以是中央处理单元(CPU)、图形处理单元(GPU)或者具有数据处理能力和/或程序执行能力的其它形式的处理单元。例如，中央处理单元(CPU)可以为X86或ARM架构等。处理器910可以为通用处理器或专用处理器，可以控制电子设备900中的其它组件以执行期望的功能。
例如，存储器920可以包括一个或多个计算机程序产品的任意组合，计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。非易失性存储器例如可以包括只读存储器(ROM)、硬盘、可擦除可编程只读存储器(EPROM)、便携式紧致盘只读存储器(CD-ROM)、USB存储器、闪存等。在计算机可读存储介质上可以存储一个或多个计算机程序模块，处理器910可以运行一个或多个计算机程序模块，以实现电子设备900的各种功能。在计算机可读存储介质中还可以存储各种应用程序和各种数据以及应用程序使用和/或产生的各种数据等。
需要说明的是，本公开的实施例中，电子设备900的具体功能和技术效果可以参考上文中关于操作方法的描述，此处不再赘述。
图10为本公开一些实施例提供的另一种电子设备的示意框图。该电子设备1000例如适于用来实施本公开实施例提供的操作方法。电子设备1000可以是终端设备等。需要注意的是，图10示出的电子设备1000仅仅是一个示例，其不会对本公开实施例的功能和使用 范围带来任何限制。
如图10所示，电子设备1000可以包括处理装置(例如中央处理器、图形处理器等)1010，其可以根据存储在只读存储器(ROM)1020中的程序或者从存储装置1080加载到随机访问存储器(RAM)1030中的程序而执行各种适当的动作和处理。在RAM 1030中，还存储有电子设备1000操作所需的各种程序和数据。处理装置1010、ROM 1020以及RAM1030通过总线1040彼此相连。输入/输出(I/O)接口1050也连接至总线1040。
通常，以下装置可以连接至I/O接口1050：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置1060；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置1070；包括例如磁带、硬盘等的存储装置1080；以及通信装置1090。通信装置1090可以允许电子设备1000与其他电子设备进行无线或有线通信以交换数据。虽然图10示出了具有各种装置的电子设备1000，但应理解的是，并不要求实施或具备所有示出的装置，电子设备1000可以替代地实施或具备更多或更少的装置。
例如，根据本公开的实施例，上述操作方法可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包括用于执行上述操作方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置1090从网络上被下载和安装，或者从存储装置1080安装，或者从ROM 1020安装。在该计算机程序被处理装置1010执行时，可以实现本公开实施例提供的操作方法中限定的功能。
本公开的至少一个实施例还提供了一种计算机可读存储介质，该计算机可读存储介质用于非暂时性存储有计算机可读指令，当计算机可读指令由计算机执行时可以实现上述的操作方法。利用该计算机可读存储介质，能够精确地控制当前显示窗口调整尺寸后的第一显示窗口的边缘的位置，缓解由于肢体遮挡等外因导致的第一显示窗口的边缘无法被精确地控制的技术问题。
图11为本公开一些实施例提供的一种存储介质的示意图。如图11所示，存储介质1100用于存储非暂时性计算机可读指令1110。例如，当非暂时性计算机可读指令1110由计算机执行时可以执行根据上文所述的操作方法中的一个或多个步骤。
例如，该存储介质1100可以应用于上述电子设备900中。例如，存储介质1100可以为图9所示的电子设备900中的存储器920。例如，关于存储介质1100的相关说明可以参考图9所示的电子设备900中的存储器920的相应描述，此处不再赘述。
有以下几点需要说明：
(1)本公开实施例附图只涉及到本公开实施例涉及到的结构，其他结构可参考通常设计。
(2)在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合以得到新的实施例。
以上所述，仅为本公开的具体实施方式，但本公开的保护范围并不局限于此，本公开的保护范围应以所述权利要求的保护范围为准。

Claims (21)

  1. 一种操作方法，应用于显示页面，其中，所述显示页面包括显示区域，所述显示区域包括多个子显示区域，所述显示页面包括当前显示窗口，所述方法包括：
    响应于所述当前显示窗口在所述显示页面中的位置满足预设条件，获取对所述当前显示窗口执行的尺寸调整触发操作；
    响应于所述尺寸调整触发操作，获取所述当前显示窗口与所述多个子显示区域的位置关系；
    根据所述位置关系，确定所述当前显示窗口尺寸调整后在所述显示页面中占据的窗口区域，其中，所述窗口区域包括所述多个子显示区域中的至少部分子显示区域；以及
    在所述窗口区域生成第一显示窗口，由所述第一显示窗口替代所述当前显示窗口，以在视觉上调整所述当前显示窗口的尺寸。
  2. 根据权利要求1所述的方法，其中，所述位置关系包括所述当前显示窗口中至少部分特征点所在的子显示区域，
    根据所述位置关系，确定所述当前显示窗口尺寸调整后在所述显示页面中占据的所述窗口区域，包括：
    根据所述当前显示窗口中至少部分特征点所在的子显示区域，确定所述窗口区域的尺寸；以及
    根据所述窗口区域的尺寸，确定所述窗口区域。
  3. 根据权利要求2所述的方法，其中，所述当前显示窗口为矩形，所述至少部分特征点为所述矩形的至少部分顶点，
    根据所述当前显示窗口中至少部分特征点所在的子显示区域，确定所述窗口区域的尺寸，包括：
    根据所述至少部分顶点所在的子显示区域，确定所述窗口区域的宽和高，
    根据所述窗口区域的尺寸，确定所述窗口区域，包括：
    根据所述窗口区域的宽和高，确定所述窗口区域。
  4. 根据权利要求3所述的方法，其中，所述多个子显示区域每个为矩形，
    根据所述至少部分顶点，确定所述窗口区域的宽和高，包括：
    根据所述当前显示窗口的宽度方向上的两个宽度顶点所在的至少一个子显示区域，确定所述窗口区域的宽；以及
    根据所述当前显示窗口的高度方向上的两个高度顶点所在的至少一个子显示区域，确定所述窗口区域的高。
  5. 根据权利要求4所述的方法，其中，
    根据所述当前显示窗口的宽度方向上的两个宽度顶点分别所在的子显示区域，确定所述窗口区域的宽，包括：
    所述当前显示窗口的宽度方向上的两个宽度顶点所在的至少一个子显示区域的边缘在所述宽度方向上的最大距离作为所述窗口区域的宽，
    根据所述当前显示窗口的高度方向上的两个高度顶点所在的至少一个子显示区域，确定所述窗口区域的高，包括：
    所述当前显示窗口的高度方向上的两个高度顶点所在的至少一个子显示区域的边缘在所述高度方向上的最大距离作为所述窗口区域的高。
  6. 根据权利要求1～5任一项所述的方法，其中，所述当前显示窗口包括至少一个元素，在所述窗口区域生成所述第一显示窗口，包括：
    获取所述至少一个元素每个在窗口区域的位置；以及
    根据所述至少一个元素每个在窗口区域的位置，在所述窗口区域绘制所述第一显示窗口。
  7. 根据权利要求6所述的方法，其中，所述至少一个元素包括当前窗口显示区域，所述方法还包括：
    获取与所述当前窗口显示区域绑定的信号源对象；以及
    响应于接收来自所述信号源对象的图像，在所述当前窗口显示区域显示所述图像。
  8. 根据权利要求1～7任一项所述的方法，还包括：
    响应于获取对所述当前显示窗口的缩放触发操作，根据所述缩放触发操作，生成第二显示窗口以在视觉上对所述当前显示窗口进行缩放。
  9. 根据权利要求8所述的方法，其中，在所述当前显示窗口包括至少一个元素，所述至少一个元素包括标题栏和至少一个控制图标，所述至少一个控制图标位于所述标题栏的情形中，响应于获取对所述当前显示窗口的缩放触发操作，根据所述缩放触发操作，生成第二显示窗口以在视觉上对所述当前显示窗口进行缩放，包括：
    响应于获取对所述当前显示窗口的缩放触发操作，根据所述缩放操作，确定所述第二显示窗口的尺寸；
    根据所述第二显示窗口的尺寸，从所述至少一个控制图标中选择在所述第二显示窗口中显示的至少部分控制图标；以及
    根据所述第二显示窗口的尺寸和所述至少部分控制图标，生成所述第二显示窗口。
  10. 根据权利要求1～9任一项所述的方法，还包括：
    在所述显示页面的页面容器中生成画布；以及
    对所述画布进行划分，以得到所述多个子显示区域。
  11. 根据权利要求10所述的方法，其中，所述画布用于模拟终端设备的显示屏，
    在所述显示页面的页面容器中生成画布，包括：
    获取所述显示屏的尺寸；
    根据所述显示屏的尺寸，确定所述画布的尺寸；以及
    根据所述画布的尺寸，在所述页面容器中生成所述画布。
  12. 根据权利要求11所述的方法，其中，根据所述显示屏的尺寸，确定所述画布的尺寸，包括：
    响应于所述显示屏的宽大于或者等于所述显示屏的高，所述画布的宽等于所述页面容器的宽；所述画布的高根据所述显示屏的宽高比确定；以及
    响应于所述显示屏的宽小于所述显示屏的高，所述画布的高等于所述页面容器的高，所述画布的宽根据所述显示屏的宽高比确定。
  13. 根据权利要求11或12所述的方法，其中，在所述显示页面的页面容器中生成画布还包括：
    调整画布的位置，使得所述画布的中心位于页面容器的中心。
  14. 根据权利要求11～13任一项所述的方法，其中，所述显示屏包括多个子显示屏，对所述画布进行划分，以得到所述多个子显示区域，包括：
    获取所述多个子显示屏的排布信息；
    按照所述多个子显示屏的排布信息，对所述画布进行划分，以得到所述多个子显示区域，使得所述多个子显示区域的排布与所述多个子显示屏的排布相匹配。
  15. 根据权利要求11～13任一项所述的方法，还包括：
    为所述画布绑定触发事件，其中，所述触发事件至少包括所述尺寸调整触发操作。
  16. 根据权利要求15所述的方法，其中，所述显示页面包括多个信号源对象，
    所述触发事件还包括：
    将从所述多个信号源对象中选择的目标对象进行放置的放置触发操作，
    所述方法还包括：
    响应于对所述目标对象的放置触发操作，在所述放置触发操作对应的子显示区域中创建对象显示窗口；以及
    将所述对象显示窗口与所述目标对象绑定。
  17. 根据权利要求16所述的方法，所述触发事件还包括：对所述显示页面中的显示窗口进行拖拽的拖拽触发操作，
    所述方法还包括：
    响应于获取到对所述对象显示窗口的拖拽触发操作，在视觉上将所述对象显示窗口移动到所述拖拽触发操作对应的目标位置。
  18. 根据权利要求1～17任一项所述的方法，其中，所述尺寸调整触发操作包括用于放大所述当前显示窗口的放大触发操作或者用于缩小所述当前显示窗口的缩小触发操作。
  19. 一种操作装置，应用于显示页面，其中，所述显示页面包括显示区域，所述显示区域包括多个子显示区域，所述显示页面包括当前显示窗口，所述装置包括：
    触发操作获取单元，配置为响应于所述当前显示窗口在所述显示页面中的位置满足预设条件，获取对所述当前显示窗口执行的尺寸调整触发操作；
    位置关系获取单元，配置为响应于所述尺寸调整触发操作，获取所述当前显示窗口与所 述多个子显示区域的位置关系；
    确定单元，配置为根据所述位置关系，确定所述当前显示窗口尺寸调整后在所述显示页面中占据的窗口区域，窗口区域包括所述多个子显示区域中的至少部分子显示区域；以及
    生成单元，配置为在所述窗口区域生成第一显示窗口，由所述第一显示窗口替代所述当前显示窗口，以在视觉上调整所述当前显示窗口。
  20. 一种电子设备，包括：
    处理器；
    存储器，包括一个或多个计算机程序指令；
    其中，所述一个或多个计算机程序指令被存储在所述存储器中，并由所述处理器执行时实现权利要求1～18任一项所述的操作方法的指令。
  21. 一种计算机可读存储介质，非暂时性存储有计算机可读指令，其中，当所述计算机可读指令由处理器执行时实现权利要求1～18任一项所述的操作方法。
PCT/CN2022/093859 2022-05-19 2022-05-19 操作方法、装置、电子设备和计算机可读存储介质 WO2023221041A1 (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN202280001278.3A CN117425875A (zh) 2022-05-19 2022-05-19 操作方法、装置、电子设备和计算机可读存储介质
PCT/CN2022/093859 WO2023221041A1 (zh) 2022-05-19 2022-05-19 操作方法、装置、电子设备和计算机可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
PCT/CN2022/093859 WO2023221041A1 (zh) 2022-05-19 2022-05-19 操作方法、装置、电子设备和计算机可读存储介质

Publications (1)

Publication Number Publication Date
WO2023221041A1 true WO2023221041A1 (zh) 2023-11-23

Family

ID=88834300

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2022/093859 WO2023221041A1 (zh) 2022-05-19 2022-05-19 操作方法、装置、电子设备和计算机可读存储介质

Country Status (2)

Country Link
CN (1) CN117425875A (zh)
WO (1) WO2023221041A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117557682A (zh) * 2024-01-09 2024-02-13 腾讯科技（深圳）有限公司 数据处理方法、装置、产品、设备和介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2014185946A1 (en) * 2013-05-13 2014-11-20 Microsoft Corporation Smart insertion of application windows into a managed display region
CN108804187A (zh) * 2018-05-30 2018-11-13 北京小米移动软件有限公司 界面窗口的设置方法及装置
CN110162288A (zh) * 2019-06-03 2019-08-23 北京淳中科技股份有限公司 一种确定显示区域的方法、装置、设备和介质
CN111164559A (zh) * 2017-10-09 2020-05-15 深圳市柔宇科技有限公司 屏幕缩放调整方法及装置、终端及计算机可读存储介质

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
WO2014185946A1 (en) * 2013-05-13 2014-11-20 Microsoft Corporation Smart insertion of application windows into a managed display region
CN111164559A (zh) * 2017-10-09 2020-05-15 深圳市柔宇科技有限公司 屏幕缩放调整方法及装置、终端及计算机可读存储介质
CN108804187A (zh) * 2018-05-30 2018-11-13 北京小米移动软件有限公司 界面窗口的设置方法及装置
CN110162288A (zh) * 2019-06-03 2019-08-23 北京淳中科技股份有限公司 一种确定显示区域的方法、装置、设备和介质

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117557682A (zh) * 2024-01-09 2024-02-13 腾讯科技（深圳）有限公司 数据处理方法、装置、产品、设备和介质
CN117557682B (zh) * 2024-01-09 2024-04-19 腾讯科技（深圳）有限公司 数据处理方法、装置、产品、设备和介质

Also Published As

Publication number Publication date
CN117425875A (zh) 2024-01-19

Similar Documents

Publication Publication Date Title
AU2021240136B2 (en) Systems, methods, and graphical user interfaces for interacting with augmented and virtual reality environments
US20200319763A1 (en) Method and device for managing tab window indicating application group including heterogeneous applications
US10936790B2 (en) Responsive grid layouts for graphic design
US11698721B2 (en) Managing an immersive interface in a multi-application immersive environment
US9880727B2 (en) Gesture manipulations for configuring system settings
US7889212B2 (en) Magnifying visual information using a center-based loupe
US20150046853A1 (en) Computing Device For Collaborative Project Management
US7068288B1 (en) System and method for moving graphical objects on a computer controlled system
US20070268317A1 (en) User interface system and method for selectively displaying a portion of a display screen
US20070097150A1 (en) Viewport panning feedback system
US9792268B2 (en) Zoomable web-based wall with natural user interface
US11354027B2 (en) Automatic zoom-loupe creation, selection, layout, and rendering based on interaction with crop rectangle
WO2023155811A1 (zh) 页面布局调整方法、装置
WO2018198703A1 (ja) 表示装置
WO2023221041A1 (zh) 操作方法、装置、电子设备和计算机可读存储介质
CN114741016B (zh) 操作方法、装置、电子设备和计算机可读存储介质
WO2021218511A1 (zh) 拼接屏的视频显示方法、视频显示装置、计算机设备和介质
WO2023216976A1 (zh) 显示方法、装置、电子设备及存储介质
US20220083208A1 (en) Non-proportionally transforming and interacting with objects in a zoomable user interface
JP2020507174A (ja) 表示コンテンツのパネルをナビゲートする方法
CN112269520B (zh) 元素显示控制方法、装置、交互平板及存储介质
US11507260B2 (en) Electronic album apparatus, method for operating electronic album apparatus, and operation program utilizing display cell enlargement
US11069066B2 (en) Dynamically change tracker speed, switch crop rectangles, and display invisible corners via zoom-loupes
CN114327208B (zh) 一种图例展示方法、装置、存储介质及终端
CN116841439B (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: 22942082

Country of ref document: EP

Kind code of ref document: A1