JsPlump
文章平均质量分 81
起一个好听的名字
学无止境,学海无涯,乐在其中
展开
-
JsPlumb绘制拓扑图的通用方法
一、 实现目标绘制拓扑图, 实际上是个数据结构和算法的问题。 需要设计一个合适的数据结构来表达拓扑结构,设计一个算法来计算拓扑节点的位置及连接。 二、 实现思想1. 数据结构首先, 从节点开始。 显然, 需要一个字段 type 表示节点类型, 一个字段 data 表示节点数据(详情), 对于连接, 则采用一个 rel 字段, 表示有哪些节点与之关联, 相当于C 里面的指转载 2016-02-17 12:38:10 · 2106 阅读 · 0 评论 -
jsPlumb实例
官网:https://jsplumbtoolkit.comGitHub:https://github.com/sporritt/jsplumb/初始化jsPlumb只有等到DOM初始化完成之后才能使用,因此我们在以下代码中调用jsPlumb方法jsPlumb.ready(function() {... // some code...});首先,我们给jsPl转载 2016-02-18 09:12:38 · 4363 阅读 · 0 评论 -
jsPlumb 学习笔记
介绍 使用svg完成画图,四个概念: anchor: endpoint在的位置,可通过name访问 endpoint:connection的一端节点,通过addPoint makeSource, connect创建, connector:连接线 overlay:connector的装饰组件,如labelarrow 一个connection由一个c转载 2016-02-17 17:50:51 · 1751 阅读 · 0 评论 -
JsPlumb实例展示
$(function(){ $("#top_server").css({"left":"1%","top":"40%"});$("#firewall").css({"left":"10%","top":"40%"});$("#vpn2").css({"left":"23%","top":"20%"});$("#vpn").css({"left":"23%","top":"60%"})原创 2016-02-24 16:31:58 · 1698 阅读 · 0 评论