Node Learning Note (iii): Based on Socket.io Web Edition you draw my Guess (a)

After a dismal interview, but also know their shortcomings, just recently in the Learning node, Heart will have to do a web version of your painting I guess the idea

First of all, the idea, in the preparation work, there are two approximate ideas:

1. Specify a div, capture mouse events, dynamically generate position absolute, a 1px long and wide red Div, so you can simulate the trajectory of the line, do a long polling, constantly get the DOM structure, pushed to the socket port, And then broadcast it to all the clients.

2. Use canvas to draw data from the canvas to the socket port and broadcast all clients

In fact, there are two ideas, is nothing more than the construction of this piece of divergence, method one, a large number of DOM tree redraw, will undoubtedly cause a huge burden on the browser, but canvas, but also suffering from data can not be exported, but the effort is not negative, the data flow of the canvas can be through Todataurl ( ) to export the data, so start!

Var paint=false;//determines whether it is necessary to paint var Container=document.getelementbyid (' container ') var context=container.getcontext ("2d ") var mousex=0,mousey=0,nowx=0,nowy=0;//store coordinate Records

Do an object to summarize the events, including the replacement of position, canvas drawing and redrawing, export data

var position={reset:function (actionx,actiony,goalx,goaly) {  //coordinate replace Paint=true;var order= "" +actionx+ "=" +goalX+ " , "+actiony+" = "+goaly;eval (order); Console.log (MouseX);},init:function () {        //coordinates 0 console.log (" init ");p aint= false;mousex=0;mousey=0;nowx=0;noxy=0;}} var canvas={init:function () {     //canvas initialization context.strokestyle = "Blue";                    Context.strokerect (0,0,300,200);                Context.stroke ();},draw:function (lastx,lasty,nowx,nowy) {    //canvas dash context.linewidth = 1; Context.beginPath () ; Context.moveto (LASTX, lasty); Context.lineto (Nowx,nowy); Context.stroke (); Position.reset (' MouseX ', ' Mousey ', nowx,nowy);},redraw:function () {    //canvas redraw position.init ();},returndata: function () {        //canvas Export data stream socket.emit (' Startconnect ', Container.todataurl ()}}}

Drawing the most important thing is the processing of the coordinates, we recorded when the mouse click on the coordinates, stored up to pay mousexy, in MouseMove when the record coordinates to pay NOWXY, with the LineTo to draw the line, the mouse click Bounce, Paint set to false stop painting

$ ("#container"). MouseDown (function (e) {position.reset (' mousex ', ' Mousey ', E.pagex-this.offsetleft, E.pagey-this.offsettop); Console.log (mousex+ ":" +mousey);}) $ ("#container"). MouseMove (function (e) {if (paint) {Console.log (mousex+ ":" +mousey);p osition.reset (' nowx ', ' Nowy ', E.pagex-this.offsetleft,e.pagey-this.offsettop); Canvas.draw (mousex,mousey,nowx,nowy);}) $ ("#container"). MouseUp (function (e) {if (paint) {position.init (); Canvas.returndata ();}}) $ ("#container"). MouseLeave (function (e) {if (paint) {position.init ();}})

Effect

OK, the drawing even solved, the following to solve is the client management and synchronization

Node Learning Note (iii): Based on Socket.io Web Edition you draw my Guess (a)