Using the Canvas canvas feature of HTML5, painting on the page, and then submitting the color of each point of the canvas to the server through SIGNALR, the server also pushes the information of these canvases to other clients, enabling the ability to share the same artboard
Similarly, painting in one browser, other browsers synchronizing the content, and the page refresh or first load can also display the previous painting content (the site does not restart the case)
Implementation process
First, the service side
The main function of the service-side code is to receive the color of the drawing coordinate point and coordinate point sent by the client, and push the new coordinate point information to the client, and finally the service side will save the drawing coordinate point information to the memory, so that the client can refresh or first enter to see the previous painting information.
Step1:
Create an empty type of ASP. NET 4.5 site
Step2:
The introduction of the SIGNALR NuGet package will automatically introduce the associated associated package
Install-package Microsoft.AspNet.SignalR
Step3:
Create a new SIGNALR Hub Class
The implementation code is as follows:
Public classDrawingboard:hub {Private Const intBoardwidth = -; Private Const intBoardheight = -; Private Static int[,] _pointbuffer =Getemptypointbuffer (); PublicTask Drawpoint (intXinty) {if(X <0) {x=0; } if(x >=boardwidth) {x= Boardwidth-1; } if(Y <0) {y=0; } if(Y >=boardheight) {y= Boardheight-1; } intcolor =0; int. TryParse (Clients.Caller.color, outcolor); _pointbuffer[x, Y]=color; returnClients.Others.drawPoint (x, y, Clients.Caller.color); } PublicTask Clear () {_pointbuffer=Getemptypointbuffer (); returnClients.Others.clear (); } Public OverrideTask onconnected () {returnClients.Caller.update (_pointbuffer); } Private Static int[,] Getemptypointbuffer () {varBuffer =New int[Boardwidth, Boardwidth]; returnbuffer; } }View Code
STEP4:
Create a new startup class
Public class Startup { publicvoid Configuration (Iappbuilder app) { app. MAPSIGNALR (); } }This completes the function implementation of the service side.
Second, the client
Step1:
The client's HTML page only needs to define a canvas element and a button to clear the canvas
<!DOCTYPE HTML> <HTML> <Head> <title>Online artboards</title> <MetaCharSet= "Utf-8" /> <style>Div{margin:3px; }Canvas{Border:2px solid #808080;cursor:default; } </style> </Head> <Body> <Div> <Div> <label for= "Color">Color:</label> <SelectID= "Color"></Select> </Div> <CanvasID= "Canvas"width= "+"Height= "+"></Canvas> <Div> <ButtonID= "Clear">Clear Canvas</Button> </Div> </Div> <Scriptsrc= "/scripts/jquery-1.6.4.min.js"></Script> <Scriptsrc= "/scripts/jquery.signalr-2.2.0.min.js"></Script> <Scriptsrc= "/signalr/js"></Script> <Scriptsrc= "/scripts/drawingboard.js"></Script> </Body> </HTML>Html
Step2:
Create a Drawingboard.js file in the scripts directory to implement the main canvas operations and SINGALR event bindings.
The main is to bind the canvas of the MouseMove event, and then mousemove the event to implement painting, while the painting of the information sent to the server, the client at the same time to receive the service-side push of the painting information, real-time lift the local canvas.
After the client connects successfully, it gets the historical drawing information pushed from the server to realize the effect of the canvas before recording.
$(function () { //Canvas definition Start varcolors = ["Black", "red", "green", "blue", "yellow", "magenta", "white"]; varCanvas = $ ("#canvas"); varColorelement = $ ("#color"); for(vari = 0; i < colors.length; i++) {colorelement.append ("<option value=" + (i + 1) + ">" + colors[i "+" </option> "); } varbuttonpressed =false; Canvas. MouseDown (function() {buttonpressed=true; }). MouseUp (function() {buttonpressed=false; }). MouseMove (function(e) {if(buttonpressed) {setpoint (E.offsetx, E.offsety, Colorelement.val ()); } }); varCTX = Canvas[0].getcontext ("2d"); functionsetpoint (x, y, color) {Ctx.fillstyle= Colors[color-1]; Ctx.beginpath (); Ctx.arc (x, Y,2, 0, Math.PI * 2); Ctx.fill (); } functionclearpoints () {Ctx.clearrect (0, 0, Canvas.width (), Canvas.height ()); } $("#clear"). Click (function() {clearpoints (); }); //end of canvas definition //SignalR Client Code varHub =$.connection.drawingboard; Hub.state.color=Colorelement.val (); varConnected =false; Colorelement.change (function() {Hub.state.color= $( This). Val (); }); Canvas.mousemove (function(e) {if(Buttonpressed &&connected) {Hub.server.drawPoint (Math.Round (E.OFFSETX), Math.Round (e.offsety)); } }); $("#clear"). Click (function () { if(connected) {hub.server.clear (); } }); //Defining Client MethodsHub.client.clear =function() {clearpoints (); }; Hub.client.drawPoint=function(x, y, color) {setpoint (x, y, color); }; Hub.client.update=function(points) {if(!points)return; varwidth =canvas.width (); varHeight =canvas.height (); for(varx = 0; x < width; X + +) { for(vary = 0; Y < height; y++) { varcolor =Points[x][y]; if(Color > 0) {setpoint (x, y, color); } } } }; $.connection.hub.start (). Done (function() {Connected=true; }); })Drawingboard
Full code Download
Examples of shared artboards implemented with SIGNALR
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
