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

时间:2022-11-04 14:46:47

多个canvas画布

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

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

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

 

canvas 主画布

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

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

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

 

ghostCanvas 编辑状态

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

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

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

 

gridCanvas 网格线

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

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

 

hitCanvas 元素影子

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

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