软件项目技术点(3)——多画布职责分离

AxeSlide软件项目梳理   canvas绘图系列知识点整理

多个canvas画布

从下面的截图我们可以看到有5个canvasDOM元素，id分别为canvas，ghostCanvas，HitCanvas，gridCanvas和animation_canvas，这里我们先介绍前4个canvas的作用。从源码里可以看到这几个canvas的大小都是一样的。如果利用《软件项目技术点(2)——Canvas之获取Canvas当前坐标系矩阵》中介绍的getTeansform方法获取画布矩阵的6个值也是一样的。

 

canvas 主画布

正常状态下绘制所有元素在canvas主画布上面，包括移动旋转缩放画布时，及主循环一直在循环时也是在不断把所有元素绘制到canvas上。

如下图所示有文字元素，图片元素，图形元素等，都是绘制到canvas上

 

ghostCanvas 编辑状态

当点击选中某个元素，对该元素进行编辑时（编辑主要指大小，角度，位置坐标及其他属性如颜色等），因为主要改变的是一个或几个元素所以将其绘制到ghostCanvas上面，未选中编辑的其他元素仍在主画布canvas上维持原状。

如下图箭头图被选中，那么这张图片是绘制到了ghostCanvas上面。

 

gridCanvas 网格线

绘制如下图中的一条条网格线，其中有大格子和小格子。后面有具体讲解网格线的画法《软件项目技术点(5)——在canvas上绘制动态网格线》

 

hitCanvas 元素影子

我们通过改变hitCanvas标签的样式将其显示出来，可以看到它上面绘制的是一个一个矩形块。并且每个矩形块的颜色都是不一样的，为什么不一样呢？后面看到《软件项目技术点(4)——实现点击画布上元素》就明白这里的巧妙了