如何使用HTML5 Canvas动态的绘制拓扑图

<canvas>动态的绘制拓扑图

1.添加引用\r\n右击项目-添加引用-浏览 找到本地的dll文件\r\n2.using 该dll文件里面代码的名称空间 \r\n然后就可以调用dll文件里面的类和方法

<canvas>定义和用法：

Canvas 对象表示一个 HTML 画布元素 -<canvas>。它没有自己的行为，但是定义了一个 API 支持脚本化客户端绘图 *** 作。

你可以直接在该对象上指定宽度和高度，但是，其大多数功能都可以通过CanvasRenderingContext2D 对象获得。 这是通过 Canvas 对象的getContext() 方法并且把直接量字符串 "2d" 作为唯一的参数传递给它而获得的。

<canvas>标记在 Safari 1.3 中引入，在制作此参考页时，它在 Firefox 1.5 和 Opera 9 中也得到了支持。在 IE 中，<canvas>标记及其 API 可以使用位于excanvas点sourceforge点net的 ExplorerCanvas 开源项目来模拟。

提示：如果希望学习如何使用 <canvas>来绘制图形，可以访问 Mozilla 提供的Canvas 教程（英文）以及相应的中文 Canvas 教程。

使用 <canvas>标记绘图

大多数 Canvas 绘图 API 都没有定义在 <canvas>元素本身上，而是定义在通过画布的getContext() 方法获得的一个“绘图环境”对象上。

Canvas API 也使用了路径的表示法。但是，路径由一系列的方法调用来定义，而不是描述为字母和数字的字符串，比如调用 beginPath() 和 arc() 方法。

一旦定义了路径，其他的方法，如 fill()，都是对此路径 *** 作。绘图环境的各种属性，比如 fillStyle，说明了这些 *** 作如何使用。

注释：Canvas API 非常紧凑的一个原因上它没有对绘制文本提供任何支持。要把文本加入到一个 <canvas>图形，必须要么自己绘制它再用位图图像合并它，或者在 <canvas>上方使用 CSS 定位来覆盖 HTML 文本。

Canvas 对象的属性

height 属性

画布的高度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

width 属性

画布的宽度。和一幅图像一样，这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候，在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

1.各个应用系统、服务器信息及系统直接的调用都录入到数据库中

2.前端拓扑图、或系统调用关系图的展示UI可以通过一些选项从数据库中捞出数据，然后在UI上动态绘制出关系图来

3.如HTML5 Canvas或基于HTML5 Canvas的JTopo、SVG都可以很好的绘制出这种图来。

jsPlumb的配置项有很多，如果不主动设置，jsPlumb就使用默认配置。 建议不要修改默认的配置，而是使用自定义的方式。 1 . 锚位置: jsPlumb有九个默认锚点位置，可用于指定连接器连接到元素的位置：分别是元素的四个角，元素的中心以及元素每个边的中点： 2、基于数组的语法[x,y,dx,dy]除了提供锚点的位置和方向外，还可以选择提供另外两个参数来定义与给定位置的像素偏移量。这是上面指定的锚点，但在y轴正方向有50像素偏移： 3、动态锚 连线时锚点根据位置自动调整到定义的数组里几个点中最合适的位置 创建动态锚点没有特殊的语法，只需提供一系列单独的静态锚点，例如： 或者混合使用 4、多边形锚 不理解多边形锚，可以参考 jsplumb 中的demo/perimeterAnchors，拖动节点试一下效果 jsPlumb支持六种形状： 如果节点的宽高一样，该锚点位置为动态圆周，宽高不同为椭圆。 默认情况下，锚点个数为60，可以手动指定： (2) 组合锚点（三角形与菱形）： (3) 自定义角度多边形锚点 上面定义了两个三角形旋转不同角度得到的组合图形。旋转适用带角度的多边形，该值必须以角度为单位，而不是弧度，并且数字可以是正数或负数5、CSS类和锚点 锚点的不同位置可以有多种css样式，那就要有不同的css类提供支持。 (1) 被写入到锚点的CSS类和元素以jsPlumb实例的endpointAnchorClass为前缀，默认为: jsPlumb将会分配这个类给创建的 endpoint 和元素 someDiv： (2) 动态锚的示例： 这里，分配给Endpoint和Element的类将在锚位置更改时循环显示这些值： 注意，如果提供的类名由多个术语组成，则jsPlumb不会在该类中的每个术语前添加前缀： 将导致将2个类添加到端点和元素： (3) 更改锚类前缀 与锚类一起使用的前缀为jsPlumb的endpointAnchorClass。可以在jsPlumb的某个实例上将其更改为喜欢的任何内容： 或者 jsPlumb提供了四种连接线： 在两个端点之间画一条直线。 支持两个参数:stub ：可选，默认为0px。此参数的任何正值将导致在与连接线的两端产生一段不可改变方向的线段gap ：可选，默认为0px。在连接线的一端和连接的元素之间指定一个间隙。 贝塞尔提供了一个立方的贝塞尔曲线。 支持一个参数:curviness ：可选，默认为150px。 定义了曲线的弯曲程度。 垂直或水平的连接线，支持四个参数：stub ：可选，最小长度，以像素为单位，最初的存根，源自一个端点。可以是整数，指定了连接器的每个末端的存根，或是一个整数数组，指定[源, 目标]端点的连接。默认值为30像素的整数alwaysRespectStubs ：可选，默认为false，此参数表示jsPlumb始终从每个端点绘制指定存根长度，而不是比较两个元素的存根gap ：可选，默认为0像素。在连接线的一端和连接的元素之间指定一个间隙。midpoint ：可选，默认为0.5。两个元素之间的距离。cornerRadius ：默认为0。此参数的正值将改变弯角的度数。 略微弯曲的线（实际上是二次Bezier曲线），类似于状态机的连接器，支持三个参数：margin ：可选，默认为5。定义连接线开始/结束的元素的距离。curviness ：可选的，默认为10，定义了曲线的弯曲程度。proximityLimit ：可选，默认为80。 连接线的两端之间的最小距离，它描绘为一条直线而非二次贝塞尔曲线。 端点是连接里的一个端点外观和行为表现的集合，jsPlumb实现了四个端点： 端点以多种不同方式创建： (1) 调用jsPlumb.connect(..)并传递元素id或DOM元素作为源/目标，创建并分配新的端点 (2) 调用jsPlumb.addEndpoint(...)创建新的端点 (3) 使用jsPlumb.makeSource(...)并随后从该元素拖动连接时，将创建并分配新的端点 在屏幕上绘制一个点，支持三个参数:radius ：可选，默认为10像素。 定义点的半径cssClass ：可选，端点元素的CSS类hoverClass : 可选，元素或连线的hover属性样式类 绘制一个矩形。 支持构造函数参数有:width ：可选，默认为20像素。定义矩形的宽度height ：可选，默认为20像素。定义矩形的高cssClass ：可选，端点元素的CSS类hoverClass ：可选，元素或连线的hover属性样式类 从一个指定的URL加载图像，支持三个参数:src ：图片的urlcssClass ：可选，端点元素的CSS类hoverClass ：可选，元素或连线的hover属性样式类 jsPlumb有五个类型的覆盖: 位置表明连接元素在连接线的位置，通常有三种表明方式： 对于端点，适用相同的原则，将位置指定为[x，y]数组 (1) 指定一个覆盖在端点的中心位置： location:[ 0.5, 0.5 ] (2) 从左上角沿x轴叠加5像素 location: [ 5, 0 ] (3) 从右下角沿x轴叠加5像素 location: [ -5, 0 ] 对于位置的 *** 作，jsPlumb提供了两个方法： (1) jsPlumb.connect调用时 使用箭头的默认选项和带有文本“foo”的标签创建一个箭头 这个连接将有一个位于中间的箭头，位于四分之一的标签“foo”。注意id参数，如果希望删除覆盖层或更改其可见性，可以在以后使用它 (2) jsPlumb.addEndpoint调用时 注：在addEndpoint 使用 connectorOverlays 代替 overlays，因为 overlays指向端点覆盖。 此连接将有一个位于连接头部的10x30箭头，标签“foo”位于中间点。端点本身也有一个覆盖，相对于端点的左上角位于[-0.5 *宽度，-0.5 *高度] (3) jsPlumb.makeSource调用 同样使用 connectorOverlays，而且 makeSource 支持 endpoint 参数。 此连接将有10x30像素箭坐落在连接头，标签“foo”位于中点。注： jsPlumb.makeTarget调用时不能添加覆盖层(4) addOverlay调用 端点和连接都有一个addOverlay方法，它将一个Overlay定义作为参数 (1) Arrow(箭头) 绘制一个箭头，使用四个点：头部和两个尾点，以及一个foldback允许箭头尾部缩进的点。此Overlay的可用构造函数参数： (2) PlainArrow Arrow的foldback为1 的特殊实例，意味着箭头的尾部是扁平。Arrow的所有构造函数参数都适用于PlainArrow (3) 钻石 Arrow的foldback为2，意味着箭头变成钻石。Arrow的所有构造函数参数都适用于Diamond。 (4) 标签 提供用于装饰连接器的文本标签。可用的构造函数参数是： 标签覆盖提供了两个方法 getLabel 和 setLabel 用于动态地get/set标签内容： 标签被赋予一个id ‘label’，然后检索这个id动态设置lable的值。 Connections和Endpoints都支持Label Overlays，并且因为更改标签是一种非常常见的 *** 作，所以setLabel和getLabel方法已添加到这些对象中： 这些方法支持传入Function而不是String，如果在调用setLabel时，jsPlumb将为您创建一个标签覆盖： (5) Custom（自定义） jsPlumb允许自定义OverLays，只需要实现 create(component)： 自定义覆盖允许创建自己的覆盖层，jsPlumb将为您定位。只需要实现一个方法 - create(component)： 此处的id为 customeOverlay，可以在 Connection 或者 Endpoint上使用 getOverlay(id) 方法。 可以使用 setVisible 方法控制 Overlays 的显示属性，或者在一个连接上使用 showOverlay(id) 和 hideOverlay(id) 。 (1) 使用id (2) 使用 showOverlay(id) 和 hideOverlay(id)Connection 和 Endpoint 可以使用showOverlay(id) 和 hideOverlay(id)： Connection和Endpoint有一个removeOverlay方法，可以删除覆盖 参考：http://jsplumb.github.io/jsplumb/overlays.html https://www.jianshu.com/p/0e7bb5c081c8下一篇：拓扑图编辑器-jsplum连接

---