jsPlumb 学习笔记

介绍

   使用svg完成画图，四个概念：

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

   endpoint：connection的一端节点,通过addPoint makeSource, connect创建，

   connector：连接线

   overlay:connector的装饰组件，如labelarrow

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

anchor有四种类型：

static：固定不可移动的点

dynamic：从一组staticanchor中，每次动态选取一个合适的

perimeter：沿着特定图形的边

continous：没有固定的位置，根据线另一端点的朝向决定

connectors四种类型

Bezier(default)：弯曲的贝塞尔曲线，参数是curviness用来定义控制点，默认150

Straight：stub和gap（线和endpoint的间隔） 

flowchart: 折线，有stubalwaysRespectStubs gap midpoint（转折点）和cornerRadius

statemachine ：轻微弯曲的线， quadraticBezier （二次贝塞尔曲线），有 margin,curviness, proximityLimit （连接到自己时最小距离）

endpoint有四种类型

dot：radius cssClass  hoverClass

rectangle:width height cssClas hoverClass

blank:不可见，对于可拖拽链接的，使用dot和rectangle参数，并在css中设为透明。

image:从url得到image，src cssClass hoverClass

overlay有五种类型

arrow:控制长宽等

label:

plainArrow：三角形箭头

diamond：菱形

custom：任意的dom元素，需要实现create方法

location：

[0..1]代表connector上的比例

大于1或小于0代表绝对值的pixel

     

connections:

adding：在connectmakeSource  addEndpoint中

    show和hideoverlay：connection.hideOverlay,connection.showOverlay  ，endPoint有同样的方法

     removeoverlay：connection.removeOverlay()

重用commonsetting

<span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">var common = {</span></span></span></code></span>
<code class="cjk"><span style="color:#333333;">    </span></code><span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">anchors:[ "BottomCenter", "TopCenter" ],</span></span></span></code></span>
<code class="cjk"><span style="color:#333333;">    </span></code><span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">endpoints:["Dot", "Blank" ]</span></span></span></code></span>
<span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">};</span></span></span></code></span>

<span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">jsPlumb.connect({ source:"someElement", target:"someOtherElement" }, common);</span></span></span></code></span>

<span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">jsPlumb.connect({ source:"aThirdElement", target:"yetAnotherElement" }, common);</span></span></span></code></span>

画连线

<span style="color:#333333"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:6pt">设置</span></span><span style="font-family:Courier New,monospace;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:6pt">endPoint</span></span></span><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:6pt">为 </span></span><span style="font-family:Courier New,monospace;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:6pt">source</span></span></span></span>
<span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">var exampleGreyEndpointOptions = {</span></span></span></code></span>
<code class="cjk"><span style="color:#333333;">    </span></code><span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">endpoint:"Rectangle",</span></span></span></code></span>
<code class="cjk"><span style="color:#333333;">    </span></code><span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">paintStyle:{ width:25, height:21, fillStyle:'#666' },</span></span></span></code></span>
<code class="cjk"><span style="color:#333333;">    </span></code><span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">isSource:true,</span></span></span></code></span>
<code class="cjk"><span style="color:#333333;">    </span></code><span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">connectorStyle : { strokeStyle:"#666" },</span></span></span></code></span>
<code class="cjk"><span style="color:#333333;">    </span></code><span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">isTarget:true</span></span></span></code></span>
<span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">};</span></span></span></code></span>
<span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">var endpoint = jsPlumb.addEndpoint('elementId', exampleGreyEndpointOptions </span></span></span></code></span>
<span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">);</span></span></span></code></span>

makeTarget和makeSource

     将整个element变成target或source

<span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">jsPlumb.makeSource("el1", {</span></span></span></code></span>
<code class="cjk"><span style="color:#333333;">    </span></code><span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">anchor:"Continuous",</span></span></span></code></span>
<code class="cjk"><span style="color:#333333;">    </span></code><span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">endpoint:["Rectangle", { width:40, height:20 }],</span></span></span></code></span>
<code class="cjk"><span style="color:#333333;">    </span></code><span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">maxConnections:3</span></span></span></code></span>
<span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">});</span></span></span></code></span>

uniqueEndpoint：

     设置只有一个endPoint

移除connections和endpoint

<span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">jsPlumb.detach(conn);</span></span></span></code></span>
<code class="cjk"><span style="color:#333333"><span style="background:transparent"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">删除</span></span></span></span></code><span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">el</span></span></span></code></span><code class="cjk"><span style="color:#333333"><span style="background:transparent"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">上所有链接：</span></span></span></span></code><span style="font-family:Courier New,monospace"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:6pt">jsPlumb.detachAllConnections(el, [params])</span></span></span></span>
<span style="color:#333333"><span style="background:transparent"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:6pt">所有链接：</span></span></span><span style="font-family:Courier New,monospace"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:6pt"><span style="background:transparent">jsPlumb.detachEveryConnection();</span></span></span></span></span>

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

动画：

<span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">jsPlumb.animate : function(el, properties, options) </span></span></span></code></span><code class="cjk"><span style="color:#333333"><span style="background:transparent"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">调用方式类似于 </span></span></span></span></code><span style="font-family:Courier New,monospace"><code class="western"><span style="color:#333333;"><span style="font-family:Monaco,Consolas,Courier,Lucida Console,monospace;"><span style="font-size:7pt">jQuery</span></span></span></code></span>

查询jsPlumb

可以用来查找connection或者endpoint等

css样式

    overlays: cssClass

    paintStyle可设置：fillStyle strokeStyle  lineWidth outlineWidth  outlineColordashStyle

hoverpaint style

    hoverPaintStyle endpointHoverStyles