HTML5 Canvas Online Brush Drawing Tool (III)

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.