canvas画简单的横向流程图

开发思路

最近，因为在做基于MES系统进行工业互联网开发的项目；其中，在做demo时，我负责工序管理的开发，其中有一个功能是通过一个物料SFC码可以追踪该物料所经历的所有工序；网上有很多插件，比如D3等，但是，我只需要一个特别简单的横向流程图，所以并没有引用插件；此处要感谢https://www.cnblogs.com/zhangym118/p/8405962.html的作者，我引用了他的代码，仅仅在他的基础上删掉不用的部分并做一点修改。

话不多说，直接上代码，因为没有采用插件，所以，横向流程图都是用H5的canvas画布去制作。

<html>
<head><title>经历的工序</title><meta name="decorator" content="default"/><script type="text/javascript">$(document).ready(function() {var len = '${length}';var json = '${lineNames}';json = JSON.parse(json);console.log( Object.values(json[0])[1]);var cont = document.getElementById("workflow").getContext("2d");document.getElementById("workflow").width = 10 * 180;//根据数据的多少来设定画布的宽度for (var i =0; i<len; i++){arcTopStroke(cont,200 + i*150 ,100 ,20, i, len-1, Object.values(json[i])[1]);}});//画top圆
function arcTopStroke(cont, x, y, r, i, len, hash){cont.beginPath();cont.arc(x, y, r, 0, 2*Math.PI);cont.lineWidth = 5;cont.strokeStyle = "#999999";cont.stroke();cont.closePath();cont.fillText(hash, x, y-30);if( i < len ){cont.moveTo(x + r, y);cont.lineTo(x + r + 110, y);cont.lineWidth = 2;cont.stroke();}
}</script></head>
<body><div class="workflow_left_content" style="width:100% ;overflow-x: auto"><canvas id="workflow" height=300></canvas></div>
</body></html>

我相信一看代码，都会知道什么意思，比较简单，就是画圆然后用线连接，并在圆上写上字以作解释，因为要跟后台关联，所以var json = ‘${lineNames}’;这行代码就是接收后台传给页面的list集合，至于后台怎么传，我用的是Model去传，也可以采用@ResponseBody以Json形式将返回值传到前端；但是，因为我返回值为页面地址，所以只能用model去传。

 model.addAttribute("lineNames", new Gson().toJson(lines));

你以为完事了，那你就错了，你要是这样做，你传给页面的是一个list集合，而到了页面接收就变成了一个字符数据，页面会把后台传的值解析为一个一个字符，那该怎么办呢？在我的代码中已经写出来了，就是

 json = JSON.parse(json);

JSON 通常用于与服务端交换数据。

在接收服务器数据时一般是字符串。

我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
因为我的List集合中存储的是对象，所以需要此步来转换。

此时，才算完毕。

canvas画简单的横向流程图相关推荐

html5制作线路图,HTML5使用canvas画简单电路图
何问起 var canvas = document.getElementById("canHewenqi"); var cxt = canvas.getContext(" ...
uni-app 利用canvas画简单海报并保存图片
一.效果图二.代码 <template><view class="canvas-box"><canvas class="canvas&q ...
Canvas画电路图
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
【canvas系列】canvas实现“ 简单的Amaziograph效果”--画对称图【强迫症福利】
标题很难引人入胜,先放个效果图好了如果图片吸引不了你,那我觉得也就没啥看的了. demo链接: https://win7killer.github.io/demo_set/html_demo/can ...
canvas画流程图
现有系统的流程图要重构,把之前的插件剔除. 找了很多画流程图的方式,但最后还是选择使用原生的canvas来画. 大概效果就是这样: 步骤: 最重要的就是数据源,数据源给好了,画起来就很方便了.下边是部 ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
[转]基于Prototype，利用Canvas绘图实现的web流程图设计器（原型）
基于Prototype,利用Canvas绘图实现的web流程图设计器(原型) 关键字: javascript prototype script.aculo.us canvas 流程图 web画线刚才 ...
WebGL（三）——学习Canvas及简单图形绘制
WebGL(三)--学习Canvas及简单图形绘制 Canvas简介 canvas是HTML5新增的一个可以使用javascript脚本在其中绘制图像的HTML元素(容器),它可以用来制作图像.动画, ...
python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...

canvas画简单的横向流程图

开发思路

canvas画简单的横向流程图相关推荐

最新文章

热门文章