机器人制证系统大屏可视化

0x01项目背景

本项目是一个机器人制证的可视化系统。 其中包括制证设备的显示和监控，质检设备的显示和监控；同时也包括AGV机器人的显示和监控。 制证设备用于制做证书，质检设备用于合格检查，而AGV机器人用于运输；AGV机器人还须要监控电量和充电状况和行进位置。

0x02设计稿

接到项目以后，你们就开始开心(谁知道呢)得干活了。 首先就是要出设计稿，设计小姐姐在通过和客户屡次的交涉讨论以后，交付了一个最终的设计版本。 设计稿是基于2D的应用，大概这个样子，详情以下图：

0x03 任务分解实现

首先肯定大的开发思路是使用HTML5的canvas来进行绘制，固然若是从头开发势必是比较难的，幸亏公司有一个中间件twaver.js，早已经把不少功能都作了很好的封装，才方便咱们开发的进行。

固然，咱们的开发过程更加简单，由于咱们用了一个更加高阶的工具，可视化编辑工具。下面的讲解，咱们会同时介绍下代码实现的思路和编辑器的实现思路。

首先，咱们先对设计图，作了下任务分解：

• 绘制标题栏
• 绘制墙体
• 绘制图例
• 绘制设备 机器人等
• 绘制统计图表

绘制标题栏

标题栏绘制包括日期、颜色块、标题、标题背景、标题下划线的绘制。

绘制日期

首先讲下日期的绘制，日期的绘制主要是对文本的绘制，直接使用canvas的fillText函数便可完成，相关实现思路比较简单。 中间的小方块就是一个平行四边形，平行四边形可使用路径来进行绘制便可，此处就不上代码了。

接下来就说下，经过咱们的编辑器是如何实现呢？ 很简单，编辑器的组件库中，有这个日期组件，直接拖拽过来就能够了呀！ 在此感谢编辑器组的开发小哥哥们的辛勤劳动，鼓掌！！

实际上稍微复杂一点，由于这个日期显示控件中，日期和时间部分中间有一堆平行四边形，这怎么办呢？ 其实编辑器实现也很简单，就是拖拽两个日期显示控件，前面一个显示日期，后面一个显示时间，而后在中间放几个平行四边形。平行四边形也是编辑器中自带的组件，操做So easy!

此处要介绍一下编辑器的批量生成功能。 因为有多个平行四边形，若是每次都从左侧的组件库中拖拽出来，那么每次都要调整尺寸，偏移角度等，并且还要考虑多个平行四边形之间的上下边缘对齐和间距相等问题。 若是使用批量生成功能，那就方便不少。如咱们先调整好一个平行四边形，而后使用批量生成功能，生成多个这样的平行四边形，而且会按照必定的规律顺序排列，本文中相关介绍就是一行等距排列，批量生成功能效果。

例如页面效果：指定必定的数量，行数，列数，行距，列距等设置，批量生成效果以下图：

固然设计图中，还存在多个平行四边形的颜色是不同的，颜色逐渐变淡的效果，这个目前还须要一个个调整，但愿编辑器的开发小哥哥们能尽快提供更加快捷的解决方案。

绘制标题

标题部分包括不少种效果，如箭头、文字、文字背景、文字下划线等。首先，咱们来看箭头的绘制，若是手写代码，这种箭头其实就是两个平行四边形的效果。 只需把两个平行四边形的路径链接起来便可。

使用编辑器怎么实现呢？ 有同窗可能已经举手了，咱编辑器有现成的箭头组件，直接拖过来就行。 不过我要告诉你，编辑器暂时并无现成的箭头组件。

你也不用以为遗憾。 编辑器虽然没有箭头组件，但有一个组合的功能， 能够把基础的组件组合，造成复杂组件的能力。就像前面说的，箭头实际上就是两个平行四边形组合造成。

所以能够拖一个平行四边形，调整其大小尺寸便可。 在此再要介绍下另外两个特殊技巧：

• 拖拽复制：按住shift键，拖动已有的图元组件，便可复制一个相同的图元。
• 垂直翻转： 点击右键，选中垂直翻转，便可获得垂直的镜像效果。

把原平行四边形和镜像的平行四边形组合起来，便可获得一个箭头的效果。一样的道理，能够获得右边的箭头效果。以下图所示：

结合前面批量生成的效果，便可获得整个箭头区域的页面设计图效果。

而后来看文字的效果，其实文字的效果比较简单，用canvas的fillText就能够完成，设计稿中的文字有阴影效果，因此绘制的时候也加上阴影效果便可：

ctx.shadowColor = 'blue';
ctx.shadowBlur = 12;
...
ctx.fillText('机器人制证系统');复制代码

在编辑器中，不只有现成的文本组件，并且还有丰富的样式调整功能，包括字体、颜色、阴影效果等。

如今再接着说下文本的下划线如何实现。看设计图中下划线是中间亮，两边暗的效果，并且是中间粗，两边细的效果。 看起来有点难度，好像直接用canvas绘制技术不是很好完成。

有人在想实在不行就让设计小姐姐切图片呗； 嗯，切图当然是能够的， 可是技术真的不能解决嘛？

实际上是能够的，首先中间亮两边暗的效果，其实很容易实现，使用渐变就能够了。 而事实上，用了渐变以后，若是两边的颜色是和背景贴近的颜色，就会有一种渐渐隐入背景的效果。此时端点两边会看起来比中间细，其实只是看起来这样，其实是同样粗细的， 这是视觉神经的反应效果。固然，咱们可视化原本就是给人看的，既然看起来能达到效果，那就不用管真实是什么样子啦。

下面是一段示例代码。

var canvas = document.getElementById('can');
      var ctx = canvas.getContext('2d');
      ctx.fillStyle = 'blue';
      ctx.fillRect(0,0,1000,1000);
      
      var grd=ctx.createRadialGradient(150,100,5,150,100,50);
      grd.addColorStop(0,"red");
      grd.addColorStop(0.3,"red");
      grd.addColorStop(1,"rgba(255,0,0,0.1)");
      ctx.strokeStyle = grd;
      ctx.lineWidth = 3;

      ctx.shadowBlur = 5;
      ctx.shadowColor = 'rgba(255,0,0,0.1)';

      ctx.beginPath();
      ctx.moveTo(100,100);
      ctx.lineTo(200,100);
      ctx.stroke();复制代码

最终的显示效果以下：

在编辑器中，是使用相似的思路来实现的，不过咱们用的不是线段，而是使用了矩形，让矩形的高很小便可。首先在编辑中，拖入一个矩形，而后设置其属性，使其不显示边框，并设置其填充样式为径向的渐变便可。

最终矩形的显示效果以下：

而后调整矩形的高度，好比把高度调整为1，最终效果以下：

而后就是文本的背景效果，其实背景效果和下划线的实现有着一样的思路，只是渐变颜色的透明度要调低一点，既然是背景，就不能喧宾夺主，不然会影响文字的显示。

经过编辑器编辑以后，标题的总体效果以下图所示：

绘制墙体

墙体的绘制包括两部分，一个是支撑柱，一个是墙体的路径。 这两部分都比较简单，支撑柱就是一个矩形方块。 墙体自己就是一个段路径，路径可使用canvas得path功能进行绘制。好比以下代码：

ctx.moveTo(x0，y0);
ctx.lineTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
ctx.strokeStyle = 'blue';
ctx.stroke();复制代码

在编辑器中，能够直接经过编辑打点得方式，生成路径。其中一个辅助功能是：按下ctrl键得时候，线条只能走水平，垂直，斜45度三个方向的操做。

绘制图例

首先看下图例区的内容：

从图上能够看出每一个图例左边是一个图形，这个后面再说，右边是文字及其下划线，文字及下划线前面说过了，此处再也不多说。

前面的图形，可让设计人员设计出来一张图片。 其实也可使用编辑器来作，编辑器里面有个模块，叫作图元编辑器，就是制做基本图形的。 咱们看图例前面的图形，其实就是一个圆环里面套一个圆形，而后有一条短横线或者使用圆的扇形绘制属性代替直线。用图元编辑很方便实现：

• 首先拖拽一个圆形到编辑区，而后设置其只显示边框，不显示填充，并使用阴影模糊效果。
• 拖拽另一个圆形到编辑区，设置其不显示边框，但显示填充，并使用阴影模糊效果。同时设置其尺寸比第一个圆形要小。
• 拖拽一条线段（或勾选圆的扇形绘制），链接两个圆形。

最终编辑出来得图元效果以下，下面是放大得效果

上述编辑好的图元，在场景编辑区直接使用便可。 该图元组件 + 文本组件 + 下划线 就组成了图例的效果。

绘制统计图表

首先看下图表区的内容：

能够把图表区的内容分红几个部分：

• 左右括号
• 圆形图表
• 文字 （包括文字前面的方块，文字，下划线等）

括号的绘制

前面说过了图元编辑模块，其实括号能够经过图元编辑作成一个图元。 就是几条线段的组合便可，以下图所示：

而后调整线段的粗细颜色和位置，既能够达到设计图中的效果：

上面图示的是左括号的效果。对于右括号，咱们可使用一样的思路建立一个右括号图元。

也能够在场景编辑的时候直接使用左括号，而后使用水平翻转的功能，实现镜像效果。

此处文字的绘制和标题的文字绘制相似，前面已经说过，包括文字前的方块，文字自己和文字的下划线效果等。 此处再也不赘述。

接下来就是要绘制图表了。 从设计稿中能够看出，图表主要是由几个圆形或者扇形的叠加组成的，属于比较简单的图表。

一种思路是经过代码进行定制。 这是比较简单的图表，经过arc函数的屡次组合应该能够实现，具体的实现代码，此处就不详述了。

另一种方式固然仍是经过图元编辑的功能，首先在页面上面拖出来四个圆形，而后分别调整他们的填充颜色，大小，边框颜色，起始结束角度等，能够获得以下图形：

其中填充颜色 能够指定位渐变，而后加上阴影效果，就能够获得中间的黑色渐变部分。

而后把这几个图形按照必定的顺序组织起来，就能够获得相关图表了，中心点对齐的功能让调整位置很方便。

有读者可能会会说，这个是一个固定的图，不能对接数据，实现动态效果？ 事实上，咱们编辑器能够作这块的数据的对接，数据能够影响图形的属性等，以此来实现动态效果。可是数据对接的部分，将会在后续文章讲述，本文不作重点讲述。 下同。

至此，统计图表的部分，制做完成了。

绘制设备 机器人

设备和机器人的图元相对复杂一些，以下图所示：

能够看出，图元种既有静态的图片部分，也有动态的绘制。

在图元编辑器种，能够把静态的图片和动画绘制的元素组织到一块儿。 好比机器人图元，下面是静态的图片，上面是一个文字编号 一个小的动态电池图表和一个表示百分比的文字。 静态的图片很显然，只能让设计小姐姐们帮忙了。

下面看看如何经过图元编辑来作出一个。

首先是编辑线条的部分，这个可使用链接体编辑线条的部分：

前面在讲解括号的绘制的时候，已经讲述过了。

此处先编辑出一个与图元种线段部分相似的形状，而后设置线段的显示样式位虚线，调整虚线的颜色等：

接下来编辑电池的部分。电池的部分能够考虑用三个矩形组成，一个矩形是不填充的，另外两个是填充的：

适当的组合到一块儿，便可造成一个电池的图形：

文本的编辑直接使用文本控件便可，此处很少赘述。

而后是静态的图片，图元编辑器中，有个图片控件，能够指定一个区域显示上场到服务器的静态图片：

双击控件选择图片：

最终效果以下图：

把线条 电池 文字组合在一块儿，就组成了机器人图元：

其余质检设备，执政设备等的图元制做过程相似，就不赘述了。

0x03 场景生成

前面说了如下内容：

• 绘制标题栏
• 绘制墙体
• 绘制图例
• 绘制设备 机器人等
• 绘制统计图表

其中标题栏 和墙体是在场景中生成的，而图例 设备 机器人 统计图表等，主要体现了相关的图元的制做，还未运用到场景中，要运用到场景中，只须要把制做的图元保存下来。 并在场景编辑这边直接使用便可，好比下面是保存的部分图元：

有了相关的图元，直接在场景编辑器中拖拽生成便可。 下面上一张编辑好的效果图：

嗯，最终效果还在不断完善中，主要是相关图元优化和配色优化。 固然下一步更重要的工做是，要对接数据，实现动态的效果。

若是你对demo 感兴趣，能够邮件给terry.tan@servasoft.com。
欢迎关注公众号“ITman彪叔”。彪叔，拥有10多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。在计算机图形学、WebGL、前端可视化方面有深刻研究。对程序员思惟能力训练和培训、程序员职业规划有浓厚兴趣。