CN108335342A

CN108335342A - Method, equipment and the computer program product of more people's drawing are carried out in web browser

Info

Publication number: CN108335342A
Application number: CN201810098086.4A
Authority: CN
Inventors: 杨伟民; 吴杰; 陈盛; 董文秀; 邹欢; 朱坤坤
Original assignee: Hangzhou Langhe Technology Co Ltd
Current assignee: Hangzhou Netease Zhiqi Technology Co Ltd
Priority date: 2018-01-31
Filing date: 2018-01-31
Publication date: 2018-07-27
Anticipated expiration: 2038-01-31
Also published as: CN108335342B

Abstract

The present invention provides a kind of method carrying out more people's drawing in web browser, including：Create the first workspace and the first viewing area；Record first terminal carries out the first data that single operation is generated in first workspace；The first picture is created according to first data, first picture includes drawing part and being left white part；In first viewing area, Overlapping display includes the first superposition picture of first picture；And transmission first data, so that second terminal generates the first reciprocity picture according to first data.The present invention provides a kind of more efficient multi-person interactive drawing board solution at the ends Web, it allows multiple people log-on webpage on different equipment, browser, mouse can be utilized, touch panel device is painted on webpage, everyone drafting content will be synchronized on other people page, keep the drafting content on owner's webpage consistent.

Description

Method, equipment and the computer program product of more people's drawing are carried out in web browser

Technical field

The present invention relates to internet arenas, more particularly, to the technology for carrying out more people's drawing by web browser.

Background technology

For carrying out more people's drawing by network, there is various ways.

China Patent Publication No. 102646235A discloses a kind of electronic drawing board system of more people drawing based on figure layer, place Reason method and electronic equipment, method include that the operational order of mobile terminal reception user draws digital picture on electronic drawing board, And the digital picture completed and corresponding drawing process track are uploaded to server and stored：Other mobile terminal roots According to the download instruction of user, the digital picture is downloaded to local from server, and downloading by electronic drawing board system Digital picture on increase new figure layer, after the completion of operation, according to the uploading instructions of user by new digital picture and corresponding Drawing process track is uploaded to server and is stored, and corresponding drawing process rail is drawn a picture and check for the download of next mobile terminal Mark.Mobile terminal is set to increase new function：Each mobile terminal user can download the paintings for checking other people or in other people pictures Continue to draw a picture and be uploaded to server on the basis of work to check for other users download or create again again.

The invention is not related to drawing the operable realization of content and optimization, i.e., can not individually be carried out to the content drawn every time It deletes, scaling, movement, rotate and add the operations such as filtering effects.Mobile terminal download other users draw content when be Digital picture rather than track drafting are downloaded, network transmission cost is higher.The invention is directed to mobile terminal, is not suitable for the ends Web

Secondly, China Patent Publication No. CN104166970A discloses a kind of generation of handwriting data file, restores display Method and device, electronic device.Restoring display methods includes：Analyzing step parses person's handwriting number according to handwriting data file structure According to file, obtain file header, handwriting data area, base map layers concordance list and it includes base map layers index entry；Stratification step, According to base map layers concordance list and base map layers index entry, pending figure layer is obtained；Parallel drawing step, parallel processing are all Pending figure layer, each figure layer are drawn according to the pending corresponding figure layer index entry of figure layer；Overlapping shows step, will All Layers after drafting overlap in order, obtain a handwriting image, show handwriting image.By using customized file Structure generates handwriting data file, to when restoring to show file, obtain multiple waiting locating according to base map layers concordance list The figure layer of reason draws these figure layers using parallel processing manner, and the recovery for improving handwriting data file shows speed.

But scheme in the prior art is not related to drawing the operable realization of content and optimization, i.e., to drawing every time The operations such as filtering effects are individually deleted, are scaled, are moved, rotated and added to content；In addition, the scheme of the prior art does not relate to And the realization special character in the case of multiple person cooperational；Further, the scheme of the prior art can not be used for the ends Web, to Using receiving certain limitation.

Further, since in painting process to the rendering of picture and transformation may very frequently, therefore the data volume transmitted compared with Greatly, a large amount of data transmission can not be preferably handled in the prior art, to be easy to cause the interim card of picture.

Invention content

The purpose of the present invention is overcoming not optimizing to drawing content in the prior art, more people can not be carried out while being grasped Make, and does not support web terminal, the lower defect of data transmission efficiency.

According to the first aspect of the invention, a kind of method carrying out more people's drawing in web browser is provided, including：Wound Build the first workspace and the first viewing area；Record first terminal carry out that single operation generated in first workspace the One data；The first picture is created according to first data, first picture includes drawing part and being left white part；Institute It states in the first viewing area, Overlapping display includes the first superposition picture of first picture；And transmission first data, with So that second terminal generates the first reciprocity picture according to first data.

According to embodiment of the present invention, wherein the member that first workspace and the first viewing area pass through HTML5 Plain Canvas is realized.

According to embodiment of the present invention, wherein the Elements C anvas of the HTML5 is in the first terminal And/or in the second terminal.

According to embodiment of the present invention, wherein the part that is left white is transparent.

According to embodiment of the present invention, wherein Overlapping display includes that the superposition picture of first picture includes： Receive the second data from the second terminal；The second reciprocity picture is generated according to second data；And Overlapping display The first superposition picture including first picture and the second reciprocity picture.

According to embodiment of the present invention, wherein first picture includes plurality of pictures, wherein per pictures pair It should be in the primary single operation.

According to embodiment of the present invention, wherein the described second reciprocity picture includes plurality of pictures, wherein every figure Piece corresponds to a second data.

According to embodiment of the present invention, wherein the single operation includes at least one of following operation：Nothing The single drawing operation of interruption；Single erasing operation without interruption；To the single selection operation of lines characteristic；To template picture Single selection operation；And the single transformation of template picture is operated.

According to embodiment of the present invention, wherein when the single operation for no interruption single drawing operation or When single erasing operation without interruption, first data include a series of track coordinate datas；When the single operation is pair When the single selection operation of lines characteristic, first data include at least one of following：Color, thickness, the void of lines Line or solid line, transparency；When the single operation is the single selection operation to template picture, first data include institute State the picture identification of template picture；When the single operation is to be operated to the single transformation of template picture, first data Picture identification including the template picture and transformation matrix, the transformation matrix indicate the rotation of the template picture, scaling With translation at least one of.

According to embodiment of the present invention, first data further include the identity of first terminal.

According to embodiment of the present invention, further comprise：When modifying to first picture, record pair First after first picture is modified changes data；Data are changed according to described first to generate the first modification picture； Eliminate the first superposition picture including first picture of the Overlapping display on first viewing area；In first display Again Overlapping display includes the first modification picture, updated first superposition picture in area；And transmission described first is repaiied Change data, so that second terminal changes data to generate the first modification equity picture according to described first.

According to embodiment of the present invention, wherein in response to the end of the single operation, to transmit described first Data.

According to a second aspect of the present invention, a kind of method carrying out more people's drawing in web browser is provided, including：It creates Second viewing area；One or more groups of paint datas from one or more terminals are received, wherein the paint data is in institute It states and carries out single operation at one or more terminals and generate；According to one or more groups of paint datas come generate one or Multiple pictures；And Overlapping display includes the superposition picture of one or more of pictures on second viewing area, it is described Superposition picture includes that superposition drafting part and superposition are left white part.

According to embodiment of the present invention, wherein second viewing area is by the Elements C anvas of HTML5 come real It is existing.

According to embodiment of the present invention, wherein it is transparent that the superposition, which is left white part,.

According to embodiment of the present invention, wherein when the single operation for no interruption single drawing operation or When single erasing operation without interruption, the paint data includes a series of track coordinate datas；When the single operation is pair When the single selection operation of lines characteristic, the paint data includes at least one of following：Color, thickness, the void of lines Line or solid line, transparency；When the single operation is the single selection operation to template picture, the paint data includes institute State the picture identification of template picture；When the single operation is to be operated to the single transformation of template picture, the paint data Picture identification including the template picture and transformation matrix, the transformation matrix indicate the rotation of the template picture, scaling With translation at least one of.

According to embodiment of the present invention, wherein the paint data further includes one or more of terminals Identity.

According to embodiment of the present invention, wherein according to one or more groups of paint datas come generate one or Multiple pictures include：Determine that the upper left corner of one or more pictures to be generated is sat according to one or more groups of paint datas Mark and bottom right angular coordinate, with the range of the one or more of pictures of determination.

According to embodiment of the present invention, wherein store one or more of figures according in a manner of array Piece.

According to embodiment of the present invention, wherein when any one group in one or more groups of paint datas or When multigroup paint data changes, corresponding one or more picture is updated.

According to embodiment of the present invention, according to the sequence stored come described in the display on second viewing area One or more pictures.

According to embodiment of the present invention, wherein wherein, when any one in one or more groups of paint datas When group or multigroup paint data change, the superposition picture shown on second viewing area is eliminated；According to becoming The paint data of change generates modification picture；The modification picture and the picture that do not change are superposed to stacking chart after changing Piece；Again picture is superimposed after being changed described in Overlapping display on second viewing area.

According to a third aspect of the present invention, a kind of method carrying out more people's drawing in web browser is provided, including： At one terminal, the first workspace and the first viewing area are created；Progress single operation in first workspace is recorded in be generated The first data；The first picture is created according to first data, first picture includes the first drafting part and first It is left white part；On first viewing area, Overlapping display includes the first superposition picture of first picture, wherein described the One superposition picture includes that the first superposition drafting part and the first superposition are left white part；And transmission first data；Second At terminal, the second viewing area is created；Receive the first data from the first terminal；According to the first data next life received At the first reciprocity picture；And Overlapping display includes the second stacking chart of the described first reciprocity picture on second viewing area Piece, wherein the second superposition picture, which includes the second superposition drafting part and the second superposition, is left white part.

According to embodiment of the present invention, further comprise：At the second terminal, the second workspace is created； It is recorded in and carries out the second data that single operation is generated in second workspace；Second is created according to second data Picture, wherein the second picture, which includes the second drafting part and second, is left white part；And it is folded in second viewing area It includes the second superposition picture of the described first reciprocity picture and the second picture to add display, wherein the second superposition picture Part is drawn including the second superposition and the second superposition is left white part.

According to embodiment of the present invention, further comprise：At the second terminal, second number is sent According to；At the first terminal, second data are received；The second reciprocity picture is generated according to second data；And Overlapping display includes the first superposition picture of first picture and the second reciprocity picture on first viewing area.

According to embodiment of the present invention, further comprise：If the second picture and first Uniform Graphs Any one or more in piece are changed, then it includes the described first reciprocity picture and described the to remove second viewing area Second superposition picture of two pictures；Again display includes the modified second picture and/or the first reciprocity picture Second modification superposition picture.

According to embodiment of the present invention, further comprise：At first terminal and second terminal, receive from the The third data of three terminals；Third equity picture is generated according to the third data；It is superimposed on first viewing area aobvious Show the first superposition picture for including the first picture, the second reciprocity picture and third equity picture；And in second viewing area Upper Overlapping display includes second picture, the second superposition picture of the first reciprocity picture and third equity picture.

According to embodiment of the present invention, wherein at the first terminal, first picture, the second equity Picture and third equity picture are stored in a manner of array；At the second terminal, the second picture, the first equity Picture and third equity picture are stored in a manner of array.

According to embodiment of the present invention, wherein at the first terminal, when first data, the second number When according to changing with any one or the more persons in third data, the first picture, the second reciprocity picture and third equity picture In corresponding picture be updated；At the second terminal, when arbitrary in first data, the second data and third data When one or more changes, corresponding picture is by more in the described first reciprocity picture, second picture and third equity picture Newly.

According to embodiment of the present invention, wherein first workspace, the first viewing area, the second workspace and It is realized by the Elements C anvas of HTML5 the second viewing area.

According to embodiment of the present invention, wherein in first picture, described first be left white part be transparent 's；In the first superposition picture, it is transparent that first superposition, which is left white part,；In the second picture, described Two be left white part be transparent；In the second superposition picture, it is transparent that second superposition, which is left white part,.

According to a fourth aspect of the present invention, a kind of equipment carrying out more people's drawing in web browser is provided, including：For Create the device of the first workspace and the first viewing area；Single behaviour is carried out in first workspace for recording first terminal Make the device of the first generated data；For creating the device of the first picture, first figure according to first data Piece includes drawing part and being left white part；For in first viewing area, Overlapping display to include the of first picture The device of one superposition picture；And the device for transmitting first data, so that second terminal is counted according to described first According to generating the first reciprocity picture.

According to embodiment of the present invention, include the device for being superimposed picture of first picture for Overlapping display Including：Device for receiving the second data from the second terminal；For generating second pair according to second data The device of equal pictures；And include the dress of the first superposition picture of first picture and the second reciprocity picture for Overlapping display It sets.

According to embodiment of the present invention, the described second reciprocity picture includes plurality of pictures, wherein per pictures pair It should be in a second data [P1].

According to embodiment of the present invention, further comprise：When modifying to first picture, for remembering Record the device of the first modification data after modifying to first picture；It is generated for changing data according to described first The device of first modification picture；Include first picture first for eliminating the Overlapping display on first viewing area It is superimposed the device of picture；For first viewing area again Overlapping display include it is described first modification picture, update after First superposition picture device；And for transmitting the first modification data, so that second terminal is according to described first Data are changed to generate the device of the first modification equity picture.

According to a fifth aspect of the present invention, a kind of equipment carrying out more people's drawing in web browser is provided, including：For Create the device of the second viewing area；Device for receiving one or more groups of paint datas from one or more terminals, Described in paint data carry out single operation at one or more of terminals and generate；For according to described one group or Multigroup paint data generates the device of one or more pictures；And on second viewing area Overlapping display include The device of the superposition picture of one or more of pictures, the superposition picture include that superposition drafting part and superposition are left white portion Point.

According to embodiment of the present invention, wherein one or more of pictures are stored in a manner of array.

According to embodiment of the present invention, wherein when any one group in one or more groups of paint datas or When multigroup paint data changes, the superposition picture shown on second viewing area is eliminated；According to changed Paint data generates modification picture；It is superimposed picture after the modification picture is superposed to modification with the picture that do not change；Weight It is superimposed picture after newly being changed described in Overlapping display on second viewing area.

According to a sixth aspect of the present invention, a kind of terminal carrying out more people's drawing in web browser is provided, including：One Or multiple processors；Memory；The program being stored in the memory is executed when by one or more of processors When, described program makes the processor execute method as described above.

According to a seventh aspect of the present invention, a kind of computer readable storage medium, the computer readable storage medium are provided It has program stored therein, when said program is executed by a processor so that the processor executes method as described above.

The present invention provides a kind of more efficient multi-person interactive drawing board solution at the ends Web, and multiple people is allowed to exist Log-on webpage in different equipment, browser can utilize mouse, touch panel device paint on webpage, everyone paints Content processed will be synchronized on other people page, keep the drafting content on owner's webpage consistent.In addition, different from tradition Drawing board, the content that everyone draws every time in the present invention be it is independent and can " interaction ", such as can be to some user The content once drawn individually is deleted, and is scaled, mobile, the operations such as rotation.

It is to be appreciated that the teachings of the present invention does not need to realize whole advantageous effects recited above, but it is specific Technical solution may be implemented specific technique effect, and the other embodiment of the present invention can also be realized and not mentioned above Advantageous effect.

Description of the drawings

Detailed description below, above-mentioned and other mesh of exemplary embodiment of the invention are read by reference to attached drawing , feature and advantage will become prone to understand.In the accompanying drawings, if showing the present invention's by way of example rather than limitation Dry embodiment, wherein：

In the accompanying drawings, identical or corresponding label indicates identical or corresponding part.

Fig. 1 is the schematic diagram of network frame used by the technical solution of the disclosure；

Fig. 2 shows the interaction figures according to the method that carries out more people's drawing in web browser of one aspect of the invention；

Fig. 3 a show the schematic diagram of created the first workspace and the first viewing area；

Fig. 3 b show the signal with the picture for drawing partly and being left white part according to one embodiment of the present invention Figure；

Fig. 4 show according to one embodiment of the present invention at a terminal to the schematic diagram of the storage mode of picture；

Fig. 5 shows the schematic diagram of figure layer (layer) according to one embodiment of the present invention；

Fig. 6 shows the efficiency comparative rendered in the prior art between the advance rendering of the present invention；

Fig. 7 shows the flow chart of the method that more people's drawing are carried out in web browser according to a further aspect of the invention；

Fig. 8 shows the flow of the method that more people's drawing are carried out in web browser according to another aspect of the present invention Figure；

Fig. 9 shows the block diagram of the equipment that more people's drawing are carried out in web browser according to another aspect of the present invention；

Figure 10 shows the equipment that more people's drawing are carried out in web browser according to another aspect of the present invention；

Figure 11 describes a kind of terminal that more people's drawing are carried out in web browser of embodiment according to the present invention Schematic diagram；And

Figure 12 describes the schematic diagram of computer readable storage medium according to the embodiment of the present invention.

Specific implementation mode

The principle and spirit of the invention are described below with reference to several illustrative embodiments.It should be appreciated that providing this A little embodiments are used for the purpose of making those skilled in the art can better understand that realizing the present invention in turn, and be not with any Mode limits the scope of the invention.On the contrary, these embodiments are provided so that the present invention is more thorough and complete, and energy It enough will fully convey the scope of the invention to those skilled in the art.

The specific implementation mode of the present invention is described in detail below in conjunction with the accompanying drawings.

Fig. 1 is the schematic diagram of network frame used by the technical solution of the disclosure.

As shown in Figure 1, disclosure institute may include using system：User terminal 110 and server 120.User terminal it Between can mutually be received and sent messages by server 120, the type of message includes but not limited to text, file, voice, expression, figure Piece, audio, video and their arbitrary combination.

As shown in Figure 1, the user terminal 110 of the disclosure can be personal computer (PC), laptop, tablet electricity Any one or more in brain, personal digital assistant, iMac, smart mobile phone.These terminals may include any suitable behaviour Make system, including but not limited to Windows, Linux, Android, IOS etc..Above-mentioned client terminal can be fixed, example Such as it is located at family, office, the fixed communication apparatus of Internet bar etc. can also be located at other mobile platforms, such as positioned at automobile, Train, on the platforms such as aircraft.

User terminal 110 can be connected to each server or high in the clouds by wired, wireless either combination.Nothing Gauze network includes but not limited to mobile telephone network, WLAN (LAN), Bluetooth Personal Area Network, wifi, Ethernet, token Ring, wide area network, internet etc..Cable network includes but not limited to phone gauze, optical cable gauze, cable gauze, cable television Net etc..

Any commercial or dedicated server may be used in server 120, and the present invention is without any restrictions to this.In addition, with Family terminal 110 can not also carry out directly communicating and chatting by server, such as pass through bluetooth etc..Network shown in FIG. 1 A kind of only example constitutes any restrictions in order to understand without the network architecture to the present invention.

The present invention is operated using web browser, as long as therefore each terminal can run web browser.

Some specific examples in concrete application scene are explained below.

Present invention utilizes the Canvas functions in HTML5, the element increased newly in the 5th versions of HTML, entitled Canvas, developer can carry out graphic plotting by script in element, for example can draw lines wherein, carry out image Processing, animation creation and Video Rendering etc..Hereafter HTML5Canvas can be simply referred to as Canvas.

CanvasRenderingContext2D:HTML5Canvas itself is actually an element on webpage, is used It is presented on webpage in by content, is actually programmed the context for needing to obtain 2D renderings when drafting from Canvas, i.e., CanvasRenderingContext2D draws Canvas contents using API therein.

Path:Path is actually path or track, is made of multiple coordinate points, in drawing process, for example is used First shaped curveH is marked in family using mouse on Canvas, in the process by can be connect by what browser provided every a bit of time Mouth gets mouse coordinates, then these path points are connected into curve, these points are path.

Web Socket:A kind of procotol for supporting two-way communication, occupied bandwidth between browser end and server end It is relatively small, in needing the Web of high real-time to apply.

Fig. 2 shows the interaction figures according to the method that carries out more people's drawing in web browser of one aspect of the invention.

Two terminals, first terminal and second terminal is shown in FIG. 2.It is to be appreciated that although only showing in Fig. 2 Two terminals are gone out, but there may be the terminals more interacted, and have been reciprocity and interchangeable between these terminals. In addition, although the server between terminal is not shown in Fig. 2, it will be appreciated by those skilled in the art that between terminal There may also be one or more servers.

As shown in Fig. 2, at first terminal, in operation A210, the first workspace and the first viewing area are created.

According to embodiment of the present invention, first workspace and the first viewing area can pass through the member of HTML5 Plain Canvas is realized.The present invention will be described by taking the Elements C anvas of HTML5 as an example, it is to be understood that first In terminal and second terminal, it can be all made of the Elements C anvas of the HTML5, can also be that first terminal uses HTML5 Elements C anvas, second terminal use other elements.

Fig. 3 a show the schematic diagram of created the first workspace and the first viewing area.

As shown in Figure 3a, first, for the achievement of the more people's drawing of real-time exhibition, need there are one Canvas for showing, The result that each user obtains after drawing finally can be all presented on this Canvas, referred to as viewing area or DisplayCanvas。

In addition, being also that each user is added to a Canvas：Workspace, or referred to as WorkCanvas, user's is every Secondary drawn using drafting instrument (such as mouse) is actually carried out on this WorkCanvas, is then intercepted again and is Picture is put on DisplayCanvas.Reason for this is that further comprise the drafting of other users on DisplayCanvas Content carries out if user is plotted on DisplayCanvas, and it is picture to need to intercept this to draw content after completing When, the drafting of other users also can inevitably be intercepted, content is caused to malfunction, therefore introduces the Canvas of each user-specific Ensure that interception content is correct after completing.

In operation A215, it is recorded in and carries out single operation is generated first in first workspace (WorkCanvas) Data.

At the ends Web, user draws usually using mouse or touch screen, it is therefore desirable to monitor such as mouse down, move It moves, unclamp these events, the interface that can be provided by Web, such as EventListener, these events are monitored, It creates layer, draws respectively after listening to these events, it is that picture and being placed into figure layer operates that content is drawn in interception.

According to embodiment of the present invention, " single operation " described above includes at least one of following operation： The single drawing operation of no interruption；Single erasing operation without interruption；To the single selection operation of lines characteristic；To template picture Single selection operation；And the single transformation of template picture is operated.

The single drawing operation of no interruption for example includes to press mousebutton and drag mouse to paint, then loose The mouse is opened, shows that the secondary drawing has terminated；Or for touch screen, single drawing operation can be the finger of user From contact touch screen to this section of operation for leaving touch screen.In operation, a series of track coordinate data will be generated, it is above-mentioned First data will be including this series of track coordinate data.

It is actually similar with drawing operation, difference lies in drawing operations to use specifically for erasing operation Color is drawn, and erasing operation uses color identical with background color or transparent color to be drawn, and is covered Lid has fallen original picture drawn.Similar to above-mentioned drafting operation, in erasing operation, the first data also include a series of Track coordinate data.

For example may include color, thickness, dotted line or the solid line for selecting lines, thoroughly to the single selection operation of lines characteristic Lightness etc..

Single selection to template picture may include the particular picture for example selected in template library, such as one circle of selection One shape, selection five-pointed star etc..Preferably, which may include the picture identification of template picture, which can be with Specific location of the template in template library is determined, to finally determine the template of the picture.

When single operation is to be operated to the single change of template picture, first data may include the Prototype drawing The picture identification and transformation matrix of piece, the transformation matrix indicate in the rotation of the template picture, zooming and panning at least It is a kind of.By the transformation matrix, angle, the ratio of scaling and the amount etc. of translation of template picture rotation could be aware that.

Next, after generating the first data, in operation A220, first is created according to the first data generated Picture, wherein the first picture, which includes the first drafting part and first, is left white part.Due to having included for example in the first data The essential informations such as track, therefore the first picture can be generated according to these data.

Fig. 3 b show the signal with the picture for drawing partly and being left white part according to one embodiment of the present invention Figure.

As shown in Figure 3b, when user draws picture in workspace (WorkCanvas), it will record user draws figure Track when piece.From track, can obtain the picture top left co-ordinate and bottom right angular coordinate (or upper right angular coordinate and Lower-left angular coordinate), so as to using rectangular area determined by top left co-ordinate and bottom right angular coordinate as picture to be shown. In picture to display, the track that drawing tool (such as mouse) is actually run is properly termed as " drawing part ", and is somebody's turn to do Remaining part of rectangle is properly termed as " being left white part ".As shown in Figure 3b, user depicts a curve for being similar to " S ", Rectangle picture determined by the picture upper left corner and the lower right corner can be then obtained from the track data of the S curve, in the rectangle In picture, other than the S curve drawn, rest part is to be left white part.An implementation according to the present invention in fig 3b Mode, it can be transparent that this, which is left white part,.

The picture drawn in the first workspace other than showing, further, in operation S225, the figure drawn Piece can also be shown in the first viewing area with other picture Overlapping displays in the first viewing area (DisplayCanvas) In picture due to may Overlapping display plurality of pictures, the referred to here as first superposition picture.It is to be appreciated that here First superposition picture, can be the synthesising picture formed after synthesizing plurality of pictures according to overlay order, can also be Plurality of pictures Overlapping display is formed picture set a pictures are not only synthesized into.Described in hereafter Second superposition picture, superposition picture, modification superposition picture etc. are superimposed picture with above-mentioned first has similar meaning, here will It repeats no more.

It further, can be by the first data transmission of generation to other-end, in order to other-end in operation A230 Picture is generated according to these data, this will be described in detail below.

Specifically, server-side can be sent to the first data using WebSocket, other ends are transmitted to by server-side End, the real-time synchronization of drawing is realized with this.

According to the preferred embodiment of the present invention, at the end of above-mentioned single operation, such as when user's release mouse, then The first generated data of transmission, this makes the transmission of the end trigger data of each single operation.

Next, by being described in detail in conjunction with Fig. 2 to being happened at the operation at second terminal.

As shown in Fig. 2, at second terminal, in operation B240, the second viewing area is created, and at operation S245, connect Receive the first data from first terminal；Operation B250, second terminal according to the first received data come generate with it is upper The corresponding first reciprocity picture of the first picture in text；Next, after generating the first reciprocity picture, B255 is being operated, Overlapping display includes the second superposition picture of the described first reciprocity picture on second viewing area, wherein second superposition Picture includes that the second superposition drafting part and the second superposition are left white part.It is to be appreciated that the second superposition picture will may be used also To include other pictures, this will be described in more detail below.

Further, due to second terminal and first terminal be it is reciprocity, an embodiment party according to the present invention Formula further comprises：At the second terminal, the second workspace is created；It is recorded in second workspace and carries out single The second generated data of operation；Second picture is created according to second data, wherein the second picture includes second It draws part and second and is left white part；The second picture is shown in second workspace；And in second display Overlapping display includes the second superposition picture of the described first reciprocity picture and the second picture in area, wherein described second is folded It includes that the second superposition drafting part and the second superposition are left white part to add picture.

, can also be as at first terminal as a result, according to embodiment of above, there is also one at second terminal A second workspace (WorkCanvas), in order to paint at second terminal.It paints at the second workspace, can also give birth to At one group of data, second terminal generates picture according to this group of data, and the picture is shown on the second workspace.In addition, also existing The picture of the generation is shown on the second viewing area in second terminal and at the same time display generated according to the first data the One reciprocity picture.

Further, according to embodiment of the present invention, second terminal also sends the second generated data, the One terminal generates the second reciprocity picture after receiving second data, according to second data, and on the first viewing area Overlapping display includes the first superposition picture of first picture and the second reciprocity picture.

In the above description, as shown in Figure 3b, in first picture, described first, which is left white part, is Bright；In the first superposition picture, it is transparent that first superposition, which is left white part,；It is described in the second picture Second be left white part be transparent；In the second superposition picture, it is transparent that second superposition, which is left white part,.

According to embodiment of the present invention, the first above-mentioned data can also include the identity mark about first terminal Know, according to the identity, second terminal can determine which terminal is the first received data come from.Similarly, second Data can also include the identity about second terminal, and according to identity, first terminal can determine received Which terminal is second data come from.In the case of multiple terminals, this will be helpful to be indexed received data, and Help orderly to store the data received.

In a practical situation, user may modify to the picture of generation, if the user of first terminal paints it The picture of system is modified, then the first data described above will change.It is to be appreciated that change described here Change includes various possible variations, for example, when wiping a picture, is wiped free of the data of picture itself actually not It changes, one layer of color identical with background color is only covered above generated picture or covers one layer thoroughly Bright color, but this is also understood to " variation " of the present invention.In addition, when being rotated to template picture, picture The data of itself also do not change, but are changed with the relevant spin matrix of the picture, and therefore, this is also understood to " variation " of the present invention.

Further, when user is when the first picture of first terminal pair is modified, corresponding first data also occur Variation, as a result, the picture on the first workspace changes, and (first is folded for all pictures shown in the first viewing area Add picture) it will be eliminated, then display includes the first of the first modified reciprocity picture again in first viewing area Modification superposition picture.

Similarly, when user is when the first picture of first terminal pair is modified, corresponding first data also change, The the first reciprocity picture generated at second terminal as a result, also changes.Second viewing area includes the first reciprocity picture The second superposition picture will be eliminated, then, in the second viewing area, display again includes modified first equity picture Second modification superposition picture.

Similarly, when user modifies to second picture at second terminal, corresponding second data also become Change, all pictures (the second stacking chart that the picture on the second workspace changes, and shown in the second viewing area as a result, Piece) it will be eliminated, then display includes the second modification superposition of modified second picture again in second viewing area Picture.

Similarly, when user modifies to second picture at second terminal, corresponding second data also become Change, the reciprocity picture of second generated at first terminal as a result, also changes.First viewing area includes second Uniform Graphs First superposition picture of piece is eliminated, and then, in the first viewing area, display again includes the second modified reciprocity picture First modification superposition picture.

The case where interaction situation of first terminal and second terminal is described above, third terminal is described below.

According to embodiment of the present invention, method of the invention further comprises：In first terminal and second terminal Place receives the third data from third terminal；Third equity picture is generated according to the third data；It is aobvious described first Show that Overlapping display in area includes the first superposition picture of the first picture, the second reciprocity picture and third equity picture；And institute It includes second picture, the second superposition picture of the first reciprocity picture and third equity picture to state Overlapping display on the second viewing area.

As described above, when being painted by third terminal there are third terminal and user, first terminal and second Terminal can receive the third data of third terminal generation, and corresponding third figure is generated at the first and second terminals Piece；Then, in the first viewing area of first terminal display include the picture the first superposition picture, and second terminal is the Display includes the second superposition picture of the picture in two viewing areas.Similarly, the third viewing area in third terminal will also be shown Show include the first picture, second picture and third picture third superposition picture.

It is to be appreciated that although merely depicting three terminals above, it will be appreciated by those skilled in the art that Can have that there are more terminals.

When there are multiple terminals, each terminal will carry out the picture from other-end the storage of ad hoc fashion, with Convenient for can easily show.

Fig. 4 show according to one embodiment of the present invention at a terminal to the schematic diagram of the storage mode of picture.

As shown in figure 4, according to embodiment of the present invention, such as when there are first terminal, second terminal and thirds When three terminals of terminal, at the first terminal, first picture, the second reciprocity picture and third equity picture are with array Mode stored；Similarly, at the second terminal, the second picture, the first reciprocity picture and third Uniform Graphs Piece is stored in a manner of array.

The sequence stored in a manner of array can there are many, for example, can be to receive the drawing number of other-end According to time sequencing stored, i.e., often receive a draw data from other-end, then will be with the draw data Corresponding picture stores, after picture corresponding to the draw data that receives then stored in sequence.

According to another implementation of the invention, can also in advance be divided for each user according to the user list of registration With a memory block to store picture corresponding with each user, if being not received by any drawing number from a certain user According to the memory block holding blank then reserved for the user.On the other hand, it is to be understood that or this terminal is retained in advance Store up space.

Whenever receiving new draw data from other-end, then corresponding picture is created simultaneously according to the draw data It is stored.Further, the mark for receiving other-end from other-end due to each terminal, can be by terminal The corresponding draw data of mark store together, consequently facilitating being indexed to picture.

According to embodiment of the present invention, at the first terminal, when first data, the second data and It is corresponding in the first picture, the second reciprocity picture and third equity picture when any one or more persons in three data change Picture be updated；Equally, at the second terminal, when arbitrary in first data, the second data and third data When one or more changes, corresponding picture is by more in the described first reciprocity picture, second picture and third equity picture Newly.

Due to showing that superposition picture in the display area is that all pictures mix, when there are one picture quilts When update, then the superposition picture in the viewing area is all eliminated, and load is re-started from the picture stored, to New superposition picture is formed in viewing area.This mode of the present invention only to need to receive number from the newer terminal of generation According to without receiving data again from other-end, which reduce the transmission quantities of data, improve the newer speed of picture and effect Rate.

Further, as shown in Figure 3b, when a terminal receives one group or more from other one or more terminals When group paint data, track when due to including drawing in these paint datas can be determined from these data The coordinate data for the picture to be generated, such as the top left co-ordinate and bottom right angular coordinate of picture to be generated, so that it is determined that The range for the picture to be generated；Alternatively, can also determine the lower-left angular coordinate and upper right angular coordinate for the picture to be generated, from And it can also determine the range for the picture to be generated.

Technical scheme of the present invention is described in detail below in conjunction with concrete implementation.

In order to realize the interactivity for drawing content, can define one kind can interactive objects, wherein include drafting content, Again using figure layer as can interactive objects base unit.Figure layer draws content and the transformation to content for managing, in more people Scene under, it is also necessary to mapper's information can be recorded, to realize some and the relevant demand of user.

Fig. 5 shows the schematic diagram of figure layer (layer) according to one embodiment of the present invention.

As shown in figure 5, UID houses User ID (such as the mark of the above terminal for drawing the figure layer content Know), if there is user has carried out the union operation of figure layer, then UID is the User ID for merging operation；If there is user carries out The turning operation of picture, then UID is the User ID for the turning operation for carrying out picture.

Ctx in Layer is then the CanvasRenderingContext2D examples that content is drawn in figure layer.In practical behaviour In work, after the content drawn is switched to picture, then a new Canvas is created, this picture is put on Canvas, is obtained The CanvasRenderingContext2D for taking Canvas, reason for this is that compared to picture, HTML5Canvas is provided more Multi-capacity.Content drafting can be carried out by programming in Canvas, content can also be converted.

Transform in Layer is then a transformation matrix, be may be implemented to Cavans contents by matrix operation Rotation scaling and translation etc., following code can will draw content and amplify twice：

Let layer=new Layer (...)；

….

Layer.transform=[2,0,0,2,0,0]；

layer.ctx.transform(...layer.transform)；

Corner is used to record the range of user's drafting, wherein containing the coordinate of two points, leads to during drawing The continuous upper left corner for finding drawing range and the lower right corner (can also be the lower left corner and the upper right corner) are crossed, a matrix conduct delimited Final range preserves the content within the scope of this as picture.For example, following function is exactly to move mouse in user During find the upper left corner and the lower right corner and draw the line：

function onMouseMove(x,y){

…

Corner [0] .x=Math.min (x, corner [0] .x)

Corner [0] .y=Math.min (y, corner [0] .y)

Corner [1] .x=Math.max (x, corner [1] .x)

Corner [1] .y=Math.max (y, corner [1] .y)

…

(the point coordinates x for being moved to this, y are sent to server and are transmitted to other users)

}

Show to finish once to draw when user unclamps mouse, obtains drawing the square of range using previous corner Shape, and export as picture：

function onMouseUp(x,y){

….

Let layer=new Layer (...)

Let imgData=ctx.getImageData (

corner[0].x,corner[0].y,

corner[1].x–corner[0].x,

corner[1].x–corner[0].x

)

layer.ctx.putImageData(imgData,0,0)

…

}

Core of the invention is the ability provided based on browser, is efficiently realized under the scene of multi-person interactive in drawing The operability of appearance, for example the operations such as moved, scaled or rotated to drawing content.The realization of the ends Web tradition drawing board application It does not have and draws the operable concept of content：When user is once painted using mouse or touch screen, by every A bit of time record mouse or touch point coordinates are painted in HTML5Canvas along Path after obtaining one group of mobile route Lines are made, the content that this is drawn after drafting is drawn content and be presented on Canvas together with other.According to HTML5Canvas's has had the ability, and the content being repeatedly plotted on Canvas is not different, therefore can not be individually to certain The content of drafting is changed.

In order to realize draw content can be interactive, a kind of common method will be painted every time under obtained path preservation Come, when being moved, scaled or being rotated later, the point on track is coordinately transformed using the API of HTML5Canvas, weight It newly draws primary along track and is illustrated on Canvas.It has a problem that herein, i.e., after repainting, due to previous Drafting be illustrated on Canvas, so needing to eliminate old content, but be presented on interior on Canvas Hold to cannot be distinguished each other and open, even if realizing that erasing rubber function is wiped, as the mutual covering between person's handwriting causes to wipe Except mistake.In the prior art, solution is that entire Canvas is wiped and all renders all drawing paths again, It is presented on Canvas, needs to repaint lines along each point on each track drafting in this case, draw content Workload is larger when more, less efficient.

Method proposed by the present invention is then, and when drawing picture every time, the lines of this drafting are individually saved as one Picture, by picture " placement " to the corresponding position of HTML5Canvas after completing, in this way, change after certain draws content, It is only needed when rendering full content again again on every pictures " placement " to Canvas.Even if certain primary drafting road Diameter has 10000 points, also needs not be along this 10000 points and repaints curve, this as long as picture is placed once Method greatly improves efficiency.

Fig. 6 shows the efficiency comparative rendered in the prior art between the advance rendering of the present invention.Test choosing in Fig. 6 It has selected and has been carried out in Chrome 62.0.3202, the environment of Windows7 0.0.0.In the rendering of the prior art, it is per second about 20367 operations are carried out, and in the advance rendering of the present invention, then may be implemented 266219 times operates, and improved efficiency is about 10 times or so.

Further, in order to realize that more people draw the synchronization of content, everyone drawing data is needed to be transferred to it He is user.The content that user draws every time has been saved for picture, if will be transmitted per pictures, network flow Consumption will be prodigious.Solution proposed by the present invention is the mouse that will record every time when user draws picture Or touch point coordinates and be transferred to other users, other users only need first to render once after receiving track, and track is switched to picture, It just can equally be operated later using drafting content as picture, the only track point coordinate data so transmitted, and Picture needs the rgb value for transmitting whole pixels generally also will not be than point coordinate data more even if being compressed in browser end It is small.

In addition, the present invention is directed being realized at the ends Web, without creating dedicated APP, to have without downloading peace Dress, cross-platform and plug and play characteristic.

Fig. 7 shows the flow chart of the method that more people's drawing are carried out in web browser according to a further aspect of the invention. As shown in fig. 7, the method for the present invention includes：In operation S710, the first workspace and the first viewing area are created；S720 is being operated, Record first terminal carries out the first data that single operation is generated in first workspace；In operation S730, according to institute The first data are stated to create the first picture, first picture includes drawing part and being left white part；In operation S740, described In first viewing area, Overlapping display includes the first superposition picture of first picture；And in operation S750, transmission described the One data, so that second terminal generates the first reciprocity picture according to first data.

According to embodiment of the present invention, further comprise：When modifying to first picture, record pair First after first picture is modified changes data；Data are changed according to described first to generate the first modification picture； Eliminate the first superposition picture shown on first viewing area；Include described in first viewing area again Overlapping display First modification picture, updated first superposition picture；And transmission the first modification data, so that second terminal Data are changed according to described first to generate the first modification equity picture.

Fig. 8 shows the flow of the method that more people's drawing are carried out in web browser according to another aspect of the present invention Figure.As shown in figure 8, the method for the present invention includes：In operation S810, the second viewing area is created；In operation S820, receives and come from one One or more groups of paint datas of a or multiple terminals, wherein the paint data is carried out at one or more of terminals Single operation and generate；In operation S830, one or more pictures are generated according to one or more groups of paint datas；With And in operation S840, Overlapping display includes the superposition picture of one or more of pictures on second viewing area, described Superposition picture includes that superposition drafting part and superposition are left white part.

According to embodiment of the present invention, wherein when any one group in one or more groups of paint datas or When multigroup paint data changes, corresponding one or more reciprocity pictures are updated.

Fig. 9 shows the block diagram of the equipment that more people's drawing are carried out in web browser according to another aspect of the present invention. As shown in figure 9, equipment includes：Device 910 for creating the first workspace and the first viewing area；Exist for recording first terminal The device 920 for the first data that single operation is generated is carried out in first workspace；For according to first data come The device 930 of the first picture is created, first picture includes drawing part and being left white part；For in first viewing area In, Overlapping display includes the device 940 of the first superposition picture of first picture；And for transmitting first data Device 950, so that second terminal generates the first reciprocity picture according to first data.

According to embodiment of the present invention, first picture includes plurality of pictures, wherein corresponding to per pictures The primary single operation.

According to embodiment of the present invention, wherein the described second reciprocity picture includes plurality of pictures, wherein every figure Piece corresponds to a second data..

Figure 10 shows the equipment that more people's drawing are carried out in web browser according to another aspect of the present invention.Such as figure Shown in 10, equipment includes：Device 1010 for creating the second viewing area；For receiving one group from one or more terminals Or the device 1020 of multigroup paint data, wherein the paint data is the progress single operation at one or more of terminals And generate；Device 1030 for generating one or more pictures according to one or more groups of paint datas；And it uses In on second viewing area Overlapping display include the device 1040 of the superposition picture of one or more of pictures, it is described folded It includes that superposition drafting part and superposition are left white part to add picture.

Example devices

After describing the method and apparatus of exemplary embodiment of the invention, next, introducing according to the present invention The terminal that more people's drawing are carried out in web browser of another aspect.

Person of ordinary skill in the field it is understood that various aspects of the invention can be implemented as system, method or Computer readable storage medium.Therefore, various aspects of the invention can be embodied in the following forms, i.e.,：Complete hardware The embodiment party combined in terms of embodiment, complete Software Implementation (including firmware, microcode etc.) or hardware and software Formula may be collectively referred to as circuit, " module " or " system " here.

In some possible embodiments, terminal of the invention can include at least one or more processors and At least one processor.Wherein, the memory has program stored therein, when described program is executed by the processor so that institute It states processor and executes following operation：In operation S710, the first workspace and the first viewing area are created；In operation S720, record the One terminal carries out the first data that single operation is generated in first workspace；In operation S730, according to described first Data create the first picture, and first picture includes drawing part and being left white part；It is aobvious described first in operation S740 Show in area, Overlapping display includes the first superposition picture of first picture；And in operation S750, transmission first number According to so that second terminal generates the first reciprocity picture according to first data.

Further, when described program is executed by the processor so that the processor executes following operation： S810 is operated, the second viewing area is created；In operation S820, one or more groups of drawing numbers from one or more terminals are received According to wherein the paint data carries out single operation at one or more of terminals and generates；In operation S830, root One or more pictures are generated according to one or more groups of paint datas；And in operation S840, in second viewing area Upper Overlapping display includes the superposition picture of one or more of pictures, and the superposition picture includes that part and superposition are drawn in superposition It is left white part.

This embodiment according to the present invention is described referring to Figure 11 carries out more people's drawing in web browser Terminal 1.The terminal 1 that Figure 11 is shown is only an example, should not be brought to the function and use scope of the embodiment of the present invention Any restrictions.

As shown in figure 11, terminal 1 can be showed in the form of universal computing device, including but not limited to：At least one place Manage device 10, at least one processor 20, the bus 60 for connecting different system component.

Bus 60 indicates one or more in a few class bus structures, including memory bus or Memory Controller, Peripheral bus, graphics acceleration port, processor or the local bus using the arbitrary bus structures in a variety of bus structures.

Memory 20 may include readable medium, such as random access memory (RAM) 21 and/or cache memory 22, it can further include read-only memory (ROM) 23.

Memory 20 can also include program module 24, and such program module 24 includes but not limited to：Operating system, one A or multiple application programs, other program modules and program data, can in each or certain combination in these examples It can include the realization of network environment.

Terminal 1 can also be communicated with one or more external equipments 2 (such as keyboard, sensing equipment, bluetooth equipment etc.), It can be communicated with one or more other equipment.This communication can be carried out by input/output (I/O) interface 40, and It is shown on display unit 30.Also, terminal 1 can also pass through network adapter 50 and one or more network (example Such as LAN (LAN), wide area network (WAN) and/or public network, such as internet) communication.As shown, network adapter 50 It is communicated with other modules in terminal 1 by bus 60.It should be understood that although not shown in the drawings, but can be used in conjunction with terminal 1 Other hardware and/or software module, including but not limited to：Microcode, device driver, redundant processing unit, external disk drive Dynamic array, RAID system, tape drive and data backup storage system etc..

Exemplary computer-readable storage medium

In some possible embodiments, various aspects of the invention are also implemented as a kind of computer-readable storage The form of medium comprising program code, when said program code is when being executed by processor, said program code is for making institute It states processor and executes method described above.

The arbitrary combination of one or more readable mediums may be used in the computer readable storage medium.Readable medium can To be readable signal medium or readable storage medium storing program for executing.Readable storage medium storing program for executing for example may be-but not limited to-electricity, magnetic, Optical, electromagnetic, the system of infrared ray or semiconductor, device or device, or the arbitrary above combination.Readable storage medium storing program for executing is more Specific example (non exhaustive list) includes：Electrical connection, portable disc, hard disk with one or more conducting wires are deposited at random It is access to memory (RAM), read-only memory (ROM), erasable programmable read only memory (EPROM or flash memory), optical fiber, portable Compact disk read-only memory (CD-ROM), light storage device, magnetic memory device or above-mentioned any appropriate combination.

As shown in figure 12, computer readable storage medium 3 according to the embodiment of the present invention is described, may be used Portable compact disc read only memory (CD-ROM) and include program code, and can be on terminal device, such as PC Operation.However, the computer readable storage medium of the present invention is without being limited thereto, in this document, readable storage medium storing program for executing can be appointed What include or storage program tangible medium, the program can be commanded execution system, device either device use or and its It is used in combination.

It can be write with any combination of one or more programming languages for executing the program that operates of the present invention Code, described program design language include object oriented program language-Java, C++ etc., further include conventional Procedural programming language-such as " C " language or similar programming language.Program code can be fully in user It executes on computing device, partly execute on a user device, being executed as an independent software package, partly in user's calculating Upper side point is executed or is executed in remote computing device or server completely on a remote computing.It is being related to far In the situation of journey computing device, remote computing device can pass through the network of any kind --- including LAN (LAN) or extensively Domain net (WAN)-be connected to user calculating equipment, or, it may be connected to external computing device (such as utilize Internet service Provider is connected by internet).

In addition, although the operation of the method for the present invention is described with particular order in the accompanying drawings, this do not require that or Hint must execute these operations according to the particular order, or have to carry out shown in whole operation could realize it is desired As a result.Additionally or alternatively, it is convenient to omit multiple steps are merged into a step and executed by certain steps, and/or by one Step is decomposed into execution of multiple steps.

Although by reference to several spirit and principle that detailed description of the preferred embodimentsthe present invention has been described, it should be appreciated that, this It is not limited to the specific embodiments disclosed for invention, does not also mean that the feature in these aspects cannot to the division of various aspects Combination is this to divide the convenience merely to statement to be benefited.The present invention is directed to cover appended claims spirit and Included various modifications and equivalent arrangements in range.

Claims

1. a kind of method carrying out more people's drawing in web browser, including：

Create the first workspace and the first viewing area；

Record first terminal carries out the first data that single operation is generated in first workspace；

The first picture is created according to first data, first picture includes drawing part and being left white part；

In first viewing area, Overlapping display includes the first superposition picture of first picture；And

First data are transmitted, so that second terminal generates the first reciprocity picture according to first data.

2. according to the method described in claim 1, wherein, the single operation includes at least one of following operation：

The single drawing operation of no interruption；

Single erasing operation without interruption；

To the single selection operation of lines characteristic；

To the single selection operation of template picture；And

Single transformation operation to template picture.

3. a kind of method carrying out more people's drawing in web browser, including：

Create the second viewing area；

Receive one or more groups of paint datas from one or more terminals, wherein the paint data be one or Single operation is carried out at multiple terminals and is generated；

One or more pictures are generated according to one or more groups of paint datas；And

Overlapping display includes the superposition picture of one or more of pictures on second viewing area, the superposition picture packet It includes superposition drafting part and superposition is left white part.

4. according to the method described in claim 3, wherein, one or more of pictures are stored in a manner of array.

5. according to the method described in claim 4, wherein, when arbitrary one or more groups of in one or more groups of paint datas When paint data changes, corresponding one or more picture is updated.

6. a kind of method carrying out more people's drawing in web browser, including：

At first terminal,

Create the first workspace and the first viewing area；

It is recorded in and carries out the first data that single operation is generated in first workspace；

The first picture is created according to first data, first picture includes that the first drafting part and first are left white portion Point；

On first viewing area, Overlapping display includes the first superposition picture of first picture, wherein described first is folded It includes that the first superposition drafting part and the first superposition are left white part to add picture；And

Transmit first data；

At second terminal,

Create the second viewing area；

Receive the first data from the first terminal；

The first reciprocity picture is generated according to the first data received；And

Overlapping display includes the second superposition picture of the described first reciprocity picture on second viewing area, wherein described second Superposition picture includes that the second superposition drafting part and the second superposition are left white part.

7. a kind of equipment carrying out more people's drawing in web browser, including：

Device for creating the first workspace and the first viewing area；

The device for the first data that single operation is generated is carried out for recording first terminal in first workspace；

For creating the device of the first picture according to first data, first picture includes drawing part and being left white portion Point；

For in first viewing area, Overlapping display to include the device of the first superposition picture of first picture；And

Device for transmitting first data, so that second terminal generates the first Uniform Graphs according to first data Piece.

8. a kind of equipment carrying out more people's drawing in web browser, including：

Device for creating the second viewing area；

Device for receiving one or more groups of paint datas from one or more terminals, wherein the paint data be Single operation is carried out at one or more of terminals and is generated；

For generating the device of one or more pictures according to one or more groups of paint datas；And

For on second viewing area Overlapping display include one or more of pictures superposition picture device, it is described Superposition picture includes that superposition drafting part and superposition are left white part.

9. a kind of terminal carrying out more people's drawing in web browser, including：

One or more processor；

Memory；

The program being stored in the memory, when being executed by one or more of processors, described program makes described Processor executes the method as described in any one of claim 1-5.

10. a kind of computer readable storage medium, the computer-readable recording medium storage has program, when described program is located When managing device execution so that the processor executes the method as described in any one of claim 1-5.