翻译了很久的文档,但对于 jsPlumb 的运用依然感觉云里雾里的,所以决定好好看看 dome 代码,结合代码理解知识,真的比较好理解。在此我尝试讲解 jsPlumb 中的例子,chart。
注意,我翻译的文档和我使用的例子不是同一个版本,原因嘛,那自然是公司要求的版本是老一点的。虽然版本不大一样,但基础用法是相似的。讲解开始。
首先,看一下界面效果图。
界面效果图如上,用户可以自己拖动框。具体功能可以参见官网 demo。在此我主要对代码进行解释。
首先,是界面基本布局。代码如下:
<div class="jtk-demo-main">
<!-- demo -->
<div class="jtk-demo-canvas canvas-wide chart-demo jtk-surface jtk-surface-nopan" id="canvas">
<div class="window" id="chartWindow1">window one</div>
<div class="window" id="chartWindow2">window two</div>
<div class="window" id="chartWindow3">window three</div>
<div class="window" id="chartWindow4">window four</div>
<div class="window" id="chartWindow5">window five</div>
<div class="window" id="chartWindow6">window six</div>
</div>
<!-- /demo -->
</div>
可以看到每个块在界面上都有对应块。CSS 样式略过不讲。js 引入如下:
<script src="../../js/jsplumb.min.js"></script>
<script src="demo.js"></script>
<script src="../../js/demo-list.js"></script>
(最新版的应该只需要引入一个即可,尚未亲自尝试,待验证)
然后是 dome.js 代码。这部分代码是我们需要根据自己的需求来实际动手写的代码。
第一步,当然是初始化 jsPlumb.
jsPlumb.ready(function () {
//所有代码需要写到此处
}
然后定义一个颜色。这个颜色后文中会用到,相当于一个全局变量。
var color = "gray";
接下来,是实例化 jsPlumb.
var instance = jsPlumb.getInstance({
//定义连接器使用 贝兹尔 ,并将曲线值定义为 50. curviness 的大小于 连接线到锚点的直线距离 成正比。就是说,这个值越大,那么曲线到锚点那段直线距离就越长。曲线的扭曲度也越大。
Connector: [ "Bezier", { curviness: 50 } ],
//这里定义的样式我也不知道是什么
DragOptions: { cursor: "pointer", zIndex: 2000 },
//块样式
PaintStyle: { stroke: color, strokeWidth: 2 },
//连线端点样式
EndpointStyle: { radius: 9, fill: color },
//划过块的样式
HoverPaintStyle: {stroke: "#ec9f2e" },
//划过端点时的样式
EndpointHoverStyle: {fill: "#ec9f2e" },
Container: "canvas"
});
然后,就是进行绘制:
// 暂停绘制,进行初始化
instance.batch(function () {//这个函数可以在官方文档中看到,作用是用于暂停绘制,干其他事的
// 声明一些常用变量
var arrowCommon = { foldback: 0.7, fill: color, width: 14 },
// 声明参数,创造两个方向相反的箭头
overlays = [
[ "Arrow", { location: 0.7 }, arrowCommon ],
[ "Arrow", { location: 0.3, direction: -1 }, arrowCommon ]
];
//添加端点,并给他们添加一个 uuid 的属性便于连接
var windows = jsPlumb.getSelector(".chart-demo .window");//获取所有 windows 元素
for (var i = 0; i < windows.length; i++) {//循环给元素添加端点以及上锚点和下锚点
instance.addEndpoint(windows[i], {
uuid: windows[i].getAttribute("id") + "-bottom",
anchor: "Bottom",
maxConnections: -1
});
instance.addEndpoint(windows[i], {
uuid: windows[i].getAttribute("id") + "-top",
anchor: "Top",
maxConnections: -1
});
}
//将不同的 windows 块通过 uuid 进行连接
instance.connect({uuids: ["chartWindow3-bottom", "chartWindow6-top" ], overlays: overlays, detachable: true, reattach: true});
instance.connect({uuids: ["chartWindow1-bottom", "chartWindow2-top" ], overlays: overlays});
instance.connect({uuids: ["chartWindow1-bottom", "chartWindow3-top" ], overlays: overlays});
instance.connect({uuids: ["chartWindow2-bottom", "chartWindow4-top" ], overlays: overlays});
instance.connect({uuids: ["chartWindow2-bottom", "chartWindow5-top" ], overlays: overlays});
//绘制
instance.draggable(windows);
});
//这一句我也不知道什么意思
jsPlumb.fire("jsPlumbDemoLoaded", instance);
看懂这些以后,就对 jsPlumb 有了更深的理解了~