入职第一波——jsPlumb demo - chart

翻译了很久的文档，但对于 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 有了更深的理解了~

入职第一波——jsPlumb demo - chart

猜你喜欢