canvas教程

HTML5 canvas 在线画笔绘图工具(四)

字号+ 作者:H5之家 来源:H5之家 2017-01-30 09:04 我要评论( )

HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成。 TDrawHandler需要完成以下工作 1、聚集类用于管理 绘图 的命令 TCommand 2、管理鼠标事件

HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成。 TDrawHandler需要完成以下工作 1、聚集类用于管理 绘图 的命令 TCommand 2、管理鼠标事件 ,鼠标点击第一下开始 绘图 ,鼠标点击第二下 绘图 完成。在点第一次和第二次之间在画板上拖动

HTML5画图命令

图形的绘制是由TDrawHandler与TCommand 协同工作完成。

TDrawHandler需要完成以下工作

1、聚集类用于管理绘图的命令 TCommand

2、管理鼠标事件 ,鼠标点击第一下开始绘图,鼠标点击第二下绘图完成。在点第一次和第二次之间在画板上拖动鼠标时系统动态的根据鼠标位置绘图。

3、将所有绘图命令生成json数据,以便于保存。

4、打开新的图形

TCommand类由 直线、矩形、圆几个基本命令组成。

 

画图控制类 TDrawHandler

如下代码所示

TDrawhandler 首先管理着一个CommandList记载得所有的绘图命令。并通过RedrawScreen 函数完成图形的绘制,该函数循环调用所有的绘图命令的RunCommand函数,完成在画布上的各自绘图任务,最终完成完整的图形绘制。

 

当检测到画布的第一次鼠标单击事件时,调用 Toolbar的getNewCommand函数,Toolbar会根据当前在Toolbar上选中的命令按钮生成对应的TCommand对象。

</pre><p></p><p><span >

画图命令 TCommand

 

在TCommand中有三个内部类,分别是TLineCommand、TArcCommand,TRectCommand司职具体的图形绘制任务。

在建立TCommand时自动调用 CreateCommand根据命令的类型建立相应的Command对象。每一个Command内部类均有一个draw函数来完成具体的图形绘制任务。

 

function TCommand(Canvas,CommandType) { var ctLine=1; var ctRect=2; var ctArc=3; var commandtype=CommandType; var Command; var firstPoint=new function(){var x;var y;}; var secondPoint=new function(){var x;var y;}; var Context=Canvas.getContext("2d"); var BorderColor='#990000'; var LineWidth=2; var FillColor='black'; var ShapeProperty; csRunning='running'; csFinish='finish'; var State=csRunning; var Points=new Array(); var Offset=new function(){var x=0;var y=0;}; CreateCommand(CommandType); Offset.x=0; Offset.y=0; function CreateCommand(ct) { if (ct==1) Command=new TLineCommand(); else if (ct==2) Command=new TRectCommand(); else if (ct==3) Command=new TArcCommand(); } this.RunCommand=function() { Command.draw(); }; function LX(x) { return x-Canvas.offsetLeft+Offset.x; } function LY(y) { return y-Canvas.offsetTop+Offset.y; } function TLineCommand() { this.draw=function() { Context.strokeStyle=BorderColor; Context.lineWidth=LineWidth; Context.beginPath(); Context.moveTo(LX(firstPoint.x),LY(firstPoint.y)); Context.lineTo(LX(secondPoint.x),LY(secondPoint.y)); Context.stroke(); Context.closePath(); }; } function TRectCommand() { this.draw=function() { Context.strokeStyle=BorderColor; Context.lineWidth=LineWidth; Context.strokeRect(LX(firstPoint.x),LY(firstPoint.y),LX(secondPoint.x)-LX(firstPoint.x),LY(secondPoint.y)-LY(firstPoint.y)); }; } function TArcCommand() { this.draw=function() { Context.beginPath(); dx=LX(secondPoint.x)-LX(firstPoint.x); dy=LY(secondPoint.y)-LY(firstPoint.y); r=dx>dy?dx:dy; if (r<0) return; Context.arc(LX(firstPoint.x),LY(firstPoint.y),r,0,2*Math.PI,1); Context.strokeStyle = BorderColor; Context.lineWidth = LineWidth; Context.stroke(); Context.closePath(); }; } this.getLineWidth=function() { return LineWidth; }; this.getBorderColor=function() { return BorderColor; }; this.CommandType=function() { return commandtype; }; this.setFirstPoint=function(x,y) { firstPoint.x=x; firstPoint.y=y; }; this.getFirstPoint=function() { return firstPoint; }; this.getSecondPoint=function() { return secondPoint; }; this.setSecondPoint=function(x,y) { secondPoint.x=x; secondPoint.y=y; }; this.setOffset=function (x,y) { Offset.x=x; Offset.y=y; }; var Finish=function() { State=csFinish; }; this.Finished=function() { return (State==csFinish); }; this.OnClick=function() { if ((commandtype==ctLine)||(commandtype==ctRect)||(commandtype==ctArc)) { Finish(); } }; this.setShapeProperty=function(value) { ShapeProperty=value; LineWidth=ShapeProperty.getLineWidth(); BorderColor=ShapeProperty.getLineColor(); }; this.getPoints=function() { return Points; }; }

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • HTML5学习记要-canvas学习之获取鼠标在canvas上的坐标位置

    HTML5学习记要-canvas学习之获取鼠标在canvas上的坐标位置

    2017-01-30 10:00

  • canvas的发音、翻译、参考例句

    canvas的发音、翻译、参考例句

    2017-01-30 09:00

  • Canvas控件最后一蛋——CanvasGroup

    Canvas控件最后一蛋——CanvasGroup

    2017-01-29 18:01

  • Canvas教程(4)——多线条组成图形

    Canvas教程(4)——多线条组成图形

    2017-01-29 08:00

网友点评
a