HTML5 Canvas Online Brush Drawing Tool (III)

Assembling Artboards (Tdrawbuilder)

In this section we will assemble the sidebar and the artboard so that they can work together.

The artboard is assembled by a named Tdrawbuilder. Before we explain the Tdrawbuilder object in detail, let's look at the HTML code of the program.

Canvas is made up of three canvases

toolbar is used to draw a toolbar, Drawcanvas a canvas for drawing, opencanvas to display a small picture when you open a saved picture.

Assemble the toolbar, canvas, and small picture display canvas by creating a new Tdrawbuilder object, Tdrawbuilder (Toolbar,drawcanvas,opencanvas).

<div id= "mainform" class= "mainform" align= "center" > <canvas id= "Toolbar" width= "780" height= "to" > your browser does not Supports HTML canvas</canvas> <canvas id= "Drawcanvas" width= "760" height= "style=" Margin-top:10px;margin-left: 2PX;BORDER:2PX solid black; Background-color:white "> Your browser does not support HTML canvas</canvas> <canvas id=" Opencanvas "width=" 760 "height=" the " Yle= "margin-top:10px;margin-left:2px;border:2px solid black; Background-color:white "> Your browser does not support HTML canvas</canvas> <script type=" Text/javascript "> var toolbar=    document.getElementById (' toolbar ');    var Drawcanvas=document.getelementbyid (' Drawcanvas ');    var Opencanvas=document.getelementbyid (' Opencanvas ');    Opencanvas.style.visibility= "hidden"; <span style= "color: #ff0000;" >var drawbuilder=new Tdrawbuilder (Toolbar,drawcanvas,opencanvas); </span><span style= "color: #ff0000;"     > var drawhandler=new tdrawhandler (Drawcanvas,drawbuilder.gettoolbarins ()); DrawbuIlder.setdrawhandler (Drawhandler);</span> </script> 

Let's look at how Tdrawbuilder is going to accomplish these tasks. First of all, we see that the initialization function of Tdrawbuilder calls 7 functions in the initialization function, and they complete the following functions in turn: 1, create a drawing command button line, rectangle, circle, etc. 2, Line width Select button 3, color Select button 4, New button 5, Save button 6, Open button 7, Associate Toolbar object and canvas mouse events

function Buildtoolbar () {Buildcommandbutton (); Buildlinestyle (); Buildcolor (); Buildnewfunction (); Buildsavefunction (); Buildopenfunction (); Toolbar.installevents ();}

1. Create a drawing command button line, rectangle, circle, etc. buildcommandbutton establish a line, rectangle, Circle button Object Timagebutton,timagebutton Detailed introduction You can view the previous chapter HTML5 canvas Online Brush Drawing Tool (ii) obtained. The currently created object is added to an array managed by Ttoolbar for subsequent operations through the AddButton provided by Ttoolbar.

function Buildcommandbutton () {//Line button btnlist[0] = new Timagebutton (1, "Images/linenormal.png", "images/linemoveon.png "," Images/linemousedown.png ", Currentleft, 8, Toolbar, 1); Toolbar.addbutton (Btnlist[0]); Currentleft = currentleft + 32 + 10;//line button btnlist[1] = new Timagebutton (2, "Images/rectnormal.png", "images/rectmoveon.pn G "," images/rectmousedown.png ", Currentleft, 8, Toolbar, 1); Toolbar.addbutton (btnlist[1]);//straight Button Currentleft = Currentleft + + 10;btnlist[2] = new Timagebutton (3, "images/ Arcnormal.png "," Images/arcmoveon.png "," Images/arcmousedown.png ", Currentleft, 8, (+), 1, Toolbar; Toolbar.addbutton (btnlist[2]);}

2, line width selection button Buildlinestyle

function Buildlinestyle () {var Top = 2; Currentleft = Currentleft + 50; Linestyles[0] = new Timagebutton (1, "Images/w1n.png", "Images/w1m.png", "Images/w1d.png", Currentleft, Top, +, +, Tool Bar, 2); Toolbar.addbutton (Linestyles[0]); top = top + 14; LINESTYLES[1] = new Timagebutton (2, "Images/w2n.png", "Images/w2m.png", "Images/w2d.png", Currentleft, Top, +, +, Tool Bar, 2); Toolbar.addbutton (Linestyles[1]); top = top + 14; LINESTYLES[2] = new Timagebutton (3, "Images/w3n.png", "Images/w3m.png", "Images/w3d.png", Currentleft, Top, +, +, Tool Bar, 2); Toolbar.addbutton (linestyles[2]); top = top + 14; LINESTYLES[3] = new Timagebutton (4, "Images/w4n.png", "Images/w4m.png", "Images/w4d.png", Currentleft, Top, +, +, Tool Bar, 2); Toolbar.addbutton (Linestyles[3]); top = top + 14; LINESTYLES[4] = new Timagebutton (5, "Images/w5n.png", "Images/w5m.png", "Images/w5d.png", Currentleft, Top, +, +, Tool Bar, 2); Toolbar.addbutton (Linestyles[4]); top = top + 14; LINESTYLES[5] = new Timagebutton (6, "images/w6n.png "," Images/w6m.png "," Images/w6d.png ", Currentleft, Top, (+), Toolbar, 2); Toolbar.addbutton (Linestyles[5]); top = top + 14; Currentleft = Currentleft + 140;}

3. Color selection button Buildcolor as shown in the code below, we first define a static array containing the color values and set the color value as the command parameter of the Tcolorbutton. Note that finally we set up a slightly larger 64*64 of the current selected color button, currentbordercolor because this is just a demo teaching program, so I only made a button to set the border, of course, you can also create a similar method of background and fill color.

function Buildcolor () {var Top = 2;var left = Currentleft;var Colorarray = ["#000000", "#333333", "#666666", "#999999", "# CCCCCC "," #FFFFFF "," #FF0000 "," #00FF00 "," #0000FF "," #FFFF00 "," #00FFFF "," #FF00FF "];var colorbuttons = new Array (); for ( var i = 0; i < colorarray.length; i++) {if ((i% 4) = = 0) {left = Currentleft; Top = 2 + (Math.floor (I/4)) * 26;} Elseleft = Currentleft + (i% 4) * 26; Colorbuttons[i] = new Tcolorbutton (colorarray[i), left, Top, all, 3, Toolbar; Toolbar.addbutton (Colorbuttons[i]);} var currentbordercolor = new Tcolorbutton ("Black", Currentleft + 4 * + 4, 8,); Toolbar.addbutton (Currentbordercolor); Toolbar.setbordercolorbutton (Currentbordercolor); Currentleft = currentleft + 4 * 26 + 74;}

4, "new" button buildnewfunction New button is still an icon button, through the call to donewdrawing empty the current canvas, and before drawing initialization.

function Buildnewfunction () {currentleft = Currentleft + 10; Newbutton = new Timagebutton (1, "Images/newnormal.png", "Images/newnormal.png", "Images/newmove.png", CurrentLeft, 8, Toolbar, 5); Newbutton.onclick = function () {donewdrawing ();}; Toolbar.addbutton (Newbutton); Currentleft = Currentleft + 64;}

function donewdrawing () {drawhandler.newdrawing ();D Rawhandler.setid (NewGuid (True));}

5, 6, "Save" button and "open" button in subsequent chapters we will be devoted to the discussion. 7, the Association toolbar object and the canvas mouse event toolbar.installevents, the associated mouse event has been described in the previous chapter, see HTML5 Canvas Online Brush drawing Tool (II)

HTML5 Canvas Online Brush Drawing Tool (III)