HTML5 canvas 在线画笔绘图工具(三)
组装画板(TDrawBuilder)
在这一小节中我们要把工具条和画板组装起来,让他们可以协同进行工作。
画板通过一个命名为TDrawBuilder来进行组装。在详细讲解TDrawBuilder对象之前我们来看一下程序的HTML代码。
画布由三个Canvas组成
toolbar用于绘制工具条,drawCanvas 用于画图的画布,openCanvas 用于在打开保存的图片时显示小图片。
通过建立一个新的TDrawBuilder对象 new TDrawBuilder(toolbar,drawcanvas,opencanvas),将工具条、画布、小图片显示画布组装起来。
<div id="mainForm" class="mainForm" align="center" > <canvas id="toolbar" width="780" height="105" >你的浏览器不支持HTML Canvas</canvas> <canvas id="drawCanvas" width="760" height="440" style="margin-top: 10px;margin-left: 2px;border:2px solid black; background-color: white" >你的浏览器不支持HTML Canvas</canvas> <canvas id="openCanvas" width="760" height="440" style="margin-top: 10px;margin-left: 2px;border:2px solid black; background-color: white" >你的浏览器不支持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>
接下来我们介绍一下TDrawBuilder是如何来完成这些任务的
function BuildToolbar() { BuildCommandButton(); BuildLineStyle(); BuildColor(); BuildNewFunction(); BuildSaveFunction(); BuildOpenFunction(); Toolbar.InstallEvents(); }
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]); }
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; }
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; }
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)); }
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。