本文目录一览：
如何使用HTML5 Canvas动态的绘制拓扑图
使用HTML5 Canvas动态的绘制拓扑图：
HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型：
语法：
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
*第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。
*dx、dy是image在canvas中定位的坐标值；
*dw、dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；
*sx、sy是image所要绘制的起始位置；
*sw、sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。
举例：
!DOCTYPE html
html
body
p要使用的图像：/p
img id="tulip" src="/i/eg_tulip.jpg" alt="The Tulip" /
p画布：/p
canvas id="myCanvas" width="500" height="300" style="border:1px solid #d3d3d3;background:#ffffff;"
Your browser does not support the HTML5 canvas tag.
/canvas
script
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,10,10);
/script
/body
/html
告诉你漂亮标准的网络拓扑图是怎么画出来的？
绘制网络拓扑图是网络工程中必不可少的步骤，对于网络工程师到底怎么把拓扑图画好还真的是个技术活，但是熟能生巧我就给大家介绍一下绘制流程，供大家参考。绘制流程采用了红茶三杯的流程，我在此谢谢他能给我们提供如此好的干货。大家可以关注一下他的微博“红茶三杯”。-php绘制拓扑图
一、网络拓扑的“主要”绘制工具
1、Powerpoint
适合中小型网络拓扑绘制；小巧方便，扩展性强，实用性强
适合讲演及方案演示、实施方案、实施报告等交付材料
使用范围较广
2、Visio
适合大型拓扑绘制；工业标准
功能强大、信息容量强大
便于打印、喷绘
二、不同网络环境的拓扑图案例
1、典型的园区网拓扑
2、典型的金融行业拓扑
3、工程环境测试拓扑
三、拓扑绘制步骤（建议）
1、首先在纸上花个草稿，熟练之后，做到拓扑在心中
2、通过辅助手段描绘拓扑框架，利用好线条和框架色块（可根据业务逻辑模块）
3、放置网络设备图标
4、标记信息元素
5、完善外围元素
6、完成整体绘制
四、绘制实例流程
首先看一下我们要绘制的实例拓扑图，如下图：
步骤1、用辅助线描述主要框架
步骤2、填充主干线路
步骤3、去掉辅助线
步骤4、放置主干网络设备
步骤5、添加信息点元素
步骤6、完成网络拓扑图
以上所谓步骤，只是提供一个拓扑绘制的大致思路，并非所有的拓扑都需要照搬照抄上述步骤来完成，有些拓扑异常复杂，更非简单几步就能完成。根据物理网络环境，结合客户业务逻辑结构，最终落地成逻辑的网络拓扑图，其实体现的是工程师对客户网络环境、网络需求、网络协议等的综合理解-php绘制拓扑图
怎么使用jointjs 在php项目中绘制拓扑图
最近有一个需求是根据数据自动在前端页面画出一个流程导向图,简单说就是把数据以A节点指向B节点,B节点指向C节点这种形式给你,然后让页面自己在一定区域内渲染出一个流程图.当然节点上可能还有其他信息,这个暂时不考虑,就是这样一个需求,最后是借助一个工具完成的.先说一下处理过程:-php绘制拓扑图
可以说这个问题一开始我走了弯路,想的不是那么清楚,一开始想的是自己画.低端的就是用html+css各种布局,画出方块和线条,至于箭头什么的再想办法.后来一想这样太低端了,应该专业一点,就打算用canvas或者svg.因为之前用过echarts前端的图标库,知道它底层有个依赖库zrender就是专门弄canvas的,所以好一阵看,感觉还靠谱,能画出来.-php绘制拓扑图
这样虽然能画出来,不过接下来我们就要考虑更多的问题,首先什么时候折行,然后遇到分支的种种情况怎么处理.最后我查资料竟然开始涉及一些图论的东西了,深刻感觉到东西好像变复杂了,我的目的不是研究理论,而是为了一个实现.-php绘制拓扑图
这时候转变一下思路,有没有什么工具能专门做这样的工作,类似于jQuery大家都用它操作DOM,RequireJS都用它来实现模块化加载.那应该也有类似的东西,集成了数学上的图论,自动布局等.这就不得不说Github火的一塌糊涂是有原因的,我搜了很多中文网站以及百度都没什么结果(不知道是不是关键字有问题),总之没搜到能用的东西.但是在Github上找到了一个开源项目:dagre-d3.-php绘制拓扑图
看名字就能猜到它是基于D3库的,D3是一个专门用于前端图形绘制的库,dagre-d3就是实现自动布局并且绘制流程图的这么一个东西.
Dagre is a JavaScript library that makes it easy to lay out directed graphs on the client-side. The dagre-d3 library acts a front-end to dagre, providing actual rendering using D3.-php绘制拓扑图
上一个简单的Demo:
// Create a new directed graph
var g = new dagreD3.Digraph();
// Add nodes to the graph. The first argument is the node id. The second is
// metadata about the node. In this case we're going to add labels to each of
// our nodes.
g.addNode("kspacey", { label: "Kevin Spacey" });
g.addNode("swilliams", { label: "Saul Williams" });
g.addNode("bpitt", { label: "Brad Pitt" });
g.addNode("hford", { label: "Harrison Ford" });
g.addNode("lwilson", { label: "Luke Wilson" });
g.addNode("kbacon", { label: "Kevin Bacon" });
// Add edges to the graph. The first argument is the edge id. Here we use null
// to indicate that an arbitrary edge id can be assigned automatically. The
// second argument is the source of the edge. The third argument is the target
// of the edge. The last argument is the edge metadata.
g.addEdge(null, "kspacey", "swilliams", { label: "K-PAX" });
g.addEdge(null, "swilliams", "kbacon", { label: "These Vagabond Shoes" });
g.addEdge(null, "bpitt", "kbacon", { label: "Sleepers" });
g.addEdge(null, "hford", "lwilson", { label: "Anchorman 2" });
g.addEdge(null, "lwilson", "kbacon", { label: "Telling Lies in America" });
它渲染出来是这样的:
这样我们只要把数据处理成对应格式,就可以轻松的自动绘制会流程图.比较给力的是它对数据的支持良好,有多个格式可以选择,而且虽然接口不多,但是对于节点以及线条的操作都有,可以很轻松的改变节点以及线条的样式,这个大家可以看官方的demo.-php绘制拓扑图
另外如果要附加交互事件,可以通过jquery实现,也很容易,我使用bootstrap的tooltip很轻松的就加上去了.感觉还是个很给力的库,而且国内这方面资料感觉不多
