WO2022217433A1 - 多端协同的显示更新方法及装置 - Google Patents

多端协同的显示更新方法及装置 Download PDF

Info

Publication number
WO2022217433A1
WO2022217433A1 PCT/CN2021/086634 CN2021086634W WO2022217433A1 WO 2022217433 A1 WO2022217433 A1 WO 2022217433A1 CN 2021086634 W CN2021086634 W CN 2021086634W WO 2022217433 A1 WO2022217433 A1 WO 2022217433A1
Authority
WO
WIPO (PCT)
Prior art keywords
canvas
terminal
application interface
application
parameter
Prior art date
Application number
PCT/CN2021/086634
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 KR1020237032017A priority Critical patent/KR20230145478A/ko
Priority to PCT/CN2021/086634 priority patent/WO2022217433A1/zh
Priority to CN202180006764.XA priority patent/CN115552364A/zh
Priority to JP2023561125A priority patent/JP2024512164A/ja
Priority to EP21936328.0A priority patent/EP4325344A4/en
Priority to US18/283,132 priority patent/US20240303026A1/en
Publication of WO2022217433A1 publication Critical patent/WO2022217433A1/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/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/1454—Digital output to display device ; Cooperation and interconnection of the display device with other functional units involving copying of the display data of a local workstation or window to a remote workstation or window so that an actual copy of the data is displayed simultaneously on two or more displays, e.g. teledisplay
    • G06F3/1462—Digital output to display device ; Cooperation and interconnection of the display device with other functional units involving copying of the display data of a local workstation or window to a remote workstation or window so that an actual copy of the data is displayed simultaneously on two or more displays, e.g. teledisplay with means for detecting differences between the image stored in the host and the images displayed on the remote displays
    • 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/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • 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
    • 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
    • G06F3/04842—Selection of displayed objects or displayed text elements
    • 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
    • G06F3/04845—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 for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • 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/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text
    • 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/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/1423—Digital output to display device ; Cooperation and interconnection of the display device with other functional units controlling a plurality of local displays, e.g. CRT and flat panel display
    • 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/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/1454—Digital output to display device ; Cooperation and interconnection of the display device with other functional units involving copying of the display data of a local workstation or window to a remote workstation or window so that an actual copy of the data is displayed simultaneously on two or more displays, e.g. teledisplay
    • 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/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/147—Digital output to display device ; Cooperation and interconnection of the display device with other functional units using display panels
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G09G5/12—Synchronisation between the display unit and other units, e.g. other display units, video-disc players
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G5/00—Control arrangements or circuits for visual indicators common to cathode-ray tube indicators and other visual indicators
    • G09G5/14—Display of multiple viewports
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L65/00—Network arrangements, protocols or services for supporting real-time applications in data packet communication
    • H04L65/40—Support for services or applications
    • H04L65/401—Support for services or applications wherein the services involve a main real-time session and one or more additional parallel real-time or time sensitive sessions, e.g. white board sharing or spawning of a subconference
    • H04L65/4015—Support for services or applications wherein the services involve a main real-time session and one or more additional parallel real-time or time sensitive sessions, e.g. white board sharing or spawning of a subconference where at least one of the additional parallel sessions is real time or time sensitive, e.g. white board sharing, collaboration or spawning of a subconference
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
    • H04L65/00—Network arrangements, protocols or services for supporting real-time applications in data packet communication
    • H04L65/40—Support for services or applications
    • H04L65/403—Arrangements for multi-party communication, e.g. for conferences
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image
    • G09G2340/0442—Handling or displaying different aspect ratios, or changing the aspect ratio
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image
    • G09G2340/045—Zooming at least part of an image, i.e. enlarging it or shrinking it
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image
    • G09G2340/0464—Positioning
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2340/00—Aspects of display data processing
    • G09G2340/04—Changes in size, position or resolution of an image
    • G09G2340/0492—Change of orientation of the displayed image, e.g. upside-down, mirrored
    • G—PHYSICS
    • G09—EDUCATION; CRYPTOGRAPHY; DISPLAY; ADVERTISING; SEALS
    • G09G—ARRANGEMENTS OR CIRCUITS FOR CONTROL OF INDICATING DEVICES USING STATIC MEANS TO PRESENT VARIABLE INFORMATION
    • G09G2354/00—Aspects of interface with display user
    • H—ELECTRICITY
    • H04—ELECTRIC COMMUNICATION TECHNIQUE
    • H04N—PICTORIAL COMMUNICATION, e.g. TELEVISION
    • H04N7/00—Television systems
    • H04N7/14—Systems for two-way working
    • H04N7/15—Conference systems
    • H04N7/155—Conference systems involving storage of or access to video conference sessions

Definitions

  • the present invention relates to the field of display technology, and in particular, to a multi-terminal collaborative display update method and device.
  • the conference collaborative whiteboard has the function of presentation and speech.
  • multiple terminals that join the same conference collaborative whiteboard process can realize the function of following the presentation.
  • each terminal runs a conference collaborative whiteboard application, and a speaker can transfer the content on the terminal he is using to other terminals in the same conference collaborative whiteboard process.
  • follow the terminal other terminals are follow terminals.
  • the application interface of the follower terminal the application interface of the followed terminal can be displayed synchronously, thereby realizing the demonstration follower function in the conference collaboration whiteboard application.
  • Embodiments of the present invention provide a multi-terminal collaborative display update method and device, so as to at least solve the technical problem in the prior art that the viewing angle following effect is not good due to differences in the pixels of the following terminal and the following terminal.
  • a multi-terminal collaborative display update method is provided, the display update method is used to realize the synchronous display of the operation of the first terminal on the second terminal, and the first terminal provides the first collaborative whiteboard application.
  • the second terminal provides a second application interface of the second collaborative whiteboard application for carrying the first 2.
  • a multi-terminal collaborative display update device is also provided, and the display update method is used to realize the synchronous display of the operation of the second terminal by the first terminal, and the first terminal provides the first collaborative whiteboard application the first application interface, the first canvas for carrying the drawing content of the first collaborative whiteboard application, and the first container for carrying the first canvas; the second terminal provides the second application interface of the second collaborative whiteboard application for a second canvas for carrying the drawing content of the second collaborative whiteboard application and a second container for carrying the second canvas; the first length of the first canvas is greater than the length of the first application interface, and the width of the first canvas is greater than that of the first application interface
  • the width of the multi-terminal collaborative display updating device includes: a display module for the first terminal to display the first application interface of the first collaborative whiteboard application, wherein the first collaborative whiteboard application and the second collaborative whiteboard application of the second terminal are in collaborative mode, and the second terminal displays the second application interface of the second collaborative whiteboard application; the receiving module is used to receive
  • a computer storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor and executing any one of the above method steps.
  • an intelligent interactive tablet including: a processor and a memory; wherein, the memory stores a computer program, and the computer program is adapted to be loaded by the processor and execute any of the above methods step.
  • the first terminal displays the first application interface of the first collaborative whiteboard application, wherein the first collaborative whiteboard application and the second collaborative whiteboard application of the second terminal are in a collaborative mode, and the second terminal displays the second collaborative whiteboard application.
  • a second application interface of the collaborative whiteboard application receiving control parameters sent by the second terminal, wherein the control parameters are generated when the second terminal receives a control operation on the second application interface; the first terminal updates the first application interface based on the control parameters content, wherein the confirmation control operation is a moving operation, the first canvas moves according to the control parameters, and when the first canvas and the first application interface are overlapped in the same direction, the first terminal rewrites the content in the first canvas render.
  • FIG. 1 is an exemplary schematic diagram of a 2-fold canvas provided according to an embodiment of the present application.
  • FIG. 2 is a flowchart of a multi-terminal collaborative display update method according to an embodiment of the present application
  • 3a is an exemplary schematic diagram of a canvas edge and a viewport edge according to an embodiment of the present application
  • Fig. 3b is another exemplary schematic diagram of a canvas edge and a viewport edge according to an embodiment of the present application
  • FIG. 4 is an exemplary schematic diagram before a canvas is moved according to an embodiment of the present application.
  • FIG. 5 is an exemplary schematic diagram after a canvas is moved according to an embodiment of the present application.
  • FIG. 6 is a schematic diagram of judging whether the edge of the canvas and the edge of the application interface overlap according to an embodiment of the present application
  • FIG. 7a is a schematic diagram of scaling according to an origin according to an embodiment of the present application.
  • Fig. 7b is another schematic diagram of scaling according to the origin according to an embodiment of the present application.
  • FIG. 8a is a schematic diagram of scaling according to a target point according to an embodiment of the present application.
  • Fig. 8b is another schematic diagram of scaling according to a target point according to an embodiment of the present application.
  • FIG. 9 is a schematic diagram of a writing handwriting consisting of a plurality of dots according to an embodiment of the present application.
  • FIG. 10 is a schematic diagram of a multi-terminal collaborative display updating apparatus according to an embodiment of the present invention.
  • FIG. 11 is a schematic diagram of an intelligent interactive tablet according to an embodiment of the present invention.
  • the first terminal and the second terminal are used for description. Both the first terminal and the second terminal run a collaborative whiteboard application to realize synchronous display between the first terminal and the second terminal.
  • the second terminal is used as a follower terminal and the first terminal is used as a follower terminal for illustration, and there may be one or more first terminals.
  • the second terminal may be a terminal used by a conference presenter
  • the first terminal may be a terminal used by a viewer
  • the first terminal can be displayed synchronously with the second terminal.
  • both the collaborative whiteboard applications run by the first terminal and the second terminal can implement a web drawing function
  • the canvas is an area in the web drawing application for carrying drawing content.
  • the canvas can be the browser html canvas tag
  • canvas is a common tag in browser html, and this tag can be well rendered on the browser.
  • the chrome kernel is used as the carrier to achieve cross-platform effects.
  • the container uses the div tag, and the absolute positioning of the browser is used to modify the offset value in real time to achieve the effect of canvas movement.
  • the canvas carries the drawing content of the whiteboard application.
  • the canvas is covered with a transparent layer, and the transparent layer has a toolbar. When you click the toolbar tool to operate, it is reflected in the change of the content on the canvas.
  • the container is used to carry the canvas, and the movement of the canvas is essentially the movement of the container.
  • the offset from the viewport changes. Specifically, it may include changes in horizontal offset and vertical offset.
  • the application interface of the collaborative whiteboard application is the viewport.
  • the viewport is an area on the screen of the terminal that can be used to display the web drawing application. It is a rectangular area related to the device.
  • the coordinate unit is the "pixel" related to the device.
  • the second terminal can use multiple canvases in the collaborative whiteboard application (that is, the size of the canvas is multiple times that of the application interface), and the user can use multiple canvases in the collaborative whiteboard application.
  • Various operations are performed on the second terminal, such as panning, stretching, writing, etc., and the first terminal needs to follow these operations to realize synchronous display with the second terminal.
  • a canvas with the same size as the application interface single canvas
  • the position of each point needs to be recalculated, and the content on the canvas needs to be redrawn to achieve the canvas extension function. .
  • this embodiment proposes a multi-terminal collaborative display update method.
  • the first canvas of the terminal is a double canvas
  • FIG. 1 is an example schematic diagram of a double canvas provided by an embodiment of the present application.
  • the length of the first canvas is a multiple of the length of the second application interface
  • the width of the first canvas is also a multiple of the width of the second application interface.
  • container represents the first container and is used to carry the first canvas
  • view represents the first application interface, that is, the size of the entire screen that the user can see.
  • the width of the container is canvasWidth and the height is canvasHeight.
  • canvasWidth also represents the width of the canvas, which is twice the width of the view.
  • canvasHeight also represents the height of the canvas, which is twice the height of the view.
  • clientWidth is equal to the width of the view
  • clientHeight is equal to the height of the view
  • the view is centered in the center of the container.
  • the offset is the offset value of the top and left of the container to achieve the effect of canvas movement. This means that when you move the canvas content, you will see the movement of the canvas in the view, but the view does not actually change, but the underlying container changes.
  • FIG. 2 is a flowchart of a multi-terminal collaborative display update method according to an embodiment of the present application.
  • the display update method is used to realize the synchronous display of the operation of the first terminal on the second terminal, and the first terminal provides the first collaborative whiteboard application a first application interface, a first canvas for carrying the drawing content of the first collaborative whiteboard application, and a first container for carrying the first canvas; the second terminal provides a second application interface of the second collaborative whiteboard application for carrying The second canvas for the drawing content of the second collaborative whiteboard application and the second container for carrying the second canvas; the first length of the first canvas is greater than the length of the first application interface, and the width of the first canvas is greater than that of the first application interface.
  • the multi-terminal collaborative display update method includes:
  • Step S202 the first terminal displays the first application interface of the first collaborative whiteboard application, wherein the first collaborative whiteboard application and the second collaborative whiteboard application of the second terminal are in a collaborative mode, and the second terminal displays the second collaborative whiteboard application.
  • the second application interface the first terminal displays the first application interface of the first collaborative whiteboard application, wherein the first collaborative whiteboard application and the second collaborative whiteboard application of the second terminal are in a collaborative mode, and the second terminal displays the second collaborative whiteboard application.
  • the above-mentioned first terminal and the second terminal may be intelligent devices having a human-computer interaction interface, such as a mobile phone, a tablet computer, an intelligent interactive tablet, and the like.
  • the first terminal and the second terminal are in the collaborative mode, which is used to indicate that one of the first terminal and the second terminal acts as a followed terminal and the other acts as a follower terminal, and the contents displayed on the collaborative whiteboard application interface of the two are the same. That is, any display on the collaborative whiteboard interface of the followed terminal will be displayed on the collaborative whiteboard interface of the following terminal.
  • a multimedia content is displayed on the application interface of the collaborative whiteboard application of the followed terminal, and the same multimedia content is displayed on the application interface of the collaborative whiteboard application of the following terminal; for another example, on the application interface of the collaborative whiteboard application of the followed terminal Performing a certain operation causes the application interface to change, and the same change occurs on the application interface of the collaborative whiteboard application that follows the terminal.
  • the second terminal is a followed terminal
  • the first terminal is a following terminal.
  • a user as a presenter can play multimedia content on his own conference whiteboard (ie, on the second terminal), and share the displayed content on the conference whiteboard with Other viewing users' conference whiteboards (ie, the above-mentioned first terminal), so that the display interfaces of other viewing users' conference whiteboards can simultaneously display the same multimedia content.
  • a smart device serving as a follower terminal can also serve as a follower terminal, and a smart device serving as a follower terminal can also serve as a follower terminal.
  • the definitions of the first terminal and the second terminal are based on the current The presentation status of the smart device is determined.
  • Step S204 Receive control parameters sent by the second terminal, where the control parameters are generated when the second terminal receives a control operation on the second application interface.
  • the second terminal performs control operations on the second application interface to realize changes and adjustments of the presentation screen, for example, panning, zooming, and writing on the screen currently being presented by the second application interface.
  • the second terminal When the second terminal receives the control operation, the second application interface will change corresponding to the control operation, and these change parameters are the above-mentioned control parameters.
  • the second terminal When the second terminal receives the control operation on the second application interface, it sends the generated control parameters to the first terminal, and the first terminal can receive the above-mentioned control parameters.
  • the control parameter can be used to adjust the content of the first application interface and the second application interface to be consistent.
  • the control parameter may be a coordinate parameter.
  • the user performs a translation operation on the current screen on the second application interface on the second terminal as the followed terminal, and the second terminal generates the coordinate parameter according to the coordinate information of the screen translation and sends it to the follower terminal.
  • the first terminal of the terminal The first terminal of the terminal.
  • Step S206 the first terminal updates the content of the first application interface based on the control parameters, wherein, confirming that the control operation is a moving operation, and the first canvas moves according to the control parameters, when the first canvas and the first application interface overlap in the same direction. , the first terminal re-renders the content in the first canvas.
  • the first terminal updates the content of the first application interface according to the control parameter, and actually may adjust the first canvas according to the control parameter, so as to achieve the effect of updating the content of the first application interface.
  • the first terminal responds to the first canvas according to the control parameters; if the operation on the second application interface is a zooming operation, the first terminal responds to the first canvas according to the control parameters The canvas is zoomed; if the operation on the second application interface is a writing operation, the first terminal generates corresponding writing handwriting on the first canvas according to the control parameter.
  • the second application interface moves according to the moving operation and sends the control parameters to the first terminal, and the first canvas of the first terminal moves according to the control parameters.
  • the moving operation may be that the user drags the second application interface through a finger, a touch pen, or an external control device (eg, a mouse).
  • the edges of the first canvas and the first application interface do not overlap.
  • the edge of the first application interface will not overlap with the edge of the first canvas, the effect is equivalent to the first application interface moving on the first canvas, and the content rendered on the first canvas meets the needs of the movement, so there is no need to re- render.
  • the first canvas is overlapped with a certain edge of the first application interface. Still as shown in Figure 1, taking the first canvas moving to the right as an example, when the distance that the first canvas moves to the right reaches the current left, the right edge of the first canvas overlaps the right edge of the first application interface, and at this time When continuing to move the first canvas to the right, since the first canvas can no longer move to the right, but in order to follow the movement of the second canvas, the content on the first canvas needs to be re-rendered to achieve sensory realization The first canvas continues to move in effect.
  • the first canvas includes a first edge and a third edge
  • the first application interface includes a second edge and a fourth edge
  • the first edge is parallel to the third edge
  • the second edge is parallel to the fourth edge
  • the first edge and the second edge belong to the same direction.
  • the first terminal displays the first application interface of the first collaborative whiteboard application, wherein the first collaborative whiteboard application and the second collaborative whiteboard application of the second terminal are in a collaborative mode, and the second collaborative whiteboard application is in a collaborative mode.
  • the terminal displays the second application interface of the second collaborative whiteboard application; receives control parameters sent by the second terminal, wherein the control parameters are generated when the second terminal receives a control operation on the second application interface; the first terminal updates based on the control parameters The content of the first application interface, wherein it is confirmed that the control operation is a moving operation, the first canvas moves according to the control parameters, and when the edges of the first canvas and the first application interface in the same direction overlap, the first terminal responds The content is re-rendered.
  • multiple canvases are set in the collaborative whiteboard application of the follower terminal, so that when the follower terminal follows the movement of the followed terminal, it is not necessary to clear the content on the canvas every time the canvas is moved.
  • the canvas is redrawn, and when the side of the canvas and the application interface in the same direction overlaps in the collaborative whiteboard application of the follower terminal, the content in the canvas of the collaborative whiteboard application is re-rendered, so that the followed terminal is on the collaborative whiteboard.
  • the follower terminal can follow the effect, which solves the technical problem that the follower terminal is difficult to follow when the canvas of the follower terminal expands infinitely in the prior art.
  • the first canvas includes a parallel first edge and a third edge
  • the first application interface includes a parallel second edge and a fourth edge
  • the first edge and the second edge are located on the same side
  • the first edge and the second edge are located on the same side.
  • the third edge is on the same side as the fourth edge
  • the first canvas includes at least a first area close to the third edge and a second area close to the first edge, the first area and the second area are adjacent, and the first area is drawn with the first area content, the second area is drawn with the second content, and the movement direction of the move operation is from the side where the first edge is located to the side where the third edge is located.
  • the first edge coincides with the second edge, move the first canvas in the opposite direction of the move operation to the position where the third edge coincides with the fourth edge, and trigger the rendering of the first area as the second content and the rendering of the second area for the third content.
  • first edge and the third edge can also be the edges on the upper and lower sides, and similarly, the second edge and the fourth edge can also be the edges on the upper and lower sides.
  • the canvas can be moved horizontally, vertically, or at a certain angle with the application interface.
  • the first container container includes a first area A close to the third edge and a second area B close to the first edge.
  • the first area A and the second area B respectively represent a 1-fold canvas, and the combination is a 2-fold canvas.
  • the first area Corresponding first content and second content are drawn on A and the second area B, respectively.
  • FIG. 4 also includes an area C, and the content of the area C is the above-mentioned third content, but at this time, C is virtual and is not displayed, and is only for cooperative display.
  • the moving direction of the moving operation is to move from the side where the first edge is located to the side where the third edge is located, that is, the moving direction is to move the first container to the right. If the second edge of the application interface view coincides, there is only movement of the canvas and no rendering.
  • corresponding content is displayed in the first application interface view according to the moving offset.
  • the first canvas When the first canvas is controlled to move from the first edge direction to the third edge direction, when the first edge coincides with the second edge, the content of the canvas will be re-rendered, and the canvas will move in the opposite direction of the moving direction, and Move to where the third edge coincides with the fourth edge.
  • the above process will be repeated, that is, when the first edge does not touch the second edge, the canvas content will not be re-rendered, and when the two touch, the canvas content will be re-rendered and moved along the Move in the opposite direction to the position where the third edge coincides with the fourth edge.
  • the canvas redraw operation is triggered. Specifically, the first canvas moves in the opposite direction until the third edge coincides with the fourth edge.
  • the B area is the updated first area
  • the C area is the updated second area, that is, the first area displays the B area
  • the second area displays the third content in the C area, that is, at this time, the previous AB canvas content will be re-rendered to the BC canvas content. Since the canvas size is small, the redrawing speed is faster. Therefore, For the user, they have no sense of this redraw, and the view at this time becomes the content of area B and area C.
  • the view still displays the content in BC until the first edge. and the second edge collides again. It can be further understood that only areas A and B are always included in the whole process. After re-rendering, the content of area A is redrawn as the content of area B, and the content of area B is redrawn as the content of area C.
  • the above solution takes the first canvas as an example to illustrate how to re-render when the left edge of the first canvas and the first application interface overlap, and when the first canvas is moved to the left, the first canvas and the right edge of the first application interface are re-rendered.
  • the edges overlap or when the first canvas is moved up so that the bottom edge of the first canvas and the first application interface overlap, or when the first canvas is moved down so that the top edge of the first canvas and the first application interface occurs
  • the method is similar, and will not be repeated here.
  • the above method further includes: at least one of the first terminal and the second application interface. Terminals join the same virtual room.
  • the above virtual room is used to represent a group in the collaborative whiteboard application, and multiple terminals that join the same virtual room are in the same group.
  • a virtual room can be created, and then a virtual room ID of the virtual room is generated, and other terminals can join the virtual room through the virtual room ID.
  • the virtual room identifier can be a virtual room number or a virtual room QR code, etc.
  • Other terminals can join the virtual room by entering the virtual room number or scanning the virtual room QR code.
  • the terminal in the virtual room can set the terminal identity, for example, can be set as a follower terminal or a followed terminal.
  • a terminal starts the collaborative whiteboard application to generate a conference room (ie, the above-mentioned virtual room), and the collaborative whiteboard application generates a corresponding QR code for its conference room.
  • the terminal shares the generated QR code with other objects that need to participate in the conference, and other objects use their respective terminals to scan the QR code to join the above-mentioned conference room, so that many participating terminals join a common conference Room.
  • the synchronous display of the second terminal to the first terminal can be started.
  • control parameter is generated when the second terminal receives a control operation on the second application interface, including: the second terminal receives a control operation performed on the second application interface, wherein the second canvas Change according to the control operation; the second terminal determines the change parameter generated by the second canvas according to the change of the control operation as the control parameter; the second terminal sends the control parameter to the first terminal.
  • the speaker performs a control operation on the second application interface of the second terminal, and the second collaborative whiteboard application executes the control operation to change the second application interface.
  • the control operation is to move operation, the second collaborative whiteboard application controls the movement of the second canvas according to the control operation; the control operation is a zoom operation, and the second collaborative whiteboard application controls the second canvas to zoom according to the control operation; the control operation is a writing operation, and the second collaborative whiteboard application is in the first The corresponding handwriting is generated on the second canvas.
  • the second collaborative whiteboard application not only controls the second application interface to change in response to the control operation according to the control operation, but also sends the change parameters to the first terminal as control parameters, so that the first terminal can Changes of the second application interface are followed.
  • control operation is a move operation
  • control parameter may be the position offset generated by the second canvas when the control operation is performed
  • the control operation is a zoom operation
  • the control parameter may be that the second collaborative whiteboard application controls the second canvas according to the control operation
  • the control operation is a writing operation
  • the control parameter can be the handwriting data when the second collaborative whiteboard application generates the corresponding handwriting on the second canvas.
  • the first terminal updates the content of the first application interface based on the control parameter
  • the method includes: the first terminal updates the control parameter according to the first resolution parameter and the second resolution parameter; the first terminal updates the content of the first application interface based on the updated control parameter.
  • the first resolution parameter of the first application interface is used to represent the number of pixels in the vertical and horizontal directions of the first application interface
  • the second resolution of the second application interface is used to represent the pixel points of the second application interface in the vertical and horizontal directions. , all in px.
  • the first collaborative whiteboard application can directly control the first application interface according to the control parameters, so that the first application interface follows the second application interface.
  • the first terminal In the case where the resolutions of the first application interface and the second application interface are different, if the first collaborative whiteboard directly controls the first application interface by using the obtained control parameters, because the resolutions of the two application interfaces are different, The resulting control effect is not the same as the display effect of the second application interface, so the first terminal also updates the control parameters according to the first resolution of the first application interface and the second resolution of the second application interface, and based on the update The latter parameter updates the content of the first application interface.
  • control parameters are adjusted to be control parameters matching the first resolution parameters of the first display interface, and the first terminal acts as a follower terminal, according to the first resolution parameter and the second resolution parameter.
  • the control parameters provided by the second terminal are updated, so that the first terminal can adjust the display content in the first application interface according to the updated control parameters, thereby enabling the first application interface to be consistent with the display content in the second application interface .
  • the first terminal adjusts the first canvas based on the control parameters matching the first resolution of its first application interface, so as to realize the first application interface of the first terminal as the follower terminal and the second terminal as the follower terminal.
  • the first terminal updates the control parameters according to the first resolution parameter and the second resolution parameter, including: the first terminal reads the second resolution parameter sent by the second terminal; the first The terminal obtains the ratio of the first resolution parameter and the second resolution parameter; the first terminal multiplies the ratio by the control parameter to obtain the updated control parameter.
  • the ratio of the first resolution parameter to the second resolution parameter includes the ratio of the height of the two and the ratio of the width of the two.
  • control operation is a writing operation
  • control parameter is a writing point generated by the writing operation
  • the width in the second resolution parameter is A_Width
  • the width in the first resolution parameter is B_Width
  • the second application The coordinate information of a certain writing point on the interface is (X A , Y A ), then the coordinate information (X B , Y B ) of the corrected image point in the first application interface is:
  • X B is the abscissa of the updated icon of the first application interface
  • Y B is the ordinate of the updated icon of the first application interface
  • B_Width/A_Width is the ratio of the width of the first application interface to the second application interface.
  • the first terminal displays the same content as the second application interface of the second terminal in the first application interface
  • the second terminal generates control parameters according to the user's control operation on the second application interface
  • uses the control parameters Sent to the first terminal after the first terminal updates the control parameters according to the first resolution parameter and the second resolution parameter, and adjusts the content of the first application interface based on the updated control parameters.
  • the first terminal which is a follower terminal, obtains control parameters matching the first application interface by updating the original control parameters sent by the first terminal according to the respective resolution parameters, thereby realizing the integration of the application interfaces of the first terminal and the second terminal.
  • the display content can always be consistent, thereby realizing equal-proportional viewing angle following between the following terminal and the following terminal, and solving the problem of poor viewing angle following effect caused by different pixels of the following terminal and the following terminal.
  • control parameters include: a starting coordinate parameter and a movement increment, wherein the starting coordinate includes: the coordinates of the upper left corner of the first application interface and the coordinates of the absolute origin on the first canvas.
  • the first deviation in the horizontal direction and the second deviation in the vertical direction, and the movement increment includes: the first increment generated in the horizontal direction and the first increment generated in the vertical direction when the second canvas moves in the second application interface.
  • the first terminal updates the first offset through the first increment; the first terminal updates the second offset through the second increment; the horizontal offset of the first canvas is determined according to the first offset and the width of the first application interface; The deviation and the height of the first application interface determine the vertical offset of the first canvas; control the first canvas to move in the horizontal direction according to the horizontal offset, and move in the vertical direction with the vertical offset.
  • the absolute origin on the first canvas may be a point at the upper left corner of the first canvas, that is, a point at the upper left corner of the first container.
  • the starting coordinate is the deviation between the upper left corner of the first canvas and the origin before the movement, including the first deviation in the horizontal direction and the second deviation in the vertical direction. Increments in both horizontal and vertical directions when two canvases are generated.
  • the starting coordinates (including the first deviation and the second deviation) of the first canvas are updated according to the increments in the horizontal and vertical directions generated when the second application interface moves the second canvas , and then determine the actual offset (including the horizontal offset and the vertical offset) of the first canvas based on the updated coordinates, and control the first canvas to move according to the actual offset, so as to realize the first application interface pairing The following of the canvas movement operation in the second application interface.
  • SinglePanStart indicates that the mouse (or touch) movement is triggered to start
  • SinglePanMove indicates that the mouse (or touch) movement is triggered
  • SinglePanEnd indicates that the mouse movement (or touch) ends. The event must trigger SinglePanStart, then trigger SinglePanMove, and finally end with SinglePanEnd.
  • drawOriginX2 drawOriginX1+dx
  • drawOriginY2 drawOriginY1+dy
  • drawOrigin(drawOriginX1, drawOriginY1) indicates the position of the upper left corner of the first application interface from the origin (and the above-mentioned starting coordinates).
  • drawOriginX2, drawOriginY2 When a new drawOrigin (drawOriginX2, drawOriginY2) is obtained, the offset of the canvas is recalculated.
  • determining the horizontal offset of the first canvas according to the first deviation and the width of the first application interface includes: when the updated first deviation is greater than 0, determining the horizontal offset is the first remainder of the updated first deviation divided by the width of the first application interface; when the updated first deviation is less than 0, obtain the updated first deviation divided by the width of the first application interface.
  • the second remainder determining that the horizontal offset is the sum of the width of the first application interface and the second remainder; determining the vertical offset of the first canvas according to the second deviation and the height of the first application interface, including: updating When the updated second deviation is greater than 0, the vertical offset is determined as the third remainder of dividing the updated second deviation by the height of the first application interface; when the updated second deviation is less than 0, Obtain the fourth remainder of dividing the updated second deviation by the height of the first application interface, and determine the vertical offset as the sum of the height of the first application interface and the fourth remainder.
  • the offset calculation of the first canvas is performed.
  • baseWidth is used to represent the width of the first application interface
  • baseHeight is used to represent the height of the first application interface
  • left is used to represent the horizontal offset of the first canvas
  • top is used to represent the vertical offset of the first canvas.
  • left and top are the offset values of the actual viewing angle of the canvas tag.
  • the abscissa of any corner of the first canvas is the same as the abscissa of any corner of the first application interface, or the ordinate of any corner of the first canvas is the same as the ordinate of any corner of the first canvas.
  • the vertical coordinates of any corner of an application interface are the same, it is determined that the first canvas and the side of the first application interface in the same direction overlap.
  • the abscissa of any corner of the first canvas is the same as the abscissa of any corner of the first application interface, or the ordinate of any corner of the first canvas is the same as that of any corner of the first application interface. If the ordinate of one corner is the same, it means that one side of the first canvas and one side of the first application interface overlap.
  • the upper left corner of the first canvas 30 is the origin (0, 0), and the coordinates of the upper left corner of the first application interface 31 are (drawOriginPointX, drawOriginPointY).
  • drawOriginPointX is 0, that is, the abscissas of the two are the same; when the right edge of the first canvas 30 and the right edge of the first application interface 31 overlap, the abscissas of the two are also the same; and when the first canvas 30 When the right edge coincides with the upper edge or the lower edge of the first application interface 31, the ordinates of the two are the same.
  • the width of the first canvas is a preset multiple of the width of the first application interface
  • the height of the first canvas is a preset multiple of the height of the first application interface
  • the preset multiple is greater than 1 and less than 3.
  • the application interface is the area on the screen for displaying the collaborative whiteboard application. If the first canvas is lower, for example, a canvas with a size of 5 times the application interface is used, and the application interface is located in the center of the canvas. By moving the canvas, the offset is calculated according to the The offset enables the application interface to display content at different positions on the canvas, thereby realizing the function of canvas expansion. However, to achieve the expansion of the canvas size, it is necessary to increase the size of the canvas. When rendering or drawing each time, all the contents on the infinite canvas need to be cleared and re-rendered. As the canvas becomes larger, the area for clearing and redrawing increases, resulting in When the canvas redraws the graphics data, the delay is large and the freeze phenomenon is obvious.
  • the above scheme selects a canvas with a multiple size between 1 and 3, so that it is not necessary to re-render the mobile part every time, and it will not make the area of the canvas excessively large during redrawing and cause excessive delay. Therefore, Canvas between 1 and 3 times has a better experience in use.
  • the width of the first canvas is twice the width of the first application interface
  • the height of the first canvas is twice the height of the first application interface
  • the first canvas is a double canvas, that is, the width of the first canvas is twice the width of the first application interface, and the height of the first canvas is also twice the height of the first application interface.
  • edges of the first canvas and the first application interface in the same direction do not overlap, re-rendering of the content in the first canvas is prohibited.
  • the control parameters include: a zoom ratio parameter and an offset parameter
  • the offset parameter is the coordinates of the target point and the upper left corner of the second canvas.
  • the first terminal updates the content of the first application interface based on the control parameters, including: controlling the first canvas to scale based on the origin according to the updated scaling parameters, to obtain the first canvas scaled based on the origin; based on the scaling parameters and the offset parameter to determine the adjusted offset parameter; control the first canvas after scaling based on the origin to move according to the adjusted offset parameter, and obtain the first canvas after scaling based on the target point; Elements in a canvas are re-rendered to update the content of the first application interface.
  • the above-mentioned target point is any image point on the second display interface.
  • the presenter user clicks a certain point on the second application interface with the mouse, and performs a zooming operation based on the point, this point is the zooming operation.
  • the target point of the operation is the deviation between the coordinates of the target point and the coordinates of the upper left corner of the second canvas, including two values in the horizontal and vertical directions, and is usually related to the size of the second canvas.
  • the width and height of the second canvas are x and y
  • the offset parameter is (-x, -y).
  • the zoom ratio parameter indicates the zoom ratio of the screen after the zoom operation compared to before the operation.
  • the initial value of the zoom ratio parameter is 1, which means that the magnification of the image displayed on the interface after the zoom operation is the same as that of the interface image without the operation.
  • the offset parameters include the offset value in the X direction (that is, the deviation of the abscissa of the target electrical energy from the origin) and the offset value in the Y direction (that is, the deviation of the ordinate of the target point from the origin).
  • the offset parameter is 0.
  • the second canvas 40 has a second application interface 41, and the dotted area is the image area before the zoom-in operation.
  • zoom in from the interface origin to the lower right corner the interface origin position in the upper left corner remains unchanged, and other pixels are enlarged according to the scaling parameter, so that the image area area becomes farther and farther away from the interface origin as it zooms in.
  • the second application interface is filled with the zoomed second canvas 40 to realize image zooming.
  • the presenter performs a zoom-in operation on the second application interface 50 based on the target point A
  • the target point A is a pixel point on the second application interface
  • the second application interface The scaling parameter is curScale
  • the offset parameter of the target point A includes the offset value canvasTranslateOffsetX in the X direction and the offset value canvasTranslateOffsetY in the Y direction.
  • the curScale is incremented by 0.1 times each time, and the minimum and increment values are both 0.1 according to 0.1, 0.2..., 1, 1.1, 1.2, 1.3... .
  • the updated scaling parameter curScale1 for the first terminal is obtained according to the width A_Width of the second resolution parameter and the width B_Width of the first resolution parameter.
  • curScale1 curScale*(B_Width/A_Width);
  • canvasTranslateOffsetX1 canvasTranslateOffsetX*(B_Width/A_Width);
  • canvasTranslateOffsetY1 canvasTranslateOffsetY*(B_Width/A_Width);
  • determining the adjusted offset parameter based on the scaling parameter and the offset parameter includes: acquiring the relative coordinates of the target point in the second application interface; projecting the target point to the second application interface based on the offset parameter Single container, the absolute coordinates of the target point on the single container are obtained; the absolute coordinates are subtracted from the sum of the relative coordinates and the offset coordinates of the second application interface to obtain the first intermediate value, wherein the offset of the second application interface
  • the coordinates are used to represent the difference between the coordinates of the upper left corner of the second application interface and the coordinates of the origin on the second canvas; the second intermediate value is obtained by multiplying the difference between the scaling parameter and 1 by the absolute coordinates; the first intermediate value is subtracted from the second intermediate value. Intermediate value to get the adjusted offset parameter.
  • the relative coordinates of the above-mentioned target point in the second application interface are the coordinates obtained directly according to the zoom operation.
  • the coordinates are the above relative coordinates.
  • the single-size container described above is used to represent a 1-times container, that is, a container of its original size without scaling. Since the scaling operation may still be done before when the current scaling operation is performed, it is necessary to map the offset parameter to the single-fold container for calculation.
  • the position when the zoom operation is performed on the second application interface is a relative position of (clickX, clickY), and the coordinate difference between the upper left corner of the second application interface and the origin in the second canvas is ( drawOriginPointX, drawOriginPointY), the above offset parameter is canvasTranslateOffsetX, then projecting the target point to the single container based on the offset parameter can be:
  • posX (X1+drawOriginPointX+canvasTranslateOffset)/curScale
  • (posX, posY) are absolute coordinates
  • curScale is the scaling ratio of the first canvas before this scaling operation
  • canvasTranslateOffsetX:2 (curScale-1)*posX-(clickX+drawOriginPointX-posX);
  • canvasTranslateOffsetY2 (curScale-1)*posY-(clickY+drawOriginPointY-posY;
  • clickX+drawOriginPointX-posX constitutes the first intermediate value
  • (curScale-1)*posY constitutes the second intermediate value
  • control parameters include: coordinate parameters of the writing handwriting
  • the first terminal updates the content of the first application interface based on the control parameters, including: the first terminal according to The coordinate parameters of the writing handwriting generate the writing handwriting, wherein the coordinate parameters of the writing handwriting include the coordinate parameters of the writing point used to form the writing handwriting, and each time the second terminal generates a new writing point, all the generated writing handwriting of the current writing handwriting is generated.
  • the coordinate parameters of the point are sent to the first terminal.
  • the above operation of adding elements may be an operation of the presenter writing on the second display interface.
  • the data written by the presenter with a brush on the second display interface is defined as being composed of multiple points (ie, writing points).
  • the data written by the presenter is composed of multiple points. composed of lines.
  • the points that form the writing line continue to increase, and the coordinate parameters of each writing point are transmitted to the first terminal in real time, and the first terminal can draw after receiving the coordinate parameters of each writing point, and the same result is obtained.
  • the writing handwriting of realizes the follow-up of the operation of adding elements.
  • the first terminal according to the width A_Width and the second resolution in the first resolution parameter
  • the width B_Width in the parameters updates the received control parameters (including the coordinates of the interface origin, the stretching ratio, and the offset parameters). Through the calculation, the scaling and translation of the brush line can be realized, and the proportional viewing angle of the brush writing is realized. Effect.
  • the canvas technology of the web is used to implement the brush writing function, and the data structure is defined as follows: Id: the unique identifier used to represent the element; x: the absolute horizontal coordinate of the element on the drawing board; y: the element in the Absolute vertical coordinates on the drawing board; width: the width of the element; height: the height of the element; type: the type of the element, such as a brush; isDeleted: defines whether to delete; Points: defines the points on the drawing board, a line consists of many points .
  • This embodiment implements the proportional viewing angle following (speaker mode) function of multi-terminal cooperation based on the web technology. Only four variables are used for data transmission between the following terminal and the followed terminal to update different resolutions, and the amount of data transmitted is small. , the scheme is lightweight. In the case of no user perception, the infinite perspective follow (speaker mode) function of multi-terminal collaboration is realized on the limited interactive whiteboard, which brings extremely high maintenance. The coupling of layout and writing functions brings extremely high scalability.
  • the first terminal generates writing handwriting according to coordinate parameters of the writing handwriting, including: when the writing handwriting contacts any edge of the first application interface, triggering the first canvas to move to the contacted edge Move in the opposite direction, wherein when the first canvas and the first application interface overlap in the same direction, the first terminal redraws the content in the first canvas.
  • the second application interface when the user writes on the second application interface, when the handwriting touches the boundary of the second application interface, the second application interface will be triggered to move in the opposite direction of the contacted edge, so as to provide the user with greater range of writing.
  • the generated writing handwriting will also touch the edge of the first application interface, and the first canvas will also move in the opposite direction of the contacted edge. That is, although the user does not directly move the second canvas, the writing operation triggers the movement of the second application interface, and the first application interface also needs to follow this operation to move the first canvas.
  • the first terminal redraws the content in the first canvas, and the redrawing steps are the same as the rerendering steps in the foregoing embodiment. It is not repeated here.
  • FIG. 10 is a schematic diagram of a multi-terminal collaborative display updating apparatus according to an embodiment of the present invention. As shown in FIG. 10 , the multi-terminal collaborative display updating apparatus includes:
  • the display module 100 is used for the first terminal to display the first application interface of the first collaborative whiteboard application, wherein the first collaborative whiteboard application and the second collaborative whiteboard application of the second terminal are in a collaborative mode, and the second terminal displays the second collaborative whiteboard application The second application interface of the whiteboard application;
  • a receiving module 102 configured to receive a control parameter sent by the second terminal, wherein the control parameter is generated when the second terminal receives a control operation on the second application interface;
  • the updating module 104 is used for the first terminal to update the content of the first application interface based on the control parameters, wherein the method further includes: a moving module, configured to confirm that the control operation is a moving operation, the first canvas moves according to the control parameters, and when the first canvas is moved When overlapping with the edge of the first application interface in the same direction, the first terminal re-renders the content in the first canvas.
  • a moving module configured to confirm that the control operation is a moving operation, the first canvas moves according to the control parameters, and when the first canvas is moved When overlapping with the edge of the first application interface in the same direction, the first terminal re-renders the content in the first canvas.
  • the first canvas includes a parallel first edge and a third edge
  • the first application interface includes a parallel second edge and a fourth edge
  • the first edge and the second edge are located on the same side
  • the first edge and the second edge are located on the same side.
  • the third edge is on the same side as the fourth edge
  • the first canvas includes at least a first area close to the third edge and a second area close to the first edge, the first area and the second area are adjacent, and the first area is drawn with the first area content, the second area is drawn with the second content, the movement direction of the movement operation is from the side where the first edge is located to the side where the third edge is located
  • the update module includes:
  • the rendering sub-module is used for the first edge to overlap the second edge, move the first canvas to the position where the third edge and the fourth edge overlap in the opposite direction of the movement operation, and trigger the rendering of the first area as the second content , which renders the second area as the third content.
  • the above-mentioned apparatus further includes: an adding module, configured to, before the first terminal displays the same content as the second application interface of the second terminal in the first application interface of the first terminal, at least one The first terminal and the second terminal join the same virtual room.
  • the second terminal receives a control operation performed on the second application interface, wherein the second canvas changes according to the control operation; the second terminal determines a change parameter generated by the second canvas according to the change of the control operation is the control parameter; the second terminal sends the control parameter to the first terminal.
  • the updating module includes:
  • a first update submodule used for the first terminal to update the control parameter according to the first resolution parameter and the second resolution parameter
  • the second update submodule is used for the first terminal to update the content of the first application interface based on the updated control parameters.
  • the first update submodule includes: a reading unit, used by the first terminal to read the second resolution parameter sent by the second terminal; an acquisition unit, used by the first terminal to obtain the first resolution parameter The ratio of the rate parameter and the second resolution parameter; the multiplying module is used for the first terminal to multiply the ratio and the control parameter to obtain the updated control parameter.
  • control parameters include: a starting coordinate parameter and a movement increment, wherein the starting coordinate includes: the coordinates of the upper left corner of the first application interface and the coordinates of the absolute origin on the first canvas.
  • the first deviation in the horizontal direction and the second deviation in the vertical direction, and the movement increment includes: the first increment generated in the horizontal direction and the first increment generated in the vertical direction when the second canvas moves in the second application interface.
  • the moving module includes: a third update submodule for the first terminal to update the first deviation through the first increment; a fourth update submodule for the first terminal to update the second deviation through the second increment;
  • the first determination submodule is used to determine the horizontal offset of the first canvas according to the first deviation and the width of the first application interface;
  • the second determination submodule is used to determine the first canvas according to the second deviation and the height of the first application interface.
  • the first control submodule is used to control the first canvas to move in the horizontal direction according to the horizontal offset, and to move in the vertical direction with the vertical offset.
  • the first determination sub-module includes: a first determination unit, configured to determine the horizontal offset as the updated first deviation divided by The first remainder of the width of the first application interface; the first obtaining unit is configured to obtain the second difference of the width of the first application interface divided by the updated first deviation when the updated first deviation is less than 0; The remainder, the horizontal offset is determined as the sum of the width of the first application interface and the second remainder; the second determination sub-module includes: a second determination unit, used for when the updated second deviation is greater than 0, The vertical offset is determined to be the third remainder obtained by dividing the updated second deviation by the height of the first application interface; the second obtaining unit is configured to obtain the updated second deviation when the updated second deviation is less than 0. The second deviation is divided by the fourth remainder of the height of the first application interface, and the vertical offset is determined as the sum of the height of the first application interface and the fourth remainder.
  • the abscissa of any corner of the first canvas is the same as the abscissa of any corner of the first application interface, or the ordinate of any corner of the first canvas is the same as the ordinate of any corner of the first canvas.
  • the vertical coordinates of any corner of an application interface are the same, it is determined that the first canvas and the side of the first application interface in the same direction overlap.
  • the width of the first canvas is a preset multiple of the width of the first application interface
  • the height of the first canvas is a preset multiple of the height of the first application interface
  • the preset multiple is greater than 1 and less than 3.
  • the width of the first canvas is twice the width of the first application interface
  • the height of the first canvas is twice the height of the first application interface
  • edges of the first canvas and the first application interface in the same direction do not overlap, re-rendering of the content in the first canvas is prohibited.
  • the control parameters include: a zoom ratio parameter and an offset parameter
  • the offset parameter is the coordinates of the target point and the upper left corner of the second canvas.
  • the update module includes: a second control sub-module for controlling the first canvas to be scaled based on the origin according to the updated scaling ratio parameter, to obtain the first canvas scaled based on the origin; a third determination sub-module for Determine the adjusted offset parameter based on the scaling ratio parameter and the offset parameter; the moving sub-module is used to control the first canvas scaled based on the origin to move according to the adjusted offset parameter, and obtain the first canvas scaled based on the target point.
  • Canvas a rendering submodule for re-rendering the elements in the first canvas after scaling based on the target point, so as to update the content of the first application interface.
  • the third determination sub-module includes: a third acquisition unit for acquiring the relative coordinates of the target point in the second application interface; a projection unit for projecting the target point to the A single container, to obtain the absolute coordinates of the target point on the single container; the first operation unit is used to subtract the absolute coordinates from the sum of the relative coordinates and the offset coordinates of the second application interface to obtain the first intermediate value, wherein, The offset coordinates of the second application interface are used to represent the difference between the coordinates of the upper left corner of the second application interface and the coordinates of the origin on the second canvas; the second operation unit is used to multiply the absolute coordinates by the difference between the scaling parameter and 1, obtaining the second intermediate value; the third operation unit is used for subtracting the first intermediate value from the second intermediate value to obtain the adjusted offset parameter.
  • control parameters include: coordinate parameters of the writing handwriting
  • the updating module includes: a generating sub-module for the first terminal to generate according to the coordinate parameters of the writing handwriting Writing handwriting, wherein the coordinate parameters of the writing handwriting include the coordinate parameters of the writing point used to form the writing handwriting, and every time a new writing point is generated by the second terminal, the coordinate parameters of all the generated writing points of the current writing handwriting are sent to the first terminal.
  • the generating sub-module includes: a triggering unit for
  • the first canvas When the handwriting touches any edge of the first application interface, the first canvas is triggered to move in the opposite direction of the contacted edge, wherein when the first canvas and the edge of the first application interface in the same direction overlap, The first terminal redraws the content in the first canvas.
  • an embodiment of a computer storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor and executing the method steps of any one of Embodiment 1.
  • the first terminal displays the same content as the second display interface of the second terminal on the first display interface, and the second terminal sends control parameters to the first terminal according to the user's control operation on the second display interface , after updating the control parameters according to the first resolution parameter and the second resolution parameter, the first terminal adjusts the content of the first display interface based on the updated control parameters.
  • the first terminal which is a follower terminal, obtains control parameters matching the first terminal by updating the original control parameters sent by the first terminal according to the respective resolution parameters, thereby realizing the display of the display interfaces of the first terminal and the second terminal.
  • the image can always be consistent, thereby realizing equal-proportional viewing angle tracking between the following terminal and the following terminal, and solving the problem of poor viewing angle following effect caused by different pixels of the following terminal and the following terminal.
  • an intelligent interactive tablet including: a processor and a memory; wherein, the memory stores a computer program, and the computer program is adapted to be loaded by the processor and execute the method steps of any one of Embodiment 1.
  • FIG. 11 is a schematic diagram of an intelligent interactive tablet provided by an embodiment of the present application.
  • the intelligent interactive tablet includes the above-mentioned interactive device body and a touch frame.
  • the intelligent interactive tablet 1000 may include: at least one processor 1001 , At least one network interface 1004 , user interface 1003 , memory 1005 , at least one communication bus 1002 .
  • the communication bus 1002 is used to realize the connection and communication between these components.
  • the user interface 1003 may include a display screen (Display) and a camera (Camera), and the optional user interface 1003 may also include a standard wired interface and a wireless interface.
  • Display display screen
  • Camera Camera
  • the optional user interface 1003 may also include a standard wired interface and a wireless interface.
  • the network interface 1004 may optionally include a standard wired interface and a wireless interface (eg, a WI-FI interface).
  • the processor 1001 may include one or more processing cores.
  • the processor 1001 uses various interfaces and lines to connect various parts in the entire intelligent interactive tablet 1000, and by running or executing the instructions, programs, code sets or instruction sets stored in the memory 1005, and calling the data stored in the memory 1005, Execute various functions of the intelligent interactive tablet 1000 and process data.
  • the processor 1001 may adopt at least one of digital signal processing (Digital Signal Processing, DSP), field-programmable gate array (Field-Programmable Gate Array, FPGA), and programmable logic array (Programmable Logic Array, PLA). A hardware form is implemented.
  • DSP Digital Signal Processing
  • FPGA Field-Programmable Gate Array
  • PLA programmable logic array
  • the processor 1001 may integrate one or a combination of a central processing unit (Central Processing Unit, CPU), a graphics processing unit (Graphics Processing Unit, GPU), a modem, and the like.
  • CPU Central Processing Unit
  • GPU Graphics Processing Unit
  • the CPU mainly handles the operating system, user interface, and application programs
  • the GPU is used to render and draw the content that needs to be displayed on the display screen
  • the modem is used to handle wireless communication. It can be understood that, the above-mentioned modem may not be integrated into the processor 1001, but is implemented by a single chip.
  • the memory 1005 may include random access memory (Random Access Memory, RAM), or may include read-only memory (Read-Only Memory).
  • the memory 1005 includes a non-transitory computer-readable storage medium.
  • Memory 1005 may be used to store instructions, programs, codes, sets of codes, or sets of instructions.
  • the memory 1005 may include a stored program area and a stored data area, wherein the stored program area may store instructions for implementing an operating system, instructions for at least one function (such as a touch function, a sound playback function, an image playback function, etc.), Instructions and the like used to implement the above method embodiments; the storage data area may store the data and the like involved in the above method embodiments.
  • the memory 1005 may also be at least one storage device located away from the aforementioned processor 1001 .
  • the memory 1005 as a computer storage medium may include an operating system, a network communication module, a user interface module, and an operation application program of an intelligent interactive tablet.
  • the user interface 1003 is mainly used to provide an input interface for the user and obtain the data input by the user; and the processor 1001 can be used to call the operation application of the smart interactive tablet stored in the memory 1005 program, and specifically perform any one of the operations in Embodiment 1.
  • the disclosed technical content can be implemented in other ways.
  • the device embodiments described above are only illustrative, for example, the division of the units may be a logical function division, and there may be other division methods in actual implementation, for example, multiple units or components may be combined or Integration into another system, or some features can be ignored, or not implemented.
  • the shown or discussed mutual coupling or direct coupling or communication connection may be through some interfaces, indirect coupling or communication connection of units or modules, and may be in electrical or other forms.
  • the units described as separate components may or may not be physically separated, and components shown as units may or may not be physical units, that is, may be located in one place, or may be distributed to multiple units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution in this embodiment.
  • each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically alone, or two or more units may be integrated into one unit.
  • the above-mentioned integrated units may be implemented in the form of hardware, or may be implemented in the form of software functional units.
  • the integrated unit if implemented in the form of a software functional unit and sold or used as an independent product, may be stored in a computer-readable storage medium.
  • the technical solution of the present invention is essentially or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, and the computer software product is stored in a storage medium , including several instructions for causing a computer device (which may be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention.
  • the aforementioned storage medium includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, magnetic disk or optical disk and other media that can store program codes .

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Software Systems (AREA)
  • Computer Hardware Design (AREA)
  • Multimedia (AREA)
  • Computer Networks & Wireless Communication (AREA)
  • Signal Processing (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明公开了一种多端协同的显示更新方法及装置。该方法包括：第一终端显示第一协同白板应用的第一应用界面，其中，第一协同白板应用与第二终端的第二协同白板应用处于协同模式，且第二终端显示第二协同白板应用的第二应用界面；接收第二终端发送的控制参数，其中，控制参数由第二终端接收到对第二应用界面的控制操作时产生；第一终端基于控制参数更新第一应用界面的内容，其中，确认控制操作为移动操作，第一画布根据控制参数移动，当第一画布与第一应用界面在同一方向的边发生重合时，第一终端对第一画布中的内容进行重新渲染。本发明解决了现有技术中被跟随终端的画布无限扩展时，跟随终端难以跟随的技术问题。

Description

多端协同的显示更新方法及装置 技术领域
本发明涉及显示技术领域，具体而言，涉及一种多端协同的显示更新方法及装置。
背景技术
会议协作白板具有演示演讲功能，在会议过程中，加入同一个会议协作白板进程的多个终端之间，可以实现演示跟随展示功能。例如，每个终端均运行有会议协作白板应用，演讲者可以将自己使用的终端上的内容传递给同一个会议协作白板进程中的其他终端，则演讲者使用的终端在这一过程中为被跟随终端，其他终端为跟随终端。跟随终端的应用界面中可以同步展示出被跟随终端的应用界面，从而实现了会议协作白板应用中的演示跟随功能。
通常在被跟随终端中，需要使用画笔等功能在会议协作白板等web绘图应用或者web绘图功能上绘制内容，跟随终端则需要跟随这一操作，但使用与应用界面大小相同的画布(单倍画布)，则每次跟随被跟随终端的操作进行移动画布时，都需要重新计算各个点的位置，并重新绘制画布上的内容，达到画布扩展功能。由于每次移动画布，都会进行画布的清除，以及重新绘制的操作，当画布中的数据量多时，重绘的时间变长，甚至卡顿，并且每次移动都会触发重绘，效率低，可扩展性差。
针对上述现有技术中被跟随终端的画布无限扩展时，跟随终端难以跟随的问题，目前尚未提出有效的解决方案。
发明内容
本发明实施例提供了一种多端协同的显示更新方法及装置，以至少解决现有技术中由于被跟随终端和跟随终端的像素不同导致视角跟随的效果不佳的技术问题。
根据本发明实施例的一个方面，提供了一种多端协同的显示更新方法，显示更新方法用于实现第一终端对第二终端的操作的同步显示，第一终端提供第一协同白板应用的第一应用界面、用于承载第一协同白板应用的绘制内容的第一画布以及用于承载第一画布的第一容器；第二终端提供第二协同白板应用的第二应用界面、用于承载第二协同白板应用的绘制内容的第二画布以及用于承载第二画布的第二容器；第一画布的第一长度大于第一应用界面的长度，第一画布的宽度大于第一应用界面的宽度，该多端协同的显示更新方法包括：第一终端显示第一协同白板应用的第一应用界面，其 中，第一协同白板应用与第二终端的第二协同白板应用处于协同模式，且第二终端显示第二协同白板应用的第二应用界面；接收第二终端发送的控制参数，其中，控制参数由第二终端接收到对第二应用界面的控制操作时产生；第一终端基于控制参数更新第一应用界面的内容，其中，确认控制操作为移动操作，第一画布根据控制参数移动，当第一画布与第一应用界面在同一方向的边发生重合时，第一终端对第一画布中的内容进行重新渲染。
根据本发明实施例的另一方面，还提供了一种多端协同的显示更新装置，显示更新方法用于实现第一终端对第二终端的操作的同步显示，第一终端提供第一协同白板应用的第一应用界面、用于承载第一协同白板应用的绘制内容的第一画布以及用于承载第一画布的第一容器；第二终端提供第二协同白板应用的第二应用界面、用于承载第二协同白板应用的绘制内容的第二画布以及用于承载第二画布的第二容器；第一画布的第一长度大于第一应用界面的长度，第一画布的宽度大于第一应用界面的宽度，该多端协同的显示更新装置包括：显示模块，用于第一终端显示第一协同白板应用的第一应用界面，其中，第一协同白板应用与第二终端的第二协同白板应用处于协同模式，且第二终端显示第二协同白板应用的第二应用界面；接收模块，用于接收第二终端发送的控制参数，其中，控制参数由第二终端接收到对第二应用界面的控制操作时产生；更新模块，用于第一终端基于控制参数更新第一应用界面的内容，其中，确认控制操作为移动操作，第一画布根据控制参数移动，当第一画布与第一应用界面在同一方向的边发生重合时，第一终端对第一画布中的内容进行重新渲染。
根据本发明实施例的另一方面，还提供了一种计算机存储介质，上述计算机存储介质存储有多条指令，指令适于由处理器加载并执行上述任意一项的方法步骤。
根据本发明实施例的另一方面，还提供了一种智能交互平板，包括：处理器和存储器；其中，存储器存储有计算机程序，计算机程序适于由处理器加载并执行上述任意一项的方法步骤。
在本发明实施例中，第一终端显示第一协同白板应用的第一应用界面，其中，第一协同白板应用与第二终端的第二协同白板应用处于协同模式，且第二终端显示第二协同白板应用的第二应用界面；接收第二终端发送的控制参数，其中，控制参数由第二终端接收到对第二应用界面的控制操作时产生；第一终端基于控制参数更新第一应用界面的内容，其中，确认控制操作为移动操作，第一画布根据控制参数移动，当第一画布与第一应用界面在同一方向的边发生重合时，第一终端对第一画布中的内容进行重新渲染。上述方案在多终端协同时，在跟随终端的协同白板应用中设置多倍画布，以使得跟随终端在跟随被跟随终端的移动时，无需每次对画布进行移动时均需要清除画布上的内容对画布进行重新绘制，且当跟随终端的协同白板应用中，画布与应用界 面在同一方向的边发生重合时，对该协同白板应用的画布中的内容进行重新渲染，以使得被跟随终端在协同白板应用中移动无限画布时，跟随终端能够跟随该效果，解决了现有技术中被跟随终端的画布无限扩展时，跟随终端难以跟随的技术问题。
附图说明
此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：
图1是根据本申请实施例提供的一种2倍画布的举例示意图；
图2是根据本申请实施例的一种多端协同的显示更新方法的流程图；
图3a是根据本申请实施例的一种画布边缘与视口边缘的举例示意图；
图3b是根据本申请实施例的另一种画布边缘与视口边缘的举例示意图；
图4是根据本申请实施例的一种画布移动前的举例示意图；
图5是根据本申请实施例的一种画布移动后的举例示意图；
图6是根据本申请实施例的一种判断画布边缘与应用界面边缘是否重合的示意图；
图7a是根据本申请实施例的一种根据原点进行缩放的示意图；
图7b是根据本申请实施例的另一种根据原点进行缩放的示意图；
图8a是根据本申请实施例的一种根据目标点进行缩放的示意图；
图8b是根据本申请实施例的另一种根据目标点进行缩放的示意图；
图9是根据本申请实施例书写笔迹由多个点构成的示意图；
图10是根据本发明实施例的一种多端协同的显示更新装置的示意图；
图11是根据本发明实施例的一种智能交互平板的示意图。
具体实施方式
为了使本技术领域的人员更好地理解本发明方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。基于本发明中的实施例，本领 域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本发明保护的范围。
需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
实施例1
在本实施例中，以第一终端和第二终端进行说明，第一终端和第二终端均运行有协同白板应用，以实现第一终端和第二终端之间的同步显示，其中，在该示例中，以第二终端为被跟随终端，第一终端为跟随终端为例进行说明，第一终端可以为一个或多个。例如，在会议协作演示场景中，第二终端可以为会议演示者所使用的终端，第一终端为观看者所使用的终端，第一终端跟随第二终端同步显示。
在具体的实施场景中，上述第一终端和第二终端所运行的协同白板应用均可以实现web绘图功能，画布是web绘图应用中用于承载绘制内容的区域。画布使用的可以是浏览器html canvas标签，canvas是浏览器html中通用的标签，使用此标签可以很好的在浏览器上渲染。使用了chrome内核作为载体，实现跨平台效果，容器使用的是div标签，使用浏览器绝对定位，实时修改偏移值，达到画布移动效果。画布是承载白板应用的绘制内容的，画布上覆盖有透明层，透明层上具有工具栏，当点击工具栏工具进行操作时，体现为对画布上内容的更改。
容器用于承载画布，画布的移动实质为容器的移动。当画布移动后，与视口的偏移量就会发生变化。具体可包括水平偏移量和垂直偏移量的变化。
协同白板应用的应用界面即为视口，视口是终端的屏幕上能用来显示web绘图应用的一片区域，是与设备相关的一个矩形区域，坐标单位是与设备相关的“像素”。
在使用协同白板应用的过程中，为了扩大绘制范围，实现无限画布的效果，第二终端可以在协同板应用中使用多倍画布(即画布的大小为应用界面的多倍)，且用户可以在第二终端上进行多种操作，例如：平移、拉伸、书写等，而第一终端均需要跟随这些操作，以实现与第二终端的同步显示。但使用与应用界面大小相同的画布(单倍画布)，则每次跟随被跟随终端的操作进行移动画布时，都需要重新计算各个点的位置，并重新绘制画布上的内容，达到画布扩展功能。由于每次移动画布，都会进行 画布的清除，以及重新绘制的操作，当画布中的数据量多时，重绘的时间变长，甚至卡顿，并且每次移动都会触发重绘，效率低，可扩展性差。基于这样的问题，本实施例提出了一种多端协同的显示更新方法。
在对本实施例中的多端协同的显示更新方法进行说明前，首先对下述实施例中所出现的一种示例中的第一终端终端协同白板应用的布局进行说明，在该示例中，第一终端的第一画布为两倍画布，图1是本申请实施例提供的一种2倍画布的举例示意图，结合图1所示，第一画布的长度为第二应用界面的长度的多倍，第一画布的宽度也为第二应用界面的宽度的多倍。
如图1所示，container代表第一容器，用于承载第一画布，view表示第一应用界面，即为用户可看到的整个屏幕的大小。
container的宽度为canvasWidth，高度为canvasHeight。
canvasWidth也表示画布的宽度，是view宽度的2倍。
canvasHeight也表示画布的高度，是view高度的2倍。
clientWidth与view的宽度相等，clientHeight与view的高度相等，view正居中于container的中心。
定义container的左上角为原点，相对于view的顶点左偏移为left，上偏移为top。
当进行移动操作时，偏移的是容器的top和left的偏移值，达到画布移动的效果。意思就是，移动画布内容，view里面会看到画布的移动，view其实不发生变化，变化的是下层的容器。
图2是根据本申请实施例的一种多端协同的显示更新方法的流程图，显示更新方法用于实现第一终端对第二终端的操作的同步显示，第一终端提供第一协同白板应用的第一应用界面、用于承载第一协同白板应用的绘制内容的第一画布以及用于承载第一画布的第一容器；第二终端提供第二协同白板应用的第二应用界面、用于承载第二协同白板应用的绘制内容的第二画布以及用于承载第二画布的第二容器；第一画布的第一长度大于第一应用界面的长度，第一画布的宽度大于第一应用界面的宽度，结合图2所示，多端协同的显示更新方法包括：
步骤S202，第一终端显示第一协同白板应用的第一应用界面，其中，第一协同白板应用与第二终端的第二协同白板应用处于协同模式，且第二终端显示第二协同白板应用的第二应用界面。
具体的，上述第一终端和第二终端可以为具有人机交互界面的智能设备，如手机、 平板电脑、智能交互平板等。第一终端和第二终端处于协同模式，用于表示第一终端和第二终端其中一个作为被跟随终端，另一个作为跟随终端，二者的协同白板应用界面显示的内容相同。也即在被跟随终端上的协同白板界面上进行任何的显示，跟随终端的协同白板界面上都会一并显示。例如，被跟随终端的协同白板应用的应用界面上显示一多媒体内容，跟随终端的协同白板应用的应用界面上会显示同样的多媒体内容；再例如，在被跟随终端的协同白板应用的应用界面上执行某种操作使得其应用界面发生变化，跟随终端的协同白板应用的应用界面上会发生同样的变化。在本实施例中，第二终端为被跟随终端，第一终端为跟随终端。
在一种可选的实施例中，在会议协作演示场景中，作为演示者的用户可以在自己的会议白板(即上第二终端)上播放多媒体内容，并且将会议白板上的显示内容分享给其他观看用户的会议白板(即上述第一终端)，使得其他观看用户的会议白板的显示界面可同步显示相同的多媒体内容。
需要说明的是，在不同的应用场景中，作为跟随终端的智能设备也可以作为被跟随终端，作为被跟随终端的智能设备也可以作为跟随终端，上述第一终端和第二终端的定义根据当前智能设备的演示状态确定。
步骤S204，接收第二终端发送的控制参数，其中，控制参数由第二终端接收到对第二应用界面的控制操作时产生。
第二终端作为被跟随终端，对第二应用界面进行的控制操作用于实现演示画面的变化及调整，例如，对第二应用界面当前演示的画面进行平移操作、缩放操作以及书写等。
当第二终端接收到控制操作时，第二应用界面会发生与控制操作对应的变化，这些变化参数即为上述控制参数。第二终端在接收到对第二应用界面的控制操作时，将生成的控制参数发送至第一终端，第一终端即可接收到上述控制参数。该控制参数可用于调整第一应用界面与第二应用界面的内容保持一致。例如，控制参数可以为坐标参数，用户在作为被跟随终端的第二终端在第二应用界面上对当前画面进行了平移操作，第二终端根据画面平移的坐标信息生成坐标参数并发送给作为跟随终端的第一终端。
步骤S206，第一终端基于控制参数更新第一应用界面的内容，其中，确认控制操作为移动操作，第一画布根据控制参数移动，当第一画布与第一应用界面在同一方向的边发生重合时，第一终端对第一画布中的内容进行重新渲染。
第一终端根据控制参数更新第一应用界面的内容，实际可以是根据控制参数对第一画布进行调整，以实现更新第一应用界面的内容的效果。
例如，如果对第二应用界面的操作为平移操作，则第一终端根据控制参数对第一画布进行应；如果对第二应用界面的操作为缩放操作，则第一终端根据控制参数对第一画布进行缩放；如果对第二应用界面的操作为书写操作，则第一终端根据控制参数在第一画布上生成对应的书写笔迹。
在控制操作为移动操作的情况下，第二应用界面根据移动操作移动并将控制参数发送至第一终端，第一终端的第一画布根据控制参数进行移动。该移动操作可以是用户通过手指、触摸笔或外接控制设备(如鼠标)等对第二应用界面进行拖动。
在第一终端根据控制参数控制第一画布移动时候，分为如下两种状态：
在第一种状态下，第一画布与第一应用界面的边未发生重合。结合图1所示，以第一应用界面处在第一画布中间为例，由于第一画布是多倍画布，因此当水平移动的距离小于当前的left，竖直方向移动的距离小于当前的top时，第一应用界面的边不会与第一画布的边重合，其效果相当于第一应用界面在第一画布上移动，第一画布上渲染出的内容满足移动的需求，因此无需进行重新渲染。
在第二种状态下，第一画布与第一应用界面的某条边法生产重合。仍结合图1所示，以第一画布向右移动为例，当第一画布向右移动的距离达到当前的left时，第一画布的右边缘与第一应用界面的右边缘重合，此时当继续将第一画布向右移动时，由于第一画布已经无法继续向右移动，但为了跟随第二画布的移动，则需要对第一画布上的内容进行重新渲染，以在感官上实现了第一画布继续在移动的效果。
如图3a或3b所示，第一画布包括第一边缘和第三边缘，第一应用界面包括第二边缘和第四边缘，第一边缘与第三边缘平行，第二边缘与第四边缘平行，第一边缘与第二边缘属于同一方向的边，当将第一画布向右移动导致第一边缘和第二边缘相重合时，触发第一画布重新渲染；第三边缘与第四边缘属于同一方向的边，当将第一画布向左移动导致第三边缘和第四边缘相重合时，触发第一画布重新渲染。类似的，第一画布和第一应用界面的上边缘相重合，或第一画布和第一应用界面的下边缘相重合时，也触发第一画布重新渲染。
由上可知，本申请上述实施例中，第一终端显示第一协同白板应用的第一应用界面，其中，第一协同白板应用与第二终端的第二协同白板应用处于协同模式，且第二终端显示第二协同白板应用的第二应用界面；接收第二终端发送的控制参数，其中，控制参数由第二终端接收到对第二应用界面的控制操作时产生；第一终端基于控制参数更新第一应用界面的内容，其中，确认控制操作为移动操作，第一画布根据控制参数移动，当第一画布与第一应用界面在同一方向的边发生重合时，第一终端对第一画布中的内容进行重新渲染。上述方案在多终端协同时，在跟随终端的协同白板应用中 设置多倍画布，以使得跟随终端在跟随被跟随终端的移动时，无需每次对画布进行移动时均需要清除画布上的内容对画布进行重新绘制，且当跟随终端的协同白板应用中，画布与应用界面在同一方向的边发生重合时，对该协同白板应用的画布中的内容进行重新渲染，以使得被跟随终端在协同白板应用中移动无限画布时，跟随终端能够跟随该效果，解决了现有技术中被跟随终端的画布无限扩展时，跟随终端难以跟随的技术问题。
下面，对第一终端对第一画布进行重新渲染的方式进行说明。作为一种可选的实施例，第一画布包括平行的第一边缘和第三边缘，第一应用界面包括平行的第二边缘和第四边缘，第一边缘与第二边缘位于同一侧，第三边缘与第四边缘位于同一侧，第一画布至少包括靠近第三边缘的第一区域和靠近第一边缘的第二区域，第一区域和第二区域相邻，第一区域绘制有第一内容，第二区域绘制有第二内容，移动操作的移动方向为从第一边缘所在一侧移动至第三边缘所在一侧，当第一画布与第一应用界面在同一方向的边发生重合时，第一终端对第一画布中的内容进行重新渲染，包括：
第一边缘与第二边缘重合，将第一画布沿着移动操作的反方向移动至第三边缘与第四边缘重合的位置，并触发将第一区域渲染为第二内容，将第二区域渲染为第三内容。
需要说明的是，第一边缘和第三边缘也可以为上下两侧的边缘，同样，第二边缘和第四边缘也可以为上下两侧的边缘。画布可以在水平方向移动，也可以在垂直方向移动，还可以与应用界面呈一定夹角移动。
结合图4所示对上述方案进行说明。第一容器container包括靠近第三边缘的第一区域A和靠近第一边缘的第二区域B，第一区域A和第二区域B分别表示1倍画布，组合起来为2倍画布，第一区域A和第二区域B上分别绘制有对应的第一内容和第二内容。图4中还包括区域C，区域C的内容为上述第三内容，但此时C是虚拟的，并未显示出来，仅为了配合展示。此时移动操作的移动方向为从第一边缘所在一侧移动至第三边缘所在一侧，即移动方向为将第一容器container向右移动，如果第一容器container的第一边缘未与第一应用界面view的第二边缘相重合，则只有画布的移动，不存在渲染。而在移动的过程中根据移动的偏移量在第一应用界面view中显示相应的内容。
当控制第一画布从第一边缘方向向第三边缘方向移动时，当第一边缘与第二边缘重合后，则会触发重新渲染画布的内容，并且画布会向移动方向的反方向移动，并移动到第三边缘与第四边缘重合的位置。当然，若继续按照相同的方向移动，则重复上述过程，即第一边缘未触碰到第二边缘时，画布内容不会重新渲染，而当两者触碰到后，画布内容重新渲染并沿着反方向移动至第三边缘与第四边缘重合的位置。
例如，如图5所示，当图4的基础上继续移动第一画布，当container的第一边缘与view的第二边缘碰撞时，触发画布的重绘操作。具体的，第一画布反方向移动至第三边缘与第四边缘重合，此处，B区域为更新后的第一区域，C区域为更新后的第二区域，也即第一区域显示B区域的第二内容，第二区域显示C区域中的第三内容，也即，此时会将之前的AB画布内容重新渲染为BC画布内容，由于画布尺寸较小，重绘速度较快，因此，对于用户来说，对此次重绘无感，此时的view就变成了区域B和区域C的内容，当container继续右移时，view展示的依旧是BC中的内容，直至第一边缘和第二边缘再次发生碰撞。进一步可理解为，整个过程中始终只包括A和B区域，重新渲染后，A区域的内容被重新绘制为B区域的内容，而B区域的内容被重新绘制为C区域的内容。
上述方案以第一画布右移为例说明了在第一画布和第一应用界面的左边缘发生重合时如何进行重新渲染，而当第一画布左移使第一画布和第一应用界面的右边缘发生重合时，或当第一画布上移使第一画布和第一应用界面的下边缘发生重合时，又或是当第一画布下移使第一画布和第一应用界面的上边缘发生重合时，方法类似，此处不再赘述。
作为一种可选的实施例在第一终端在第一终端的第一应用界面中显示与第二终端的第二应用界面相同的内容之前，上述方法还包括：至少一个第一终端和第二终端加入同一个虚拟房间。
上述虚拟房间用于表示协同白板应用中的群组，加入同一个虚拟房间的多个终端处于同一个群组中。在需要使用该协同功能时，可以创建一个虚拟房间，然后生成一个该虚拟房间的虚拟房间标识，其他终端通过该虚拟房间标识即可加入该虚拟房间。虚拟房间标识可以为虚拟房间号码或虚拟房间二维码等，其他终端可以通过输入虚拟房间号码，或扫描虚拟房间二维码加入虚拟房间。在加入到虚拟房间后，虚拟房间的内的终端可以设置终端身份，例如，可以设置为跟随终端或被跟随终端。
以会议协作演示场景为例，一终端启动协同白板应用，生成一个会议房间(即上述虚拟房间)，协同白板应用为其会议房间生成一对应的二维码。该终端将生成的二维码分享至其他需要参加会议的对象，其他对象使用各自的终端通过扫描该二维码，加入到上述会议房间中，从而使得众多参会的终端加入了一个共同的会议房间。
在多个终端加入至同一个虚拟房间，并设置好第一终端和第二终端的身份后，即可开始进行第二终端对第一终端的同步显示。
作为一种可选的实施例，控制参数由第二终端接收到对第二应用界面的控制操作时产生，包括：第二终端接收在第二应用界面上执行的控制操作，其中，第二画布根 据控制操作变化；第二终端确定第二画布根据控制操作变化所生成的变化参数为控制参数；第二终端将控制参数发送至第一终端。
仍以会议协作演示场景为例，演讲者在第二终端的第二应用界面上进行控制操作，第二协同白板应用执行该控制操作，以使第二应用界面产生变化，例如，控制操作为移动操作，第二协同白板应用根据控制操作控制第二画布移动；控制操作为缩放操作，第二协同白板应用根据控制操作控制第二画布进行缩放；控制操作为书写操作，第二协同白板应用在第二画布上生成相应的笔迹。
在这一过程中，第二协同白板应用不仅根据控制操作控制第二应用界面响应该控制操作产生变化，还将变化参数作为控制参数发送至第一终端，以使第一终端能够根据变化参数对第二应用界面的变化进行跟随。
例如，控制操作为移动操作，控制参数可以是第二画布在执行控制操作时所产生的位置偏移量，控制操作为缩放操作，控制参数可以是第二协同白板应用根据控制操作控制第二画布进行缩放时所产生的缩放比例和位置偏移量；控制操作为书写操作，控制参数可以是第二协同白板应用在第二画布上生成相应的笔迹时笔迹数据。
作为一种可选的实施例，在第一应用界面的第一分辨率参数和第二应用界面的第二分辨率参数不同的情况下，第一终端基于控制参数更新第一应用界面的内容，包括：第一终端根据第一分辨率参数和第二分辨率参数对控制参数进行更新；第一终端基于更新后的控制参数更新第一应用界面的内容。
具体的，上述第一应用界面的第一分辨率参数用于表示第一应用界面在纵横向上的像素点数，第二应用界面的第二分辨率用于表示第二应用界面在纵横向上的像素点，单位均为px。
在第一应用界面与第二应用界面的分辨率相同的情况下，第一协同白板应用可以直接根据控制参数对第一应用界面进行控制，从而使得第一应用界面对第二应用界面进行跟随。
而在第一应用界面与第二应用界面的分辨率不同的情况下，如果第一协同白板直接使用获取到的控制参数对第一应用界面进行控制，则由于两个应用界面的分辨率不同，导致控制的效果与第二应用界面的显示效果并不相同，因此第一终端还根据第一应用界面的第一分辨率和第二应用界面的第二分辨率对控制参数进行更新，并基于更新后的参数更新第一应用界面的内容。
上述对控制参数进行更新可为，将控制参数调整为与第一显示界面的第一分辨率参数匹配的控制参数，第一终端作为跟随终端，根据第一分辨率参数和第二分辨率参数对第二终端提供的控制参数进行更新，从而使得第一终端可以根据更新后的控制参 数调整第一应用界面中的显示内容后，进而使得第一应用界面能够与第二应用界面中的显示内容一致。
上述方案中，第一终端基于与其第一应用界面的第一分辨率匹配的控制参数调整第一画布，实现了与作为跟随终端的第一终端的第一应用界面与作为被跟随终端的第二终端的第二应用界面的视角同步的技术效果。
作为一种可选的实施例，第一终端根据第一分辨率参数和第二分辨率参数对控制参数进行更新，包括：第一终端读取第二终端发送的第二分辨率参数；第一终端获取第一分辨率参数和第二分辨率参数的比值；第一终端将比值与控制参数相乘，得到更新后的控制参数。
具体的，第一分辨参数与第二分辨率参数的比值包括二者的高度比值和二者的宽度比值，当二者高度比值和二者宽度比值相同时，选择任意一个与控制参数相乘得到更新后的控制参数；当二者不同时，可以选择较小的比值与控制参数相乘得到更新后的比值。
在一种可选的实施例中，控制操作为书写操作，控制参数为书写操作所生成的书写点，第二分辨率参数中宽度为A_Width，第一分辨率参数中宽度为B_Width，第二应用界面上的某个书写点的坐标信息为(X A，Y A)，则第一应用界面中经过校正的图像点的坐标信息(X B，Y B)为：
X B＝X A*(B_Width/A_Width)；Y B＝Y A*(B_Width/A_Width)。
其中，X B为第一应用界面更新后的图标的横坐标，Y B为第一应用界面更新后的图标的纵坐标，B_Width/A_Width为第一应用界面和第二应用界面的宽度比例，通过上述计算，第一终端可以获得根据分辨率校正更新后的坐标数据。
在本实施例中，第一终端在第一应用界面中显示与第二终端的第二应用界面相同的内容，第二终端根据用户在第二应用界面的控制操作生成控制参数，并将控制参数发送至向第一终端，第一终端根据第一分辨率参数和第二分辨率参数对控制参数进行更新后，基于更新后的控制参数调整第一应用界面的内容。作为跟随终端的第一终端通过将第一终端发送的原始控制参数根据各自的分辨率参数进行更新，获得与第一应用界面匹配的控制参数，实现了第一终端和第二终端的应用界面的显示内容能够始终保持一致的目的，进而实现了在跟随终端和被跟随终端的等比视角跟随，解决了由于被跟随终端和跟随终端的像素不同导致视角跟随的效果不佳的问题。
作为一种可选的实施例，的控制参数包括：起始坐标参数和移动增量，其中，起始坐标包括：第一应用界面的左上角坐标与第一画布上的绝对原点的坐标，在水平方向上的第一偏差和在竖直方向上的第二偏差，移动增量包括：第二画布在第二应用界 面中移动时在水平方向产生的第一增量和在竖直方向产生的第二增量；第一画布根据控制参数移动，包括：
第一终端通过第一增量更新第一偏差；第一终端通过第二增量更新第二偏差；根据第一偏差和第一应用界面的宽度确定第一画布的水平偏移量；根据第二偏差和第一应用界面的高度确定第一画布的垂直偏移量；控制第一画布按照水平偏移量在水平方向移动，并以垂直偏移量在垂直方向移动。
具体的，上述第一画布上的绝对原点可以是第一画布左上角的点，也即第一容器左上角的点。起始坐标为在移动前第一画布左上角与原点之间的偏差，包括水平方向上的第一偏差和竖直方向上的第二偏差，移动增量表示的是第二应用界面在移动第二画布时所产生的水平和竖直两个方向上的增量。
在上述方案中，根据第二应用界面在移动第二画布时所产生的水平和竖直两个方向上的增量对第一画布的起始坐标(包括第一偏差和第二偏差)进行更新，再基于更新后的坐标确定第一画布的实际偏移量(包括水平偏移量和竖直偏移量)，依据实际偏移量控制第一画布进行移动，即可实现第一应用界面对第二应用界面中画布移动操作的跟随。
在上述方案中，可以运用浏览器Canvas标签，使用hammer开源手势库去监听Canvas抛出的事件，以识别画布的移动。
在一种可选的实施例中，SinglePanStart表示触发了鼠标(或触摸)移动开始，SinglePanMove表示触发了鼠标(或触摸)移动中，SinglePanEnd表示鼠标移动(或触摸)结束。事件必须是触发SinglePanStart后再触发SinglePanMove，最后以SinglePanEnd结束。
在第二应用界面中按下空格键+鼠标移动，触发第二画布移动。当按下空格+触发SinglePanStart时，使用moveOriginPointX临时保存开始移动的水平坐标，使用moveOriginPointY临时保存开始移动的垂直坐标，当按下空格+触发鼠标移动，用移动后的位置curOriginPointX-moveOriginPointX算出水平偏移量dx(即上述第一增量)，用移动后的位置curOriginPointY-moveOriginPoinX算出垂直偏移量dy(即上述第二增量)。得到dx和dy后，使用保存位置信息的变量drawOrigin进行保存：
drawOriginX2＝drawOriginX1+dx，drawOriginY2＝drawOriginY1+dy；
drawOrigin(drawOriginX1，drawOriginY1)表示第一应用界面的左上角距离原点的位置(及上述起始坐标)，当得到了新的drawOrigin(drawOriginX2，drawOriginY2)后，再进行画布的偏移的重新计算。
作为一种可选的实施例，根据第一偏差和第一应用界面的宽度确定第一画布的水平偏移量，包括：在更新后的第一偏差大于0的情况下，确定水平偏移量为更新后的第一偏差除以第一应用界面的宽度的第一余数；在更新后的第一偏差小于0的情况下，获取更新后的第一偏差除以第一应用界面的宽度的第二余数，确定水平偏移量为第一应用界面的宽度与第二余数之和；根据第二偏差和第一应用界面的高度确定第一画布的垂直偏移量，包括：在更新后的第二偏差大于0的情况下，确定垂直偏移量为更新后的第二偏差除以第一应用界面的高度的第三余数；在更新后的第二偏差小于0的情况下，获取更新后的第二偏差除以第一应用界面的高度的第四余数，确定垂直偏移量为第一应用界面的高度与第四余数之和。
在得到了更新后的第一偏差和第二偏差后，进行第一画布的偏移计算。在一种可选的实施例中，用baseWidth表示第一应用界面的宽度，用baseHeight表示第一应用界面的高度，用left表示第一画布的水平偏移，用top表示第一画布的垂直偏移：
当drawOriginX>0时left＝-(drawOriginPointX％baseWidth)
当drawOriginX<0时left＝-(baseWidth+drawOriginPointX％baseWidth)
当drawOriginY>0时top＝-(drawOriginPointY％baseHeight)
当drawOriginX<0时top＝-(baseHeight+drawOriginPointY％baseHeight)
最终left和top为canvas标签的实际在视角的偏移值，通过上述流程，实现了在第一协同白板应用通过控制参数对第二协同白板应用的移动操作的跟随。
作为一种可选的实施例，在第一画布的任意一个角的横坐标与所第一应用界面的任意一个角的横坐标相同，或在第一画布的任意一个角的纵坐标与所第一应用界面的任意一个角的纵坐标相同的情况下，确定第一画布与第一应用界面在同一方向的边发生重合。
在上述步骤中，第一画布的任意一个角的横坐标与所第一应用界面的任意一个角的横坐标相同，或在第一画布的任意一个角的纵坐标与所第一应用界面的任意一个角的纵坐标相同，则说明第一画布的一条边与第一应用界面的一条发生了重合。
具体结合图6所示，第一画布30左上角为原点(0，0)，第一应用界面31左上角的坐标为(drawOriginPointX，drawOriginPointY)，当第一画布30左边缘与第一应用界面31的左边缘重合时，drawOriginPointX为0，即二者的横坐标相同；当第一画布30右边缘与第一应用界面31的右边缘重合时二者的横坐标也相同；而当第一画布30右边缘与第一应用界面31的上边缘或下边缘重合时，二者的纵坐标相同。
作为一种可选的实施例，第一画布的宽度为第一应用界面的宽度的预设倍数，第 一画布的高度为第一应用界面的高度的预设倍数，预设倍数为大于1小于3。
应用界面是屏幕上用于显示协同白板应用的区域，如果第一画布较低，例如，使用5倍应用界面大小的画布，应用界面位于画布的正中心，通过移动画布，计算偏移量，根据该偏移量使得应用界面中展示出画布上不同位置的内容，从而实现了画布扩展的功能。但实现画布大小的扩展需要增加画布尺寸，当每次渲染或者绘制时，都需要先清空无限画布上所有内容，并且重新渲染，从而导致了随着画布变大，清除和重绘面积增加，导致画布在重新绘制图形数据时，延迟大，卡顿现象明显。而如果使用与应用界面大小相同的画布(单倍画布)，在每次移动画布时，都需要重新计算各个点的位置，并重新绘制画布上的内容，达到画布扩展功能。由于每次移动画布，都会进行画布的清除，以及重新绘制的操作，当画布中的数据量多时，重绘的时间变长，甚至卡顿，并且每次移动都会触发重绘，效率低，可扩展性差。
上述方案选择1至3之间的倍数大小的画布，从而即能够使得不必要每次移动化部都进行重新渲染，且又不会使得画布在重绘时的面积过大导致延迟过大，因此1到3倍之间的画布在使用上具有更好的体验。
作为一种可选的实施例，第一画布的宽度为第一应用界面的宽度的两倍，第一画布的高度为第一应用界面的高度的两倍。
在上述方案中，第一画布为一个两倍的画布，即第一画布的宽度为第一应用界面的宽度两倍，且第一画布的高度也为第一应用界面的高度两倍。
作为一种可选的实施例，当第一画布与第一应用界面在同一方向的边未发生重合时，禁止对第一画布中的内容进行重新渲染。
仍结合图3a所示，当控制第一画布从第一边缘方向向第三边缘方向移动时，如果第一画布的第一边缘未与第一应用界面view的第二边缘相重合，此时只有容器移动，不存在渲染。在移动的过程中根据移动的偏移量在第一应用界面中显示相应的内容。
作为一种可选的实施例，在控制操作为基于一个目标点的缩放操作的情况下，控制参数包括：缩放比例参数和偏移参数，偏移参数为目标点的坐标与第二画布左上角坐标的偏差，第一终端基于控制参数更新第一应用界面的内容，包括：控制第一画布基于原点根据更新后的缩放比例参数进行缩放，得到基于原点缩放后的第一画布；基于缩放比例参数和偏移参数确定调整后的偏移参数；控制基于原点缩放后的第一画布按照调整后的偏移参数进行移动，得到基于目标点进行缩放后第一画布；对基于目标点进行缩放后第一画布中的元素进行重新渲染，以更新第一应用界面的内容。
具体的，上述目标点为第二显示界面上任意一个图像点，例如，演示者用户通过 鼠标点击第二应用界面上的某个点，并基于该点进行放大操作，该点即为此次缩放操作的目标点。上述偏移参数为目标点的坐标与第二画布左上角坐标的偏差，包括水平方向和竖直方向两个值，通常与第二画布的大小相关，例如第二画布的宽度和高度分别为x和y，则偏移参数为(-x，-y)。
缩放比例参数表示缩放操作后画面相比于操作前的伸缩比例，缩放比例参数的初始值是1，表示进行缩放操作后显示界面的图像的放大的倍数与未操作时的界面图像相同。偏移参数包含X方向的偏移值(即目标电能的横坐标与原点的偏差)和Y方向的偏移值(即目标点的纵坐标与原点的偏差)。
在目标点为原点的情况下，偏移参数为0，如图7a所示，第二画布40上具有第二应用界面41上，虚线区为放大操作前图像面积，当触发放大操作后，如图7b所示，自界面原点起向右下角进行放大，左上角的界面原点位置不变，其他像素点根据缩放比例参数进行放大，导使得图像面积区域随着放大而距离界面原点越来越远，如图7b所示，放大操作后第二应用界面被放大的第二画布40充满，实现了图像放大。
在目标点不为原点的情况下，如图8a所示，演示者在第二应用界面50上基于目标点A进行放大操作，目标点A为第二应用界面上一个像素点，第二应用界面的缩放比例参数为缩放比例参数为curScale，目标点A的偏移参数包括X方向的偏移值canvasTranslateOffsetX和Y方向的偏移值canvasTranslateOffsetY。其中，curScale每次递增为0.1倍，既按照0.1，0.2……、1、1.1、1.2、1.3……进行增加最小值与递增值都为0.1。
在第一分辨率参数和第二分辨率参数不同的情况下，根据第二分辨率参数的宽度A_Width和第一分辨率参数的宽度B_Width获得更新后用于第一终端的缩放比例参数curScale1、更新后的X方向的偏移值canvasTranslateOffsetX1和更新后的Y方向的偏移值canvasTranslateOffsetY1：
curScale1＝curScale*(B_Width/A_Width)；
canvasTranslateOffsetX1＝canvasTranslateOffsetX*(B_Width/A_Width)；
canvasTranslateOffsetY1＝canvasTranslateOffsetY*(B_Width/A_Width)；
首先控制第一画布基于原点根据更新后的缩放比例参数进行缩放，得到基于原点缩放后的第一画布，即第一应用界面左上角的原点位置不变，根据更新后的缩放比例参数curScale1对除界面原点之外的其他像素点进行放大，如图8b所示，在第一画布52中的第一应用界面53上，获得虚线内的图像为放大后的图像。此时获得的是根据原点进行放大的结果，但此时目标点不为原点，因此需要对基于原点放大的结果进行偏移。
在对基于原点的放大结果进行偏移时，首先根据缩放比例对目标点的偏移参数进行调整，得到基于原点的放大结果对应的偏移参数，再将基于原点缩放的第一画布根据调整后的偏移参数进行移动，即可得到缩放后的第一画布的位置，基于缩放后的第一画布的位置进行重新渲染，即可实现第一协同白板应用对第二协同白板应用的缩放操作的跟随。
作为一种可选的实施例，基于缩放比例参数和偏移参数，确定调整后的偏移参数，包括：获取目标点在第二应用界面中的相对坐标；基于偏移参数将目标点投影至单倍容器，得到目标点在单倍容器上的绝对坐标；通过相对坐标与第二应用界面的偏移坐标之和减去绝对坐标，得到第一中间值，其中，第二应用界面的偏移坐标用于表示第二应用界面左上角坐标与第二画布上的原点坐标之差；通过缩放比例参数与1的差值乘以绝对坐标，得到第二中间值；通过第二中间值减第一中间值，得到调整后的偏移参数。
具体的，上述目标点在第二应用界面中的相对坐标为直接根据缩放操作所获得的坐标，例如，用户在第二应用界面中点击某个点进行缩放操作，该点在第二应用界面上的坐标即为上述相对坐标。上述单倍容器用于表示1倍容器，即在未缩放的情况下原始大小的容器。由于在进行当前的缩放操作时，之前仍有可能做过缩放操作，因此需要将偏移参数映射至单倍容器上进行计算。
在一种可选的实施例中，在第二应用界面进行缩放操作时的位置为相对位置为(clickX，clickY)，第二应用界面的左上角与第二画布中的原点的坐标差为(drawOriginPointX，drawOriginPointY)，上述偏移参数为canvasTranslateOffsetX，则基于偏移参数将目标点投影至单倍容器可以为：
posX＝(X1+drawOriginPointX+canvasTranslateOffset)/curScale；
posY＝X1+drawOriginPointX+canvasTranslateOffset/curScale；
其中，(posX，posY)为绝对坐标，curScale为在进行此次缩放操作前，第一画布的缩放比例；
再通过此次缩放的缩放擦书curScale和上述绝对坐标更新canvasTranslateOffset，得到canvasTranslateOffset2：
canvasTranslateOffsetX:2＝(curScale-1)*posX-(clickX+drawOriginPointX-posX)；
canvasTranslateOffsetY2＝(curScale-1)*posY-(clickY+drawOriginPointY-posY；
其中，clickX+drawOriginPointX-posX构成上述第一中间值，(curScale-1)*posY构成上述第二中间值。
作为一种可选的实施例，在控制操作为增加元素操作的情况下，控制参数包括：书写笔迹的坐标参数，第一终端基于控制参数更新第一应用界面的内容，包括：第一终端根据书写笔迹的坐标参数生成书写笔迹，其中，书写笔迹的坐标参数包括用于构成书写笔迹的书写点的坐标参数，第二终端每生成一个新的书写点，将当前书写笔迹的全部已生成的书写点的坐标参数发送至第一终端。
具体的，上述增加元素操作可以为演示者在第二显示界面上进行书写的操作。在一种可选的实施例中，将演示者在第二显示界面上画笔书写的数据定义为由多个点(即书写点)组成，如图9所示为演示者书写的由多个点组成的线条。演示者在书写时，构成书写线条的点持续变多，并实时将每个书写点的坐标参数传输至第一终端，第一终端接收每个书写点的坐标参数后即可进行绘制，得到相同的书写笔迹，实现对增加元素操作的跟随。
需要注意的是，在第一应用界面的第一分辨率参数和第二应用界面的第二分辨率参数不同的情况下，第一终端根据第一分辨率参数中的宽度A_Width和第二分辨率参数中的宽度B_Width对接收到的控制参数(包括界面原点坐标和拉伸比例、偏移参数)进行更新，通过计算可实现画笔线条的缩放、平移等操作，实现了画笔书写的等比视角跟随效果。
在一种可选的实施例中，采用web的canvas技术实现画笔书写功能，定义数据结构如下：Id:用于表示元素的唯一标识；x:元素在画板上的绝对水平坐标；y:元素在画板上的绝对垂直坐标；width:元素的宽度；height:元素的高度；type:元素的类型，比如画笔；isDeleted:定义是否被删除；Points:定义画板上的点，一条线由很多个点组成。当演讲者用户在第二显示界面进行书写操作，第二显示界面上的画笔数据更新时，Points内的数据会持续的变多，并且实时的传递给第一终端，从而达到数据的实时更新，每次数据传递采用全量替换points的方式，保证数据一致性。
本实施例基于web技术实现了多端协作的等比视角跟随(演讲者模式)功能，在跟随终端和被跟随终端之间数据传递仅采用4个变量进行不同分辨率的更新，传递的数据量小，方案轻量化。在用户无感情况下，在有限交互白板上实现了多端协作的无限视角跟随(演讲者模式)功能，带来了极高的维护性，此外能实现书写的视角跟随，较好的分离了画板布局和书写功能的耦合性，带来了极高的扩展性。
在一种可选的实施例，第一终端根据书写笔迹的坐标参数生成书写笔迹，包括：当书写笔迹与第一应用界面的任意一条边相接触时，触发第一画布向相接触的边的反方向移动，其中，当第一画布与第一应用界面在同一方向的边发生重合时，第一终端对第一画布中的内容进行重新绘制。
在上述方案中，在用户在第二应用界面进行书写时，当书写笔迹接触到了第二应用界面的边界，则会触发第二应用界面向相接触的边的反方向移动，以为用户提供更大的书写范围。在这种情况下，第一终端为了跟随第二终端的书写操作，生成书写笔迹也会接触到第一应用界面的边，且第一画布也要向相接触的边的反方向移动。也即，虽然用户未直接移动第二画布，但书写操作触发了第二应用界面的移动，第一应用界面也需要跟随这一操作对第一画布进行移动。
而在第一画布的移动过程中，则需要判断第一画布的边缘是否与第一应用界面的边缘重合，从而判断是否需要对第一画布上的内容进行重新悬渲染。在第一画布与第一应用界面在同一方向的边发生重合的情况下，第一终端对第一画布中的内容进行重新绘制，重新绘制的步骤与上述实施例中重新渲染的步骤相同，此处不再赘述。
实施例2
根据本申请实施例，提供了一种多端协同的显示更新装置的实施例，显示更新方法用于实现第一终端对第二终端的操作的同步显示，第一终端提供第一协同白板应用的第一应用界面、用于承载第一协同白板应用的绘制内容的第一画布以及用于承载第一画布的第一容器；第二终端提供第二协同白板应用的第二应用界面、用于承载第二协同白板应用的绘制内容的第二画布以及用于承载第二画布的第二容器；第一画布的第一长度大于第一应用界面的长度，第一画布的宽度大于第一应用界面的宽度。图10是根据本发明实施例的多端协同的显示更新装置的示意图，如图10所示，该多端协同的显示更新装置包括：
显示模块100，用于第一终端显示第一协同白板应用的第一应用界面，其中，第一协同白板应用与第二终端的第二协同白板应用处于协同模式，且第二终端显示第二协同白板应用的第二应用界面；
接收模块102，用于接收第二终端发送的控制参数，其中，控制参数由第二终端接收到对第二应用界面的控制操作时产生；
更新模块104，用于第一终端基于控制参数更新第一应用界面的内容，其中，方法还包括：移动模块，用于确认控制操作为移动操作，第一画布根据控制参数移动，当第一画布与第一应用界面在同一方向的边发生重合时，第一终端对第一画布中的内容进行重新渲染。
作为一种可选的实施例，第一画布包括平行的第一边缘和第三边缘，第一应用界面包括平行的第二边缘和第四边缘，第一边缘与第二边缘位于同一侧，第三边缘与第四边缘位于同一侧，第一画布至少包括靠近第三边缘的第一区域和靠近第一边缘的第二区域，第一区域和第二区域相邻，第一区域绘制有第一内容，第二区域绘制有第二 内容，移动操作的移动方向为从第一边缘所在一侧移动至第三边缘所在一侧，更新模块包括：
渲染子模块，用于第一边缘与第二边缘重合，将第一画布沿着移动操作的反方向移动至第三边缘与第四边缘重合的位置，并触发将第一区域渲染为第二内容，将第二区域渲染为第三内容。
作为一种可选的实施例，上述装置还包括：加入模块，用于在第一终端在第一终端的第一应用界面中显示与第二终端的第二应用界面相同的内容之前，至少一个第一终端和第二终端加入同一个虚拟房间。
作为一种可选的实施例，第二终端接收在第二应用界面上执行的控制操作，其中，第二画布根据控制操作变化；第二终端确定第二画布根据控制操作变化所生成的变化参数为控制参数；第二终端将控制参数发送至第一终端。
作为一种可选的实施例，在第一应用界面的第一分辨率参数和第二应用界面的第二分辨率参数不同的情况下，更新模块包括：
第一更新子模块，用于第一终端根据第一分辨率参数和第二分辨率参数对控制参数进行更新；
第二更新子模块，用于第一终端基于更新后的控制参数更新第一应用界面的内容。
作为一种可选的实施例，第一更新子模块包括：读取单元，用于第一终端读取第二终端发送的第二分辨率参数；获取单元，用于第一终端获取第一分辨率参数和第二分辨率参数的比值；相乘模块，用于第一终端将比值与控制参数相乘，得到更新后的控制参数。
作为一种可选的实施例，的控制参数包括：起始坐标参数和移动增量，其中，起始坐标包括：第一应用界面的左上角坐标与第一画布上的绝对原点的坐标，在水平方向上的第一偏差和在竖直方向上的第二偏差，移动增量包括：第二画布在第二应用界面中移动时在水平方向产生的第一增量和在竖直方向产生的第二增量；移动模块包括：第三更新子模块，用于第一终端通过第一增量更新第一偏差；第四更新子模块，用于第一终端通过第二增量更新第二偏差；第一确定子模块，用于根据第一偏差和第一应用界面的宽度确定第一画布的水平偏移量；第二确定子模块，用于根据第二偏差和第一应用界面的高度确定第一画布的垂直偏移量；第一控制子模块，用于控制第一画布按照水平偏移量在水平方向移动，并以垂直偏移量在垂直方向移动。
作为一种可选的实施例，第一确定子模块包括：第一确定单元，用于在更新后的第一偏差大于0的情况下，确定水平偏移量为更新后的第一偏差除以第一应用界面的 宽度的第一余数；第一获取单元，用于在更新后的第一偏差小于0的情况下，获取更新后的第一偏差除以第一应用界面的宽度的第二余数，确定水平偏移量为第一应用界面的宽度与第二余数之和；第二确定子模块包括：第二确定单元，用于在更新后的第二偏差大于0的情况下，确定垂直偏移量为更新后的第二偏差除以第一应用界面的高度的第三余数；第二获取单元，用于在更新后的第二偏差小于0的情况下，获取更新后的第二偏差除以第一应用界面的高度的第四余数，确定垂直偏移量为第一应用界面的高度与第四余数之和。
作为一种可选的实施例，在第一画布的任意一个角的横坐标与所第一应用界面的任意一个角的横坐标相同，或在第一画布的任意一个角的纵坐标与所第一应用界面的任意一个角的纵坐标相同的情况下，确定第一画布与第一应用界面在同一方向的边发生重合。
作为一种可选的实施例，第一画布的宽度为第一应用界面的宽度的预设倍数，第一画布的高度为第一应用界面的高度的预设倍数，预设倍数为大于1小于3。
作为一种可选的实施例，第一画布的宽度为第一应用界面的宽度的两倍，第一画布的高度为第一应用界面的高度的两倍。
作为一种可选的实施例，当第一画布与第一应用界面在同一方向的边未发生重合时，禁止对第一画布中的内容进行重新渲染。
作为一种可选的实施例，在控制操作为基于一个目标点的缩放操作的情况下，控制参数包括：缩放比例参数和偏移参数，偏移参数为目标点的坐标与第二画布左上角坐标的偏差，更新模块包括：第二控制子模块，用于控制第一画布基于原点根据更新后的缩放比例参数进行缩放，得到基于原点缩放后的第一画布；第三确定子模块，用于基于缩放比例参数和偏移参数确定调整后的偏移参数；移动子模块，用于控制基于原点缩放后的第一画布按照调整后的偏移参数进行移动，得到基于目标点进行缩放后第一画布；渲染子模块，用于对基于目标点进行缩放后第一画布中的元素进行重新渲染，以更新第一应用界面的内容。
作为一种可选的实施例，第三确定子模块包括：第三获取单元，用于获取目标点在第二应用界面中的相对坐标；投影单元，用于基于偏移参数将目标点投影至单倍容器，得到目标点在单倍容器上的绝对坐标；第一运算单元，用于通过相对坐标与第二应用界面的偏移坐标之和减去绝对坐标，得到第一中间值，其中，第二应用界面的偏移坐标用于表示第二应用界面左上角坐标与第二画布上的原点坐标之差；第二运算单元，用于通过缩放比例参数与1的差值乘以绝对坐标，得到第二中间值；第三运算单元，用于通过第二中间值减第一中间值，得到调整后的偏移参数。
作为一种可选的实施例，在控制操作为增加元素操作的情况下，控制参数包括：书写笔迹的坐标参数，更新模块包括：生成子模块，用于第一终端根据书写笔迹的坐标参数生成书写笔迹，其中，书写笔迹的坐标参数包括用于构成书写笔迹的书写点的坐标参数，第二终端每生成一个新的书写点，将当前书写笔迹的全部已生成的书写点的坐标参数发送至第一终端。
作为一种可选的实施例，生成子模块包括：触发单元，用于
当书写笔迹与第一应用界面的任意一条边相接触时，触发第一画布向相接触的边的反方向移动，其中，当第一画布与第一应用界面在同一方向的边发生重合时，第一终端对第一画布中的内容进行重新绘制。
实施例3
根据本申请实施例，提供了一种计算机存储介质的实施例，计算机存储介质存储有多条指令，指令适于由处理器加载并执行实施例1中任意一项的方法步骤。在本实施例中，第一终端在第一显示界面中显示与第二终端的第二显示界面相同的内容，第二终端根据用户在第二显示界面的控制操作时向第一终端发送控制参数，第一终端根据第一分辨率参数和第二分辨率参数对控制参数进行更新后，基于更新后的控制参数调整第一显示界面的内容。作为跟随终端的第一终端通过将第一终端发送的原始控制参数根据各自的分辨率参数进行更新，获得与第一终端匹配的控制参数，实现了第一终端和第二终端的显示界面的显示图像能够始终保持一致的目的，进而实现了在跟随终端和被跟随终端的等比视角跟随，解决了由于被跟随终端和跟随终端的像素不同导致视角跟随的效果不佳的问题。
实施例4
根据本申请实施例，提供了一种智能交互平板，包括：处理器和存储器；其中，存储器存储有计算机程序，计算机程序适于由处理器加载并执行实施例1中任意一项的方法步骤。
图11是本申请实施例提供的一种智能交互平板的示意图，该智能交互平板包含上述的交互设备主体和触摸框，结合图11所示，智能交互平板1000可以包括：至少一个处理器1001，至少一个网络接口1004，用户接口1003，存储器1005，至少一个通信总线1002。
其中，通信总线1002用于实现这些组件之间的连接通信。
其中，用户接口1003可以包括显示屏(Display)、摄像头(Camera)，可选用户接口1003还可以包括标准的有线接口、无线接口。
其中，网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。
其中，处理器1001可以包括一个或者多个处理核心。处理器1001利用各种接口和线路连接整个智能交互平板1000内的各个部分，通过运行或执行存储在存储器1005内的指令、程序、代码集或指令集，以及调用存储在存储器1005内的数据，执行智能交互平板1000的各种功能和处理数据。可选的，处理器1001可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)、可编程逻辑阵列(Programmable Logic Array，PLA)中的至少一种硬件形式来实现。处理器1001可集成中央处理器(Central Processing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器1001中，单独通过一块芯片进行实现。
其中，存储器1005可以包括随机存储器(Random Access Memory，RAM)，也可以包括只读存储器(Read-Only Memory)。可选的，该存储器1005包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器1005可用于存储指令、程序、代码、代码集或指令集。存储器1005可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器1005可选的还可以是至少一个位于远离前述处理器1001的存储装置。如图8所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及智能交互平板的操作应用程序。
在图8所示的智能交互平板1000中，用户接口1003主要用于为用户提供输入的接口，获取用户输入的数据；而处理器1001可以用于调用存储器1005中存储的智能交互平板的操作应用程序，并具体执行实施例1中的任意一项操作。
上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。
在本发明的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所 显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (19)

  1. 一种多端协同的显示更新方法，其特征在于，所述显示更新方法用于实现第一终端对第二终端的操作的同步显示，所述第一终端提供第一协同白板应用的第一应用界面、用于承载所述第一协同白板应用的绘制内容的第一画布以及用于承载所述第一画布的第一容器；所述第二终端提供第二协同白板应用的第二应用界面、用于承载所述第二协同白板应用的绘制内容的第二画布以及用于承载所述第二画布的第二容器；所述第一画布的第一长度大于所述第一应用界面的长度，所述第一画布的宽度大于所述第一应用界面的宽度，所述多端协同的显示更新方法包括：
    第一终端显示所述第一协同白板应用的第一应用界面，其中，所述第一协同白板应用与所述第二终端的第二协同白板应用处于协同模式，且所述第二终端显示所述第二协同白板应用的第二应用界面；
    接收所述第二终端发送的控制参数，其中，所述控制参数由所述第二终端接收到对所述第二应用界面的控制操作时产生；
    所述第一终端基于所述控制参数更新所述第一应用界面的内容，其中，确认所述控制操作为移动操作，所述第一画布根据所述控制参数移动，当所述第一画布与所述第一应用界面在同一方向的边发生重合时，所述第一终端对所述第一画布中的内容进行重新渲染。
  2. 根据权利要求1所述的方法，其特征在于，所述第一画布包括平行的第一边缘和第三边缘，所述第一应用界面包括平行的第二边缘和第四边缘，所述第一边缘与所述第二边缘位于同一侧，所述第三边缘与所述第四边缘位于同一侧，所述第一画布至少包括靠近所述第三边缘的第一区域和靠近所述第一边缘的第二区域，所述第一区域和所述第二区域相邻，所述第一区域绘制有第一内容，所述第二区域绘制有第二内容，所述移动操作的移动方向为从所述第一边缘所在一侧移动至所述第三边缘所在一侧，当所述第一画布与所述第一应用界面在同一方向的边发生重合时，所述第一终端对所述第一画布中的内容进行重新渲染，包括：
    所述第一边缘与所述第二边缘重合，将所述第一画布沿着所述移动操作的反方向移动至所述第三边缘与所述第四边缘重合的位置，并触发将所述第一区域渲染为所述第二内容，将所述第二区域渲染为第三内容。
  3. 根据权利要求1所述的方法，其特征在于，在第一终端在所述第一终端的第一应用界面中显示与第二终端的第二应用界面相同的内容之前，所述方法还包括：
    至少一个所述第一终端和所述第二终端加入同一个虚拟房间。
  4. 根据权利要求1所述的方法，其特征在于，所述控制参数由所述第二终端接收到 对所述第二应用界面的控制操作时产生，包括：
    所述第二终端接收在所述第二应用界面上执行的所述控制操作，其中，所述第二画布根据所述控制操作变化；
    所述第二终端确定所述第二画布根据所述控制操作变化所生成的变化参数为所述控制参数；
    所述第二终端将所述控制参数发送至所述第一终端。
  5. 根据权利要求1所述的方法，其特征在于，在所述第一应用界面的第一分辨率参数和所述第二应用界面的第二分辨率参数不同的情况下，所述第一终端基于所述控制参数更新所述第一应用界面的内容，包括：
    所述第一终端根据所述第一分辨率参数和所述第二分辨率参数对所述控制参数进行更新；
    所述第一终端基于更新后的控制参数更新所述第一应用界面的内容。
  6. 根据权利要求5所述的方法，其特征在于，所述第一终端根据所述第一分辨率参数和所述第二分辨率参数对所述控制参数进行更新，包括：
    所述第一终端读取所述第二终端发送的所述第二分辨率参数；
    所述第一终端获取所述第一分辨率参数和所述第二分辨率参数的比值；
    所述第一终端将所述比值与所述控制参数相乘，得到更新后的控制参数。
  7. 根据权利要求1所述的方法，其特征在于，所述的控制参数包括：起始坐标参数和移动增量，其中，所述起始坐标包括：所述第一应用界面的左上角坐标与所述第一画布上的绝对原点的坐标，在水平方向上的第一偏差和在竖直方向上的第二偏差，所述移动增量包括：所述第二画布在第二应用界面中移动时在水平方向产生的第一增量和在竖直方向产生的第二增量；所述第一画布根据所述控制参数移动，包括：
    所述第一终端通过所述第一增量更新所述第一偏差；
    所述第一终端通过所述第二增量更新所述第二偏差；
    根据所述第一偏差和所述第一应用界面的宽度确定所述第一画布的水平偏移量；
    根据所述第二偏差和所述第一应用界面的高度确定所述第一画布的垂直偏移量；
    控制所述第一画布按照所述水平偏移量在水平方向移动，并以所述垂直偏移量在垂直方向移动。
  8. 根据权利要求7所述的方法，其特征在于，
    根据所述第一偏差和所述第一应用界面的宽度确定所述第一画布的水平偏移量，包括：
    在更新后的所述第一偏差大于0的情况下，确定水平偏移量为所述更新后的第一偏差除以所述第一应用界面的宽度的第一余数；
    在更新后的所述第一偏差小于0的情况下，获取所述更新后的第一偏差除以所述第一应用界面的宽度的第二余数，确定水平偏移量为所述第一应用界面的宽度与所述第二余数之和；
    根据所述第二偏差和所述第一应用界面的高度确定所述第一画布的垂直偏移量，包括：
    在更新后的所述第二偏差大于0的情况下，确定垂直偏移量为所述更新后的第二偏差除以所述第一应用界面的高度的第三余数；
    在更新后的所述第二偏差小于0的情况下，获取所述更新后的第二偏差除以所述第一应用界面的高度的第四余数，确定垂直偏移量为所述第一应用界面的高度与所述第四余数之和。
  9. 根据权利要求8所述的方法，其特征在于，在所述第一画布的任意一个角的横坐标与所第一应用界面的任意一个角的横坐标相同，或在所述第一画布的任意一个角的纵坐标与所第一应用界面的任意一个角的纵坐标相同的情况下，确定所述第一画布与所述第一应用界面在同一方向的边发生重合。
  10. 根据权利要求1所述的方法，其特征在于，所述第一画布的宽度为所述第一应用界面的宽度的预设倍数，所述第一画布的高度为所述第一应用界面的高度的预设倍数，所述预设倍数为大于1小于3。
  11. 根据权利要求10所述的方法，其特征在于，所述第一画布的宽度为所述第一应用界面的宽度的两倍，所述第一画布的高度为所述第一应用界面的高度的两倍。
  12. 根据权利要求1所述的方法，其特征在于，当所述第一画布与所述第一应用界面在同一方向的边未发生重合时，禁止对所述第一画布中的内容进行重新渲染。
  13. 根据权利要求1所述的方法，其特征在于，在所述控制操作为基于一个目标点的缩放操作的情况下，所述控制参数包括：缩放比例参数和偏移参数，所述偏移参 数为所述目标点的坐标与所述第二画布左上角坐标的偏差，所述第一终端基于所述控制参数更新所述第一应用界面的内容，包括：
    控制所述第一画布基于原点根据更新后的所述缩放比例参数进行缩放，得到基于所述原点缩放后的第一画布；
    基于所述缩放比例参数和偏移参数确定调整后的偏移参数；
    控制基于所述原点缩放后的第一画布按照所述调整后的偏移参数进行移动，得到基于所述目标点进行缩放后第一画布；
    对基于所述目标点进行缩放后第一画布中的元素进行重新渲染，以更新所述第一应用界面的内容。
  14. 根据权利要求13所述的方法，其特征在于，基于所述缩放比例参数和偏移参数确定调整后的偏移参数，包括：
    获取所述目标点在所述第二应用界面中的相对坐标；
    基于所述偏移参数将所述目标点投影至单倍容器，得到所述目标点在所述单倍容器上的绝对坐标；
    通过所述相对坐标与所述第二应用界面的偏移坐标之和减去所述绝对坐标，得到第一中间值，其中，所述第二应用界面的偏移坐标用于表示所述第二应用界面左上角坐标与所述第二画布上的原点坐标之差；
    通过所述缩放比例参数与1的差值乘以所述绝对坐标，得到第二中间值；
    通过所述第二中间值减所述第一中间值，得到调整后的偏移参数。
  15. 根据权利要求1所述的方法，其特征在于，在所述控制操作为增加元素操作的情况下，所述控制参数包括：书写笔迹的坐标参数，所述第一终端基于所述控制参数更新所述第一应用界面的内容，包括：
    所述第一终端根据所述书写笔迹的坐标参数生成书写笔迹，其中，所述书写笔迹的坐标参数包括用于构成书写笔迹的书写点的坐标参数，所述第二终端每生成一个新的书写点，将当前书写笔迹的全部已生成的书写点的坐标参数发送至所述第一终端。
  16. 根据权利要求15所述的方法，其特征在于，所述第一终端根据所述书写笔迹的坐标参数生成书写笔迹，包括：
    当所述书写笔迹与所述第一应用界面的任意一条边相接触时，触发所述第一 画布向相接触的边的反方向移动，其中，当所述第一画布与所述第一应用界面在同一方向的边发生重合时，所述第一终端对所述第一画布中的内容进行重新绘制。
  17. 一种多端协同的显示更新装置，其特征在于，所述显示更新方法用于实现第一终端对第二终端的操作的同步显示，所述第一终端提供第一协同白板应用的第一应用界面、用于承载所述第一协同白板应用的绘制内容的第一画布以及用于承载所述第一画布的第一容器；所述第二终端提供第二协同白板应用的第二应用界面、用于承载所述第二协同白板应用的绘制内容的第二画布以及用于承载所述第二画布的第二容器；所述第一画布的第一长度大于所述第一应用界面的长度，所述第一画布的宽度大于所述第一应用界面的宽度，所述多端协同的显示更新装置包括：
    显示模块，用于第一终端显示所述第一协同白板应用的第一应用界面，其中，所述第一协同白板应用与所述第二终端的第二协同白板应用处于协同模式，且所述第二终端显示所述第二协同白板应用的第二应用界面；
    接收模块，用于接收所述第二终端发送的控制参数，其中，所述控制参数由所述第二终端接收到对所述第二应用界面的控制操作时产生；
    更新模块，用于所述第一终端基于所述控制参数更新所述第一应用界面的内容，其中，确认所述控制操作为移动操作，所述第一画布根据所述控制参数移动，当所述第一画布与所述第一应用界面在同一方向的边发生重合时，所述第一终端对所述第一画布中的内容进行重新渲染。
  18. 一种计算机存储介质，其特征在于，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行如权利要求1至16中任意一项的方法步骤。
  19. 一种智能交互平板，其特征在于，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行如权利要求1至16中任意一项的方法步骤。
PCT/CN2021/086634 2021-04-12 2021-04-12 多端协同的显示更新方法及装置 WO2022217433A1 (zh)

Priority Applications (6)

Application Number Priority Date Filing Date Title
KR1020237032017A KR20230145478A (ko) 2021-04-12 2021-04-12 복수 단말 연동의 디스플레이 업데이트 방법 및 장치
PCT/CN2021/086634 WO2022217433A1 (zh) 2021-04-12 2021-04-12 多端协同的显示更新方法及装置
CN202180006764.XA CN115552364A (zh) 2021-04-12 2021-04-12 多端协同的显示更新方法及装置
JP2023561125A JP2024512164A (ja) 2021-04-12 2021-04-12 マルチ端末連携表示更新方法及び装置
EP21936328.0A EP4325344A4 (en) 2021-04-12 2021-04-12 METHOD AND APPARATUS FOR UPDATE OF MULTI-TERMINAL COLLABORATIVE DISPLAY
US18/283,132 US20240303026A1 (en) 2021-04-12 2021-04-12 Method and device for multiple-terminal collaboratively updating displayed content

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
PCT/CN2021/086634 WO2022217433A1 (zh) 2021-04-12 2021-04-12 多端协同的显示更新方法及装置

Publications (1)

Publication Number Publication Date
WO2022217433A1 true WO2022217433A1 (zh) 2022-10-20

Family

ID=83639361

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/086634 WO2022217433A1 (zh) 2021-04-12 2021-04-12 多端协同的显示更新方法及装置

Country Status (6)

Country Link
US (1) US20240303026A1 (zh)
EP (1) EP4325344A4 (zh)
JP (1) JP2024512164A (zh)
KR (1) KR20230145478A (zh)
CN (1) CN115552364A (zh)
WO (1) WO2022217433A1 (zh)

Families Citing this family (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116301532A (zh) * 2023-01-06 2023-06-23 深圳市易检车服科技有限公司 信息的显示方法、装置、电子设备及存储介质
CN116382613A (zh) * 2023-06-05 2023-07-04 江西格如灵科技股份有限公司 虚拟现实环境下的白板同步方法、装置、设备及介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN103747027A (zh) * 2013-11-12 2014-04-23 广州华多网络科技有限公司 白板信息同步显示方法和系统
US20140359528A1 (en) * 2013-06-04 2014-12-04 Sony Corporation Method and apparatus of controlling an interface based on touch operations
CN108762628A (zh) * 2018-04-23 2018-11-06 广州视源电子科技股份有限公司 页面元素移动显示方法、装置、终端设备及存储介质
CN110716680A (zh) * 2019-10-09 2020-01-21 广州视源电子科技股份有限公司 智能交互平板的控制方法和装置

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US9142192B2 (en) * 2011-09-26 2015-09-22 Intel Corporation Simulation of web applications and secondary devices in a web browser, web application development tools, and methods using the same
US9864732B2 (en) * 2016-05-02 2018-01-09 Google Inc. User interfaces that facilitate management of formatting of digital content
US10929088B2 (en) * 2019-03-19 2021-02-23 Cisco Technology, Inc. Active area of interest tracking in a multiuser digital whiteboard session

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20140359528A1 (en) * 2013-06-04 2014-12-04 Sony Corporation Method and apparatus of controlling an interface based on touch operations
CN103747027A (zh) * 2013-11-12 2014-04-23 广州华多网络科技有限公司 白板信息同步显示方法和系统
CN108762628A (zh) * 2018-04-23 2018-11-06 广州视源电子科技股份有限公司 页面元素移动显示方法、装置、终端设备及存储介质
CN110716680A (zh) * 2019-10-09 2020-01-21 广州视源电子科技股份有限公司 智能交互平板的控制方法和装置

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
See also references of EP4325344A4 *

Also Published As

Publication number Publication date
US20240303026A1 (en) 2024-09-12
CN115552364A (zh) 2022-12-30
EP4325344A4 (en) 2024-07-17
EP4325344A1 (en) 2024-02-21
KR20230145478A (ko) 2023-10-17
JP2024512164A (ja) 2024-03-18

Similar Documents

Publication Publication Date Title
CN110069204B (zh) 基于书写轨迹的图形处理方法、装置、设备及存储介质
US9582142B2 (en) System and method for collaborative computing
WO2017101441A1 (zh) 远程批注移动、缩放的同步方法与系统
WO2022217433A1 (zh) 多端协同的显示更新方法及装置
CN109375980B (zh) 基于Andriod系统的触控绘图方法
JP2024505995A (ja) 特殊効果展示方法、装置、機器および媒体
US10044979B2 (en) Acquiring regions of remote shared content with high resolution
US11880999B2 (en) Personalized scene image processing method, apparatus and storage medium
CN108133454B (zh) 空间几何模型图像切换方法、装置、系统及交互设备
CN110928614B (zh) 界面显示方法、装置、设备及存储介质
US11651556B2 (en) Virtual exhibition space providing method for efficient data management
CN107861711B (zh) 页面适配方法及装置
AU2018251560A1 (en) Live ink presence for real-time collaboration
CN110286827B (zh) 一种元素缩放控制方法、装置、设备及存储介质
JP6549764B1 (ja) 画像投影システム、画像投影方法、及びプログラム
CN115373558A (zh) 投屏方法、装置、设备及存储介质
CN111984151A (zh) 一种提高处理效率的白板画布大小、位置漫游控制方法
CN115291778A (zh) 显示控制方法、装置、电子设备及可读存储介质
JP2023554031A (ja) ビデオ会議表示方法、装置、端末デバイス及び記憶媒体
CN113741775A (zh) 图像处理方法、装置及电子设备
CN114756159A (zh) 智能交互平板及其数据处理方法、装置、计算机存储设备
CN111046207A (zh) 互动图像显示方法、装置、设备和存储介质
CN114764294B (zh) 电子白板的页面元素操作方法、装置及设备
US20240037883A1 (en) Control method and device
CN115514736A (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: 21936328

Country of ref document: EP

Kind code of ref document: A1

ENP Entry into the national phase

Ref document number: 20237032017

Country of ref document: KR

Kind code of ref document: A

WWE Wipo information: entry into national phase

Ref document number: 1020237032017

Country of ref document: KR

WWE Wipo information: entry into national phase

Ref document number: 18283132

Country of ref document: US

WWE Wipo information: entry into national phase

Ref document number: 2023561125

Country of ref document: JP

WWE Wipo information: entry into national phase

Ref document number: 2021936328

Country of ref document: EP

NENP Non-entry into the national phase

Ref country code: DE

ENP Entry into the national phase

Ref document number: 2021936328

Country of ref document: EP

Effective date: 20231113