jsplumb笔记

来源：互联网发布：月球数据编辑：程序博客网时间：2024/06/05 16:57

<pre name="code" class="javascript">//找到当前id下的所有子节点ep把他设置为源节点并且赋予从此源节点出发的连接线样式

jsPlumb.makeSource($(""),  {                            parent: newid,                             anchor: "Continuous",                           // connector: ["Flowchart", { curviness: 20}],                            connector: ["Flowchart", { curviness: 20, stub: [4, 6], gap: 5, cornerRadius: 10, alwaysRespectStubs: true}],  //连接线的样式种类有[Bezier],[Flowchart],[StateMachine ],[Straight ]  cornerRadius:转角处的圆形 gap:接线与端点的距离 stub:连线转角处的位移                            connectorStyle: connectorPaintStyle, //{ strokeStyle: "black", lineWidth: 1 }, //                            connectorHoverStyle:connectorHoverStyle,                            paintStyle: {//连线端的样式                                fillStyle: "transparent",//中间的填充物                                outlineColor: "yellow",                                outlineWidth: 100                            },                            hoverPaintStyle: { fillStyle: "red" },                            connectorPaintStyle: {                                strokeStyle: "green",                                lineWidth: 300                            },                            connectorHoverPaintStyle: {                                strokeStyle: "#678",                                outlineColor: "yellow",                                outlineWidth: 100                            },                            isSource: true, //是否可以拖动（作为连线起点）                             isTarget: true, //是否可以放置（连线终点）                            endpoint: "Blank",// endpoint: ["Dot", { radius: 8}],  //端点的形状                            connectorOverlays: [["Arrow", { width: 10, length: 10, location: 1}]], //设置箭头的                            uniqueEndpoint:true,//启用连接端点线设置                            maxConnections: 1,//端点连接线最多条数                            onMaxConnections: function (info, e) {                                alert("最大连接数为 (" + info.maxConnections + ") ！！");                            }                        }                                                );

// 设置连接目标节点

 jsPlumb.makeTarget(newid, {            dropOptions: {             hoverClass: "dragHover" },            anchor: "Continuous",            endpoint: "Blank",            uniqueEndpoint: true, //启用连接端点线设置            maxConnections: 1, //端点连接线最多条数            onMaxConnections: function (info, e) {                alert("最大连接数为 (" + info.maxConnections + ") ！！");            }                       //anchor:"TopCenter"<span style="white-space:pre"></span>        });

   //            var connection1 = jsPlumb.connect({            //                source: "window1",            //                target: "window2",            //                connector: "Flowchart",            //                cssClass: "c1",            //                endpoint: "Blank",            //                endpointClass: "c1Endpoint",            //                anchor: "Continuous",            //                paintStyle: {            //                    lineWidth: 1,            //                    strokeStyle: "black"            //                },            //                endpointStyle: { fillStyle: "#a7b04b" },            //                hoverPaintStyle: hoverPaintStyle,            //                overlays: [            //   ["PlainArrow", {            //       cssClass: "l1arrow",            //       location: 1, width: 10, length: 12,            //       events: {            //           "click": function (arrow, evt) {            //               alert("clicked on arrow for connection " + arrow.component.id);            //           },            //           id: "myArrow"            //       }            //   }]            //]            //            });            //            var connectiontest = jsPlumb.connect({            //                source: "window_big1",            //                target: "window3",            //                connector: "Flowchart",            //                cssClass: "c1",            //                endpoint: "Blank",            //                endpointClass: "c1Endpoint",            //                anchors: [[1, 0.12, 0, 0.1], "LeftMiddle"],            //                overlays: [["PlainArrow", { location: 1, width: 10, length: 12}]],            //                paintStyle: {            //                    lineWidth: 1,            //                    strokeStyle: "black"            //                },            //                endpointStyle: { fillStyle: "#a7b04b" },            //                hoverPaintStyle: hoverPaintStyle            //            });            //            var stateMachineConnector = {            //                connector: "Flowchart",            //                paintStyle: { lineWidth: 1, strokeStyle: "black" },            //                hoverPaintStyle: { strokeStyle: "#dbe300" },            //                endpoint: "Blank",            //                anchor: "Continuous",            //                overlays: [["PlainArrow", { location: 1, width: 10, length: 12}]]            //            };            //            jsPlumb.connect({            //                source: "window3",            //                target: "window4"            //            }, stateMachineConnector);            //            jsPlumb.connect({            //                source: "window4",            //                target: "window_big2",            //                anchors: ["TopCenter", "LeftMiddle"]            //            }, stateMachineConnector);            //            jsPlumb.connect({            //                source: "window5",            //                target: "window6"            //            }, stateMachineConnector);            //            jsPlumb.connect({            //                source: "window7",            //                target: "window8"            //            }, stateMachineConnector);            //            jsPlumb.connect({            //                source: "window9",            //                target: "window10"            //            }, stateMachineConnector);            //            jsPlumb.connect({            //                source: "window4",            //                target: "window7",            //                anchors: ["BottomCenter", "LeftMiddle"]            //            }, stateMachineConnector);            //            jsPlumb.connect({            //                source: "window4",            //                target: "window9",            //                anchors: ["BottomCenter", "LeftMiddle"]            //            }, stateMachineConnector);

0 0