jsplumb 学习(1)

jsPlumb是一个强大的JavaScript连线库，它可以将html中的元素用箭头、曲线、直线等连接起来，适用于开发Web上的图表、建模工具等。它同时支持jQuery+jQuery UI、MooTools和YUI3这三个JavaScript框架，十分强大。

下载和引入

<link href="@Url.Content("~/Content/Css/plumb.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/JavaScript/jquery/jquery-1.11.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/JavaScript/jquery-ui-1.10.4/js/jquery-ui-1.10.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/JavaScript/jquery-plugins/jquery.jsPlumb-1.6.4-min.js")" type="text/javascript"></script>

初始化

jsPlumb只有等到DOM初始化完成之后才能使用，因此我们在以下代码中调用jsPlumb方法
jsPlumb.ready(function() {
...         
// some code
...
})

添加jsPlumb连接点

声明两种类型的连接点
var color1 = "#316b31";
var examplepoint = {
endpoint:["Dot", { radius:11 }],//设置连接点的形状为圆形
paintStyle:{ fillStyle:color1 },//设置连接点的颜色
isSource:true, //是否可以拖动（作为连线起点）
scope:"green dot",//连接点的标识符，只有标识符相同的连接点才能连接
connectorStyle:{ strokeStyle:color1, lineWidth:6 },//连线颜色、粗细
connector: ["Bezier", { curviness:63 } ],//设置连线为贝塞尔曲线
maxConnections:1,//设置连接点最多可以连接几条线
isTarget:true, //是否可以放置（作为连线终点）
dropOptions : exampleDropOptions//设置放置相关的css
};

var flowConnector = {
        endpoint: ["Dot", { radius: 4}],  //端点的形状
        connectorStyle: connectorPaintStyle, //连接线的颜色，大小样式
        hoverPaintStyle: endpointHoverStyle,
        connectorHoverStyle: connectorHoverStyle,
        paintStyle: {
            strokeStyle: "#61b7cf",
            fillStyle: "transparent",
            radius: 2,
            lineWidth: 2
        }, //端点的颜色样式
        //anchor: "AutoDefault",
        isSource: true, //是否可以拖动（作为连线起点）
        connector: ["Flowchart", { stub: [40, 60], gap: 5, cornerRadius: 5, alwaysRespectStubs: false}],  //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]
        isTarget: true, //是否可以放置（连线终点）
        maxConnections: -1, // 设置连接点最多可以连接几条线
        connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1}]]
 };

构造端点(endpoint)

通过jsPlumb.addEndpoint(a,b,c)里面有三个参数，a:要添加端点的div的id;b:设置端点放置的位置("TopCenter","RightMiddle","BottomCenter","LeftMiddle")
四个初始位置;c:端点和连接线的样式。b,c(可选).
添加多个端点:jsPlumb.addEndpoints(a,b,c)三个参数 c(可选)，a:要添加端点的div的id;b:含端点的构造函数参数的对象列表;

jsPlumb.addEndpoint(id, { anchors: "TopCenter" }, hollowCircle);
jsPlumb.addEndpoint(id, { anchors: "RightMiddle" }, hollowCircle);
jsPlumb.addEndpoint(id, { anchors: "BottomCenter" }, hollowCircle);
jsPlumb.addEndpoint(id, { anchors: "LeftMiddle" }, hollowCircle);

连接事件

var connection1 = jsPlumb.connect({
    //开始点
    source:"window1", 
    //目的点
       target:"window2", 
    //连接器采用Bezier曲线，还有直线和流程图连线
    connector:["Bezier", { curviness:70 }],
    //样式
       cssClass:"c1",
    //端点类型，点对点（Dot Endpoint ）,矩形端点(Rectangle Endpoint).图片端点(Image Endpoint)
    //blank端点类型为空
       endpoint:"Blank",
       endpointClass:"c1Endpoint", 
    //anchors锚（动态锚，静态锚）,[x,y,dx,dy];x,y的区间为[0,1]意思为锚的位置;dx,dy的区间为[-1,1]意思为曲线的方向
       anchors:["BottomCenter", [ 0.75, 0, 0, -1 ]], 
    //连接线的样式
       paintStyle:{ 
     //连接线的宽度，int值
     lineWidth:6,
     //连接器的颜色
     strokeStyle:"#a7b04b",
     //连接器或端点的轮廓宽度
     outlineWidth:1,
     //连接器或端点的颜色
     outlineColor:"#666"
    },
    //fillStyle:定义Endpoint的颜色
    endpointStyle:{ fillStyle:"#a7b04b" },
    //连接线悬浮样式
       hoverPaintStyle:hoverPaintStyle,  
    //覆盖物类型，四个值Arrow可配置的箭头（可折回），Label点的连接器上可配置的标签，PlainArrow一个三角形的箭头，不可折回，Diamond钻石
       overlays : [
     //连接器上配置的label 
     ["Label", {                     
      cssClass:"l1 component label",
      //显示的label
      label : "Connection One", 
      //连接器的位置
      location:0.7,
      id:"label",
      //点击事件
      events:{
       "click":function(label, evt) {
        alert("clicked on label for connection " + label.component.id);
       }
      }
     }],
     //连接器上配置的箭头
     ["Arrow", {
      cssClass:"l1arrow",
      location:0.5, width:20,length:20,
      //点击事件
      events:{
       "click":function(arrow, evt) {
        alert("clicked on arrow for connection " + arrow.component.id);
       }
      }
     }]
    ]
   });