组装画板（TDrawBuilder）

 

在这一小节中我们要把工具条和画板组装起来，让他们可以协同进行工作。

画板通过一个命名为TDrawBuilder来进行组装。在详细讲解TDrawBuilder对象之前我们来看一下程序的HTML代码。

画布由三个Canvas组成

toolbar用于绘制工具条，drawCanvas 用于画图的画布，openCanvas 用于在打开保存的图片时显示小图片。

通过建立一个新的TDrawBuilder对象 new TDrawBuilder(toolbar,drawcanvas,opencanvas),将工具条、画布、小图片显示画布组装起来。

 

 

     
   
      
       你的浏览器不支持HTML Canvas
          
      
       你的浏览器不支持HTML Canvas
          
      
       你的浏览器不支持HTML Canvas
        
      
     

接下来我们介绍一下TDrawBuilder是如何来完成这些任务的

我们首先来看TDrawBuilder的初始化函数

在初始化函数中一共调用了7个函数，它们依次完成以下功能：

1、建立绘图命令按钮 直线、矩形、圆等

2、线宽选择按钮

3、颜色选择按钮

4、“新建”按钮

5、“保存”按钮

6、“打开”按钮

7、关联工具条对象与画布的鼠标事件

function BuildToolbar() {		BuildCommandButton();		BuildLineStyle();		BuildColor();		BuildNewFunction();		BuildSaveFunction();		BuildOpenFunction();		Toolbar.InstallEvents();	}

 

1、建立绘图命令按钮 直线、矩形、圆等 BuildCommandButton

建立直线、矩形、圆按钮对象TimageButton，TImageButton的详细介绍你可以通过查看上一章  获得。

通过TToolbar提供的AddButton将当前建立的对象添加到由TToolbar管理的一个数组中，以便于后续的操作。

function BuildCommandButton() {		//直线按钮		btnList[0] = new TImageButton(1, "Images/lineNormal.png", "Images/lineMoveOn.png", "Images/lineMouseDown.png", CurrentLeft, 8, 32, 32, Toolbar, 1);		Toolbar.AddButton(btnList[0]);		CurrentLeft = CurrentLeft + 32 + 10;		//直线按钮		btnList[1] = new TImageButton(2, "Images/rectNormal.png", "Images/rectMoveOn.png", "Images/rectMouseDown.png", CurrentLeft, 8, 32, 32, Toolbar, 1);		Toolbar.AddButton(btnList[1]);		//直线按钮		CurrentLeft = CurrentLeft + 32 + 10;		btnList[2] = new TImageButton(3, "Images/arcNormal.png", "Images/arcMoveOn.png", "Images/arcMouseDown.png", CurrentLeft, 8, 32, 32, Toolbar, 1);		Toolbar.AddButton(btnList[2]);	}

2、线宽选择按钮 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, 128, 16, Toolbar, 2);		Toolbar.AddButton(LineStyles[0]);		Top = Top + 14;		LineStyles[1] = new TImageButton(2, "Images/W2N.png", "Images/W2M.png", "Images/w2d.png", CurrentLeft, Top, 128, 16, Toolbar, 2);		Toolbar.AddButton(LineStyles[1]);		Top = Top + 14;		LineStyles[2] = new TImageButton(3, "Images/W3N.png", "Images/W3M.png", "Images/w3d.png", CurrentLeft, Top, 128, 16, Toolbar, 2);		Toolbar.AddButton(LineStyles[2]);		Top = Top + 14;		LineStyles[3] = new TImageButton(4, "Images/W4N.png", "Images/W4M.png", "Images/w4d.png", CurrentLeft, Top, 128, 16, Toolbar, 2);		Toolbar.AddButton(LineStyles[3]);		Top = Top + 14;		LineStyles[4] = new TImageButton(5, "Images/W5N.png", "Images/W5M.png", "Images/w5d.png", CurrentLeft, Top, 128, 16, Toolbar, 2);		Toolbar.AddButton(LineStyles[4]);		Top = Top + 14;		LineStyles[5] = new TImageButton(6, "Images/W6N.png", "Images/W6M.png", "Images/w6d.png", CurrentLeft, Top, 128, 16, Toolbar, 2);		Toolbar.AddButton(LineStyles[5]);		Top = Top + 14;		CurrentLeft = CurrentLeft + 140;	}

3、颜色选择按钮 BuildColor

 如下面代码所示，我们先定义一个包含了色彩值的静态数组，将色彩值做为TColorButton的Command参数建立颜色按钮。

注意最后我们建立了一个稍大的 64*64的当前选中颜色的按钮，CurrentBorderColor

由于这只是一个演示教学程序，所以我只做了一个设置边框的按钮，当然你也可以按类似的方法建立背景和填充色。

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;			} else				Left = CurrentLeft + (i % 4) * 26;			ColorButtons[i] = new TColorButton(ColorArray[i], Left, Top, 24, 24, Toolbar, 3);			Toolbar.AddButton(ColorButtons[i]);		}		var CurrentBorderColor = new TColorButton("black", CurrentLeft + 4 * 26 + 10, 8, 64, 64, Toolbar, 4);		Toolbar.AddButton(CurrentBorderColor);		Toolbar.setBorderColorButton(CurrentBorderColor);		CurrentLeft = CurrentLeft + 4 * 26 + 74;	}

4、“新建”按钮 BuildNewFunction

新建按钮依然是个图标按钮，通过对DoNewDrawing的调用清空当前画布，并进行绘制前的初始化。

 

function BuildNewFunction() {		CurrentLeft = CurrentLeft + 10;		NewButton = new TImageButton(1, "Images/newNormal.png", "Images/newNormal.png", "Images/newMove.png", CurrentLeft, 8, 64, 64, Toolbar, 5);		NewButton.OnClick = function() {			DoNewDrawing();		};		Toolbar.AddButton(NewButton);		CurrentLeft = CurrentLeft + 64;	}

 

function DoNewDrawing() {		Drawhandler.NewDrawing();		Drawhandler.setId(NewGuid(true));	}

5、6、“保存”按钮和“打开”按钮在后续章节我们将专门进行讨论。

7、关联工具条对象与画布的鼠标事件 Toolbar.InstallEvents，关联鼠标事件已在上一章中进行了介绍，请参阅