CN101963980A - Method for realizing whiteboard synchronization after picture centering under different resolutions on webpage - Google Patents
Method for realizing whiteboard synchronization after picture centering under different resolutions on webpage Download PDFInfo
- Publication number
- CN101963980A CN101963980A CN2010102932619A CN201010293261A CN101963980A CN 101963980 A CN101963980 A CN 101963980A CN 2010102932619 A CN2010102932619 A CN 2010102932619A CN 201010293261 A CN201010293261 A CN 201010293261A CN 101963980 A CN101963980 A CN 101963980A
- Authority
- CN
- China
- Prior art keywords
- picture
- coordinate
- flash
- webpage
- blank
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Landscapes
- Information Transfer Between Computers (AREA)
Abstract
The invention belongs to the technical field of networks, and in particular relates to a method for realizing whiteboard synchronization after picture centering under different resolutions on a webpage. The method comprises the following steps of: opening the webpage by a user; loading flash; increasing a container serving as a whiteboard for the flash; loading a picture into the whiteboard; triggering a complete event after the picture is loaded; displaying the picture on the whiteboard in the center by a flash program; after a control end user draws a figure on the whiteboard, simultaneously transmitting all coordinate data for constructing the figure and the currently centered picture coordinate to all clients by the flash; and recalculating the local figure coordinate according to the local picture coordinate, the picture coordinate in a message and the figure coordinate and drawing the figure according to the new figure coordinate by the client. By the method, marks of all user whiteboards are completely synchronized under any resolution.
Description
Technical field
The invention belongs to networking technology area, the synchronous method of picture back placed in the middle blank under the different resolution that is specifically related to realize on a kind of webpage.
Background technology
Along with the development of Internet technology, people's life also changes thereupon, changes information-based life style into by traditional pattern of life gradually.By means of the internet, people just can onlinely see TV, read, make friends, make a phone call, send out mail, see news ..., information-based life has become our the indispensable part of living.Certainly, people must could fully experience the facility and information-based live rich and varied of internet by keyboard, mouse, display, headset, the first-class hardware device of shooting.Display is take up room in the above-mentioned hardware maximum and most important equipment, the big young pathbreaker in its viewing area directly influences the experience of people to the internet, such as, use lower resolution displays to read the long slightly passage of length and just need ceaselessly spur scroll bar, this makes to read simply easily originally and becomes very numerous and diverse.In addition, because the display brand is numerous, the enterprises ubiquity uses the situation of different resolution display, and this will cause using same set of system, carry out same operation brings different visual effects.Along with Web conference is popularized, some of them very important function such as document-synchronization demonstration are subjected to people's favor gradually.When carrying out Web conference, the speaker marks the block content on presentation file, if the resolution difference, personnel participating in the meeting's display will can not show same block, can't realize accurately locating the paintbrush vestige.These all are ubiquitous problems in the application systems such as the existing network teleconference, long-distance education, books reading.
A kind of method that the present invention proposes is intended to solve the problem of blank demonstration mark dislocation under different resolution, can between the different resolution user, accomplish the mark of perfect synchronization blank, thoroughly break away from the constraint that resolution is experienced function, make other operations such as picture demonstration, mark can be in time and do not show synchronously with misplacing, and be to realize based on webpage fully, need not to download any plug-in unit, is a kind of popular Internet technology of truly can popularizing.
Summary of the invention
The objective of the invention is: the synchronous method of picture back placed in the middle blank under the different resolution of realizing on a kind of webpage.
For achieving the above object, technical scheme of the present invention is: the synchronous method of picture back placed in the middle blank under the different resolution of realizing on a kind of webpage may further comprise the steps:
1) user opens webpage, loads flash, the flash zoom mode is set is convergent-divergent not, and it is upper left alignment that alignment thereof is set;
2) flash load to need the picture of demonstration, according to the size of the size of picture and flash picture is set and shows between two parties at blank;
3) control end user after picture shape on the blank, sends the coordinate of figure and the coordinate of picture and arrives all clients;
4) after the client user receives message, obtain figure coordinate and picture coordinate in the message;
5) client recalculates local figure coordinate according to the picture coordinate of this locality, picture coordinate, figure coordinate in the message, and according to the new figure coordinate figure that draws.
In the technique scheme, step 1) comprises following process:
1a) user opens webpage, loads a flash, and the stage.scaleMode that flash is set is StageScaleMode.NO_SCALE;
1b) the stage.align attribute that flash is set is StageAlign.TOP_LEFT, makes the upper left alignment of stage;
1c) flash connects communication system.
In the technique scheme, step 2) comprise following process:
2a) increase a container as blank, the flash blank that Loads Image, and increase the complete action listener of picture;
After 2b) picture loads and finishes, trigger the complete incident, flash calculates picture coordinate placed in the middle according to the size of stage and the physical size of picture, the size of stage is provided with width: stageWidth, be provided with highly and be: stageHeight, the physical size of picture is provided with width: imageWidth is provided with highly and is: imageHeight.Coordinate Calculation formula placed in the middle is: x horizontal ordinate px=(stageWidth-imageWidth)/2, y ordinate py=(stageHeight-imageHeight)/2;
2c) the x attribute that picture is set is that (0, px), the y attribute that picture is set is that (0, py), Math.max herein can guarantee that picture shows all the time to Math.max in the visible range to Math.max.
In the technique scheme, step 3) comprises following process:
3a) control end user, figure draws on blank;
3b) flash all coordinate datas and the current picture coordinate placed in the middle that will constitute figure simultaneously sends to all clients by communication system.
In the technique scheme, step 4) comprises following process:
After 4a) client user receives message from communication system, resolve message data;
4b) obtain figure coordinate and picture coordinate in the message, figure x is set, the y coordinate is respectively drawX and drawY, picture x is set, the y coordinate is respectively imageX and imageY, local picture x, y coordinate are set are respectively myImageX and myImageY.
In the technique scheme, step 5) comprises following process:
5a) obtain figure coordinate and picture coordinate in the message, figure x is set, the y coordinate is respectively drawX and drawY, local picture x, y coordinate are set are respectively myImageX and myImageY;
5b) client is converted into local coordinate with the figure coordinate in the message, and reduction formula is: horizontal ordinate localX=drawX+myImageX-imageX, ordinate localY=drawY+myImageY-imageY;
5c) call the flash method and create figure, the x attribute that figure is set is localX, and the y attribute that figure is set is localY.
In the technique scheme, communication system described in the step 1) is meant the instant communicating system that can send to one or more users from a user.
The present invention compared with prior art has the following advantages:
(1) can realize the complete unity of the position of the figure that paintbrush is drawn under different resolution, not have deviation, user experience is good.
(2) synchronously in time, mild, the phenomenon that can occur pausing not
(3) owing in the position that each client is calculated figure alone, little for the computing pressure of server end.
(4) realize based on webpage fully, do not need to download any plug-in unit.
(5) can apply to other internet system easily.
Description of drawings
Figure of description is a detail flowchart of the present invention.
Embodiment
The synchronous method of picture back placed in the middle blank under the different resolution of realizing on a kind of webpage may further comprise the steps:
1) user opens webpage, loads flash, the flash zoom mode is set is convergent-divergent not, and it is upper left alignment that alignment thereof is set;
2) flash load to need the picture of demonstration, according to the size of the size of picture and flash picture is set and shows between two parties at blank;
3) control end user after picture shape on the blank, sends the coordinate of figure and the coordinate of picture and arrives all clients;
4) after the client user receives message, obtain figure coordinate and picture coordinate in the message;
5) client recalculates local figure coordinate according to the picture coordinate of this locality, picture coordinate, figure coordinate in the message, and according to the new figure coordinate figure that draws.
Further describe method of the present invention below:
Referring to Figure of description, the user opens webpage, loads flash, and the scaleMode that flash is set is NO_SCALE, and it is StageAlign.TOP_LEFT that stage.align is set.And to container of flash increase, as blank, blank its inside that Loads Image, behind the picture loaded, trigger the complete incident, the flash program calculates x, the y coordinate figure that can allow picture placed in the middle according to the size of the container of the size of stage and picture, and it is Math.max (0 that the coordinate position of picture in container is set, x), Math.max (0, y).The control end user, all coordinate datas and current picture coordinate placed in the middle that the figure that draws on blank, flash will constitute figure simultaneously send to all clients.Client recalculates local figure coordinate according to the picture coordinate of this locality, picture coordinate, figure coordinate in the message, and according to the new figure coordinate figure that draws.
Claims (8)
1. the synchronous method of picture back placed in the middle blank under the different resolution of realizing on the webpage is characterized in that, may further comprise the steps,
1) user opens webpage, loads flash, the flash zoom mode is set is convergent-divergent not, and it is upper left alignment that alignment thereof is set;
2) flash load to need the picture of demonstration, according to the size of the size of picture and flash picture is set and shows between two parties at blank;
3) control end user after picture shape on the blank, sends the coordinate of figure and the coordinate of picture and arrives all clients;
4) after the client user receives message, obtain figure coordinate and picture coordinate in the message;
5) client recalculates local figure coordinate according to the picture coordinate of this locality, picture coordinate, figure coordinate in the message, and according to the new figure coordinate figure that draws.
2. the synchronous method of picture back placed in the middle blank under the different resolution of realizing on a kind of webpage as claimed in claim 1 is characterized in that wherein step 1) comprises following process:
1a) user opens webpage, loads a flash, and the stage.scaleMode that flash is set is StageScaleMode.NO_SCALE;
1b) the stage.align attribute that flash is set is StageAlign.TOP_LEFT, makes the upper left alignment of stage;
1c) flash connects communication system.
3. the synchronous method of picture back placed in the middle blank under the different resolution of realizing on a kind of webpage as claimed in claim 1, it is characterized in that wherein communication system is meant described in the step 1): the instant communicating system that can send to one or more users from 1 user.
4. the synchronous method of picture back placed in the middle blank is characterized in that, wherein step 2 under the different resolution of realizing on a kind of webpage as claimed in claim 1) comprise following process:
2a) increase a container as blank, the flash blank that Loads Image, and increase the complete action listener of picture;
After 2b) picture loads and finishes, trigger the complete incident, flash calculates picture coordinate placed in the middle according to the size of stage and the physical size of picture, the size of stage is provided with width: stageWidth, be provided with highly and be: stageHeight, the physical size of picture is provided with width: imageWidth, be provided with highly and be: imageHeight, coordinate Calculation formula placed in the middle is: x horizontal ordinate px=(stageWidth-imageWidth)/2, y ordinate py=(stageHeight-imageHeight)/2;
2c) the x attribute that picture is set is that (0, px), the y attribute that picture is set is that (0, py), Math.max herein can guarantee that picture shows all the time to Math.max in the visible range to Math.max.
5. the synchronous method of picture back placed in the middle blank under the different resolution of realizing on a kind of webpage as claimed in claim 1 is characterized in that wherein step 3) comprises following process:
3a) control end user, figure draws on blank;
3b) flash all coordinate datas and the current picture coordinate placed in the middle that will constitute figure simultaneously sends to all clients by communication system.
6. the synchronous method of picture back placed in the middle blank under the different resolution of realizing on a kind of webpage as claimed in claim 1 is characterized in that wherein step 4) comprises following process:
After 4a) client user receives message from communication system, resolve message data;
4b) obtain figure coordinate and picture coordinate in the message, figure x is set, the y coordinate is respectively drawX and drawY, picture x is set, the y coordinate is respectively imageX and imageY, local picture x, y coordinate are set are respectively myImageX and myImageY.
7. the synchronous method of picture back placed in the middle blank under the different resolution of realizing on a kind of webpage as claimed in claim 1 is characterized in that wherein step 5) comprises following process:
5a) obtain figure coordinate and picture coordinate in the message, figure x is set, the y coordinate is respectively drawX and drawY, local picture x, y coordinate are set are respectively myImageX and myImageY;
5b) client is converted into local coordinate with the figure coordinate in the message, and reduction formula is: horizontal ordinate localX=drawX+myImageX-imageX, ordinate localY=drawY+myImageY-imageY;
5c) call the flash method and create figure, the x attribute that figure is set is localX, and the y attribute that figure is set is localY.
8. the synchronous method of picture back placed in the middle blank under the different resolution of realizing on a kind of webpage as claimed in claim 1, it is characterized in that: behind the blank picture align center of control end, the coordinate of picture, the coordinate of figure are all sent to client, client shows on blank after figure coordinate being converted into the coordinate of client terminal local after receiving these coordinate datas.
Priority Applications (2)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2010102932619A CN101963980A (en) | 2010-09-27 | 2010-09-27 | Method for realizing whiteboard synchronization after picture centering under different resolutions on webpage |
| CN2011100599368A CN102314466B (en) | 2010-09-27 | 2011-03-14 | Whiteboard synchronizing method |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN2010102932619A CN101963980A (en) | 2010-09-27 | 2010-09-27 | Method for realizing whiteboard synchronization after picture centering under different resolutions on webpage |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN101963980A true CN101963980A (en) | 2011-02-02 |
Family
ID=43516853
Family Applications (2)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2010102932619A Pending CN101963980A (en) | 2010-09-27 | 2010-09-27 | Method for realizing whiteboard synchronization after picture centering under different resolutions on webpage |
| CN2011100599368A Active CN102314466B (en) | 2010-09-27 | 2011-03-14 | Whiteboard synchronizing method |
Family Applications After (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN2011100599368A Active CN102314466B (en) | 2010-09-27 | 2011-03-14 | Whiteboard synchronizing method |
Country Status (1)
| Country | Link |
|---|---|
| CN (2) | CN101963980A (en) |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102130972A (en) * | 2011-04-27 | 2011-07-20 | 苏州阔地网络科技有限公司 | Method and system for synchronizing white board after picture centralization under different resolution ratios |
| CN102170443A (en) * | 2011-04-27 | 2011-08-31 | 苏州阔地网络科技有限公司 | Method and system for synchronizing white boards under different resolution ratios after centering picture |
| CN102185850A (en) * | 2011-04-28 | 2011-09-14 | 苏州阔地网络科技有限公司 | Method and system for synchronizing whiteboard after picture centering under different resolutions |
| CN105589696A (en) * | 2015-12-22 | 2016-05-18 | 武汉斗鱼网络科技有限公司 | Interaction method and interaction device for non-blocking full screen video image watching |
| CN110083424A (en) * | 2013-06-18 | 2019-08-02 | 微软技术许可有限责任公司 | Method and system for electric ink projection |
| CN110505529A (en) * | 2019-08-16 | 2019-11-26 | 上海掌学教育科技有限公司 | Courseware synchronous display method, device, background server, medium and system |
| CN112399214A (en) * | 2019-08-18 | 2021-02-23 | 海信视像科技股份有限公司 | Display device |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1658567A (en) * | 2005-02-21 | 2005-08-24 | 华东师范大学 | Cooperative plotting method based on internet |
| CN1842005B (en) * | 2005-03-28 | 2010-07-14 | 腾讯科技（深圳）有限公司 | Method for realizing picture and words message show |
| CN101630501B (en) * | 2008-07-14 | 2011-11-16 | 比亚迪股份有限公司 | Method and system for displaying image |
| CN101729850A (en) * | 2008-10-13 | 2010-06-09 | 刘盛举 | Video communication method based on handwriting characteristic data flow and processing system thereof |
| CN101477697A (en) * | 2009-01-21 | 2009-07-08 | 施昊 | Network information inputting editor, network information inputting editing system and method |
-
2010
- 2010-09-27 CN CN2010102932619A patent/CN101963980A/en active Pending
-
2011
- 2011-03-14 CN CN2011100599368A patent/CN102314466B/en active Active
Cited By (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102130972A (en) * | 2011-04-27 | 2011-07-20 | 苏州阔地网络科技有限公司 | Method and system for synchronizing white board after picture centralization under different resolution ratios |
| CN102170443A (en) * | 2011-04-27 | 2011-08-31 | 苏州阔地网络科技有限公司 | Method and system for synchronizing white boards under different resolution ratios after centering picture |
| CN102185850A (en) * | 2011-04-28 | 2011-09-14 | 苏州阔地网络科技有限公司 | Method and system for synchronizing whiteboard after picture centering under different resolutions |
| CN110083424A (en) * | 2013-06-18 | 2019-08-02 | 微软技术许可有限责任公司 | Method and system for electric ink projection |
| CN110083424B (en) * | 2013-06-18 | 2022-06-24 | 微软技术许可有限责任公司 | Method and system for electronic ink projection |
| CN105589696A (en) * | 2015-12-22 | 2016-05-18 | 武汉斗鱼网络科技有限公司 | Interaction method and interaction device for non-blocking full screen video image watching |
| CN105589696B (en) * | 2015-12-22 | 2019-06-04 | 武汉斗鱼网络科技有限公司 | A kind of exchange method and interactive device of clog-free full frame viewing video image |
| CN110505529A (en) * | 2019-08-16 | 2019-11-26 | 上海掌学教育科技有限公司 | Courseware synchronous display method, device, background server, medium and system |
| CN112399214A (en) * | 2019-08-18 | 2021-02-23 | 海信视像科技股份有限公司 | Display device |
Also Published As
| Publication number | Publication date |
|---|---|
| CN102314466B (en) | 2012-11-21 |
| CN102314466A (en) | 2012-01-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN102314466B (en) | Whiteboard synchronizing method | |
| CN104038722B (en) | The content interaction method and system of a kind of video conference | |
| CN103716227B (en) | A kind of method and apparatus for being used in instant messaging carry out information exchange | |
| CN106803921A (en) | Instant audio/video communication means and device based on AR technologies | |
| CN105530535A (en) | Method and system capable of realizing multi-person video watching and real-time interaction | |
| CN103338348A (en) | Implementation method, system and server for audio-video conference over internet | |
| CN110727361A (en) | Information interaction method, interaction system and application | |
| CN103269408A (en) | Converged communication system | |
| CN102307211A (en) | Method for realizing full-screen synchronization of whiteboard | |
| US7509389B1 (en) | System for providing transparent participation of third parties in instant messaging communication | |
| CN107135387A (en) | Online Customer Reception method and its system based on VR technologies | |
| CN102307214A (en) | Method for realizing list synchronization | |
| CN108108139A (en) | A kind of throwing screen cut-in method of cloud meeting | |
| CN101969461A (en) | Method for implementing white board clear screen synchronization on webpage | |
| CN105302651A (en) | Method and apparatus for supplier and user to remotely and synchronously browse commodity | |
| CN112783905A (en) | Data updating method, system and storage medium based on electronic whiteboard shared screen | |
| CN102130972A (en) | Method and system for synchronizing white board after picture centralization under different resolution ratios | |
| CN111835988B (en) | Subtitle generation method, server, terminal equipment and system | |
| CN101296367B (en) | Video and audio interaction method and system | |
| CN101902465A (en) | Cursor pen-based questioning method for multi-party network interaction | |
| CN105335124A (en) | Image processing method and system based on multi-screen interaction | |
| CN102314471A (en) | Method for synchronizing scroll bars | |
| CN102185870B (en) | Method and system for realizing mode switch between instant messaging and network conference | |
| CN102185852A (en) | Electronic whiteboard synchronization method and system based on webpage | |
| CN106656725B (en) | Intelligent terminal, server and information updating system |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C02 | Deemed withdrawal of patent application after publication (patent law 2001) | ||
| WD01 | Invention patent application deemed withdrawn after publication |
Open date: 20110202 |