jsPlumb 学习笔记

介绍

   使用svg完成画图,四个概念:

   anchor: endpoint在的位置,可通过name访问

   endpointconnection的一端节点,通过addPoint makeSource, connect创建,

   connector:连接线

   overlay:connector的装饰组件,如labelarrow

   一个connection由一个connector,两个endpoint0或者多个overlay构成,每个endpoint有一个关联的anchor.

anchor有四种类型:

static:固定不可移动的点
dynamic:从一组staticanchor中,每次动态选取一个合适的
perimeter:沿着特定图形的边
continous:没有固定的位置,根据线另一端点的朝向决定

connectors四种类型

Bezier(default):弯曲的贝塞尔曲线,参数是curviness用来定义控制点,默认150
Straightstubgap(线和endpoint的间隔) 
flowchart: 折线,有stubalwaysRespectStubs gap midpoint(转折点)和cornerRadius
statemachine:轻微弯曲的线,quadraticBezier(二次贝塞尔曲线),有margin,curviness, proximityLimit(连接到自己时最小距离)

endpoint有四种类型

dotradius cssClass  hoverClass
rectangle:width height cssClas hoverClass
blank:不可见,对于可拖拽链接的,使用dotrectangle参数,并在css中设为透明。
image:url得到imagesrc cssClass hoverClass

overlay有五种类型

arrow:控制长宽等
label:
plainArrow:三角形箭头
diamond:菱形
custom:任意的dom元素,需要实现create方法

location

[0..1]代表connector上的比例
大于1或小于0代表绝对值的pixel

     

connections:

adding:在connectmakeSource  addEndpoint

    showhideoverlayconnection.hideOverlay,connection.showOverlay  endPoint有同样的方法

     removeoverlayconnection.removeOverlay()

重用commonsetting

var common = {
    anchors:[ "BottomCenter", "TopCenter" ],
    endpoints:["Dot", "Blank" ]
};

jsPlumb.connect({ source:"someElement", target:"someOtherElement" }, common);

jsPlumb.connect({ source:"aThirdElement", target:"yetAnotherElement" }, common);

画连线

设置endPointsource
var exampleGreyEndpointOptions = {
    endpoint:"Rectangle",
    paintStyle:{ width:25, height:21, fillStyle:'#666' },
    isSource:true,
    connectorStyle : { strokeStyle:"#666" },
    isTarget:true
};
var endpoint = jsPlumb.addEndpoint('elementId', exampleGreyEndpointOptions 
);

makeTargetmakeSource

     将整个element变成targetsource

jsPlumb.makeSource("el1", {
    anchor:"Continuous",
    endpoint:["Rectangle", { width:40, height:20 }],
    maxConnections:3
});

uniqueEndpoint

     设置只有一个 endPoint

移除connectionsendpoint

jsPlumb.detach(conn);
删除el上所有链接:jsPlumb.detachAllConnections(el, [params])
所有链接:jsPlumb.detachEveryConnection();

通过connect中的parameters参数向jsPlumb中传入参数。

动画:

jsPlumb.animate : function(el, properties, options) 调用方式类似于 jQuery

查询jsPlumb

可以用来查找connection或者endpoint

css样式

    overlays: cssClass

    paintStyle可设置:fillStyle strokeStyle  lineWidth outlineWidth  outlineColordashStyle

hoverpaint style

    hoverPaintStyle endpointHoverStyles

阅读更多
换一批

没有更多推荐了,返回首页