0x01项目背景本项目是机器人认证可视化系统。其中包括认证设备的展示和监控，质检设备的展示和监控；它还包括AGV机器人的显示和监控。认证设备用于制作证书，质量检测设备用于资质检验，AGV机器人用于运输；AGV机器人还需要监控电源和充电情况以及行驶位置。0x02设计稿收到项目后，大家开开心心（谁知道）开工了。首先是出设计稿。经过与客户的多次交涉和讨论，设计小姐姐交付了最终的设计稿。设计稿基于二维应用。大概是这样的，具体如下：0x03任务分解实现首先确定大的开发思路是使用HTML5canvas进行绘图。当然，从头开始开发会比较困难。好在公司有一个中间件软件twaver.js，已经把很多功能封装的很好，方便我们开发。当然，我们的开发过程更简单，因为我们使用了更高级的工具，可视化编辑工具。在下面的讲解中，我们会同时介绍代码实现的思路和编辑器的实现思路。首先，我们先在设计图上分解以下任务：画标题栏、画墙、画图例、画设备、机器人等。绘制日期首先，让我们谈谈日期的绘制。日期的绘制主要是绘制文字，直接使用canvas的fillText函数即可完成。相关的实现思路比较简单。中间的小方块是一个平行四边形，平行四边形可以用路径画出来，这里就不放代码了。接下来说说如何通过我们的编辑器来实现？很简单，编辑器的组件库里就有这个日期组件，拖拽即可！感谢编辑组的开发兄弟们的辛勤付出，鼓掌！！其实稍微复杂一点，因为在这个日期显示控件中，日期和时间部分中间有一堆平行四边形。我应该怎么办？其实编辑器的实现也很简单，就是拖拽两个日期显示控件，前面一个显示日期，后面一个显示时间，然后在中间放几个平行四边形。平行四边形也是编辑器的内置组件，操作起来非常简单！下面我就介绍一下编辑器的批量生成功能。由于有多个平行四边形，如果每次都从左边的元件库中拖放，每次都要调整大小、偏移角度等，还要考虑上下边对齐多个平行四边形和等价问题之间。如果使用批量生成功能，会方便很多。比如我们先调整一个平行四边形，然后使用批量生成功能生成多个这样的平行四边形，这些平行四边形会按照一定的顺序排列。例如页面效果：指定一定数量、行数、列数、行间距、列间距等设置，批量生成效果如下图：当然也有多个平行四边形与设计图中的不同颜色，以及颜色逐渐变淡的效果，这个目前还需要一一调整，希望小编的开发兄弟能尽快提供更快的解决方案。绘图标题标题部分包含箭头、文字、文字背景、文字下划线等多种效果。首先，让我们看一下箭头的绘制。如果手写代码，这种箭头其实就是两个平行四边形的效果。只需连接两个平行四边形的路径即可。如何使用编辑器来实现呢？可能有同学举手了。我们的编辑器有现成的箭头组件，拖过去就好了。但是我要告诉你，小编暂时没有现成的箭头组件。你也不必感到抱歉。编辑器虽然没有箭头组件，但是有组合功能，可以将基本组件组合成复杂组件。如前所述，箭头实际上是由两个平行四边形组合而成。因此，您可以拖动平行四边形并调整其大小。这里还有另外两个特殊的技巧：拖放复制：按住shift键并拖动一个已有的图元组件来复制相同的图元。垂直翻转：右键单击并选择垂直翻转以获得垂直镜像效果。结合原始平行四边形和镜像平行四边形，得到箭头效果。同样的方法，就可以得到右边的箭头效果。如下图所示：结合前面批量生成的效果，就可以得到整个箭头区域的页面设计效果。然后看文字效果。其实文字的效果比较简单。可以用canvas的fillText来完成。设计稿中的文字有阴影效果，所以在绘制时加上阴影效果：ctx.shadowColor='blue';ctx.shadowBlur=12;...ctx.fillText('RobotCredentialsSystem');在编辑器中，不仅有现成的文本组件，还有丰富的样式调整功能，包括字体、颜色、阴影效果等等。现在我们来谈谈如何给文本加下划线。看设计图中的下划线是中间亮两边暗的效果，中间粗两边细。好像有点难，直接用canvas绘图技术好像不是很好。有人觉得不行就让设计小姐姐剪图；嗯，剪图是可以的，但是技术真的不能解决吗？事实上，这是可能的。首先，中间亮两边暗的效果其实很容易实现，用一个渐变就可以了。其实使用渐变后，如果两边的颜色都接近背景，就会有一种逐渐淡入背景的效果。这时候端点的两侧看起来会比中间薄一些，但实际上看起来就是这样，其实厚度是一样的。这就是视神经的反应作用。当然，我们的可视化是给人看的。既然看起来能达到效果，那就不管现实中长什么样子了。下面是一个示例代码。varcanvas=document.getElementById('can');varctx=canvas.getContext('2d');ctx.fillStyle='蓝色';ctx.fillRect(0,0,1000,1000);变量grd=ctx。createRadialGradient(150,100,5,150,100,50);grd.addColorStop(0,"红色");grd.addColorStop(0.3,"红色");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，最终效果如下：接着是文字的背景效果。其实背景效果和下划线的思路是一样的，只是需要调整渐变色的透明度。低一点，既然是背景，就不能铺天盖地，否则会影响文字的显示。通过编辑器编辑后，题目的整体效果如下图所示：绘制墙墙的绘制包括两部分，一是支撑柱，二是墙的路径。这两部分比较简单，支撑柱是一个长方形的盒子。墙本身就是一条路径，可以使用画布的路径函数绘制路径。例如下面的代码：ctx.moveTo(x0,y0);ctx.lineTo(x1,y1);ctx.lineTo(x2,y2);ctx.lineTo(x3,y3);ctx.strokeStyle='蓝色';CTX。中风（）;在编辑器中，可以通过编辑点直接生成路径。其中一个辅助功能是：当按下ctrl键时，线条只能在水平、垂直、斜45度三个方向上进行操作。绘制图例，首先看图例区的内容：从图中可以看出，每个图例的左边是一个图形，后面会讲到，右边是文字及其下划线.文字和下划线前面已经讲过了，这里就不多说了。前面的图形允许设计师设计图片。其实你也可以用编辑器来做。编辑器中有一个模块叫做图元编辑器，用于制作基本图形。我们看图例前面的图形，其实就是一个环套在一个圆里面，然后有一条短横线或者用圆的扇形绘制属性代替直线。使用图元编辑很方便：先拖一个圆到编辑区，然后设置只显示边框，不显示填充，使用阴影模糊效果。再拖一个圆到编辑区，设置不显示边框，显示填充，使用阴影模糊效果。还要将其大小设置为小于第一个圆圈。拖放线段（或勾选圆的扇形来绘制）以连接两个圆。最终编辑后的图元效果如下，下图是上述编辑后的图元放大后的效果，可以直接在场景编辑区使用。图形组件+文字组件+下划线构成图例效果。绘制统计图表，首先要看图表区的内容：图表区的内容可以分为几部分：左右括号、圆形图表文字（包括正方形、文字、下划线等）。正文前），括号的绘制前面已经提到过。模块，其实括号可以通过图元编辑做成一个图元。只是几条线段的组合，如下图：然后调整线段的粗细、颜色和位置，就可以达到设计图中的效果：上图就是左括号的效果。对于右括号，我们可以使用相同的想法来创建一个右括号原语。也可以在编辑场景时直接使用左括号，然后使用水平翻转功能实现镜像效果。这里文字的绘制和标题类似，上面已经提到了，包括文字前面的方块、文字本身以及文字的下划线效果等，这里不再赘述。下一步是绘制图形。从设计稿可以看出，图表主要是由几个圆圈或扇形叠加而成，是一个比较简单的图表。一种思路是通过代码进行定制。这是一个比较简单的图表，应该是通过arc函数的多种组合来实现的。具体的实现代码这里不再赘述。另一种方法当然是使用图形元素编辑功能。首先在页面上拖出四个圆圈，然后调整它们的填充颜色、大小、边框颜色、起止角度等，就可以得到如下图形：颜色可以指定一点渐变，然后添加一个阴影效果得到中间的黑色渐变部分。然后将这些图按照一定的顺序组织起来，就可以得到相关的图。中心点对齐功能，调整位置非常方便。可能有读者会说，这是固定的图，不能连接数据实现动态效果？其实我们的编辑器可以对这块数据做对接，数据可以影响图形的属性等等，从而达到动态的效果。但是数据对接的部分会在后续的文章中介绍，本文不做重点介绍。下同。至此，统计图表的部分就完成了。绘图设备机器人设备和机器人图元比较复杂，如下图所示：可以看出图元既包括静态图片部分，也包括动态绘图部分。在原始编辑器中，您可以将静态图片和动画绘图元素组织在一起。比如机器人图形元素，底部是静态图片，顶部是文字编号，动态电池小图和表示百分比的文字。静态图很明显，只能请设计师帮忙了。让我们看看如何通过原始编辑来制作一个。首先是编辑线的部分，可以使用连接符进行编辑：我在讲解括号的绘制时已经介绍过了。这里先编辑一个类似于图元线段的形状，然后设置线段的显示样式为虚线，调整虚线的颜色等：接下来编辑电池部分。电池的部分可以认为是由三个矩形组成，一个矩形不填充，另外两个填充：适当组合可以组成电池图形：文字可以直接使用文本控件编辑，这个我这里就不赘述了。然后是静态图片。图元编辑器中有一个图片控件，可以指定一个区域显示发送到服务器的静态图片：双击控件选择图片：最终效果如下：将线条和电池文字组合在一起形成Robot图元：其他质检设备和治理设备的图元制作过程类似，这里不再赘述。0x03场景生成前面提到了以下内容：绘制标题栏、绘制墙壁、绘制图例、绘制装备机器人等，图元的制作还没有应用到场景中。要将它们应用到场景中，您只需要保存您制作的图元。并且可以直接在场景编辑端使用。例如，下面是一些保存的图元：有了相关的图元，只需将??它们拖放到场景编辑器中即可生成。下面是最后编辑的效果图：嗯，最终的效果还在完善中，主要是图形元素和配色的优化。当然，下一步更重要的工作是连接数据以实现动态效果。如果您对该演示感兴趣，请发送电子邮件至terry.tan@servasoft.com。欢迎关注公众号“IT人飚大叔”。飚叔，10多年开发经验，现任公司系统架构师、技术总监、技术培训师、职业规划师。对计算机图形学、WebGL、前端可视化有深入研究。对程序员思维能力的训练与训练，程序员职业生涯规划有着浓厚的兴趣。
