前言：之前分享过两篇关于流程画图的前端组件，使用的jsPlumb。这个组件本身还不错，使用方便、入门简单、轻量级，但是使用一段时间下来，发现一些弊病，比如组件不太稳定，初始进入页面的时候连线的样式有时会乱掉，刷新页面之后才能恢复正常，而且连线样式比较单一，容易让人产生视觉疲劳，加之最近公司在大力推行所谓的“工业4.0”，除了对自动化控制要求的提高之外，对这种图形化界面的要求也随之提高，所以单纯的jsPlumb组件效果已经不能满足日益发展的公司业务。基于以上种种，最终找到了Gojs组件，它效果强大、api丰富，唯一的不足就是这个组件是一个收费组件，可是在天朝，嘘...这是个不能说的秘密！

本文原创地址：http://monly used in chemical and process engineering to indicate the general flow of plant processes and equipment. A simple SCADA diagram, with animation of the flow along the pipes, is implemented here. </p> <p> The diagram displays the background grid layer by setting <b>grid.visible</b> to true, and also allows snapping to the grid using <a>DraggingTool.isGridSnapEnabled</a>, <a>ResizingTool.isGridSnapEnabled</a>, and <a>RotatingTool.snapAngleMultiple</a> alongside <a>RotatingTool.snapAngleEpsilon</a>. </p> <p> The diagram also uses the <b>loop</b> function to animate the links by adjusting the <a>Shape.strokeDashOffset</a> every 100 ms. </p> <div> <div> <button id="SaveButton" onclick="save()">Save</button> <button onclick="load()">Load</button> Diagram Model saved in JSON format: </div> <textarea id="mySavedModel" style="width:100%;height:300px">{ "class": "go.GraphLinksModel", "nodeDataArray": [{"key":"P1", "category":"Process", "pos":"150 120", "text":"Process"},{"key":"P2", "category":"Process", "pos":"330 320", "text":"Tank"},{"key":"V1", "category":"Valve", "pos":"270 120", "text":"V1"},{"key":"P3", "category":"Process", "pos":"150 420", "text":"Pump"},{"key":"V2", "category":"Valve", "pos":"150 280", "text":"VM", "angle":270},{"key":"V3", "category":"Valve", "pos":"270 420", "text":"V2", "angle":180},{"key":"P4", "category":"Process", "pos":"450 140", "text":"Reserve Tank"},{"key":"V4", "category":"Valve", "pos":"390 60", "text":"VA"},{"key":"V5", "category":"Valve", "pos":"450 260", "text":"VB", "angle":90} ], "linkDataArray": [{"from":"P1", "to":"V1"},{"from":"P3", "to":"V2"},{"from":"V2", "to":"P1"},{"from":"P2", "to":"V3"},{"from":"V3", "to":"P3"},{"from":"V1", "to":"V4"},{"from":"V4", "to":"P4"},{"from":"V1", "to":"P2"},{"from":"P4", "to":"V5"},{"from":"V5", "to":"P2"} ]} </textarea> </div></div></body></html>

工业流程图

四、总结

本文根据js的一些基础用法做了简单介绍，今天就先到这里，以后有问题了再来跟大家分享。如果你的项目里面也有这种业务需求，可以用起来试试！需要说明一点，如果您的公司不缺钱，建议使用正版授权的组件，毕竟尊重作者的劳动成果很重要！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。