jsPlumb.connect Examples（jsPlumb連接示例）

This section provides various examples of how to use the programmatic API to establish Connections. The basic syntax of a call is that you execute 'connect', providing a source and a target, and optionally a paintStyle and preferences for where you want the plumbing to be anchored on each element, as well as the type of connector to use.

（本節提供了各種的例子如何使用編程API建立連接。的基本語法調用就是你執行“連接”,提供一個源和目標,和可選paintStyle和喜好,你想要的管道固定在每一個元素,以及連接器使用的類型。）

• Connect window1 to window2 with the default settings:（連接window1 window2默認設置:）

  jsPlumb.connect({source:"window1", target:"window2"});

• Connect window1 to window2 with a 15 pixel wide yellow Connector, and a slightly brighter endpoint (remember the default Endpoint is a Dot):（連接window1 window2 15像素寬黃色連接器,和較亮的端點(記住默認端點是一個點):）

  jsPlumb.connect({source:'window1',target:'window2',paintStyle:{lineWidth:15,strokeStyle:'rgb(243,230,18)'},endpointStyle:{fillStyle:'rgb(243,229,0)'} });
• Connect window1 to window2 with a 15 pixel wide yellow Connector, and a slightly brighter endpoint:（連接window1 window2 15像素寬黃色連接器,和較亮的端點:） jsPlumb.connect({source:'window1',target:'window2',paintStyle:{lineWidth:15,strokeStyle:'rgb(243,230,18)'},endpointStyle:{fillStyle:'rgb(243,229,0)'} });
• Connect window3 to 'window4' with a 10 pixel wide, semi opaque blue Connector, anchored to the left middle of window3, and the right middle of window4, with a Rectangle endpoint of width 10 and height 8:（連接window3“window4”10像素寬,半不透明藍色連接器,固定在左window3,和正確的window4,寬度10和高度的矩形端點8:） jsPlumb.connect({source:'window3',target:'window4',paintStyle:{ lineWidth:10, strokeStyle:'rgba(0, 0, 200, 0.5)' },anchors:["Right", "Left"],endpoint:[ "Rectangle", { width:10, height:8 } ] });

• Connect window2 to window3 with a default Connector from the top center of window2 to the bottom center of window3, and rectangular endpoints:（連接window2 window3默認連接器的頂部中心window2 window3底部中心,和矩形端點:）

  jsPlumb.connect({source:'window2',target:'window3',paintStyle:{lineWidth:8, strokeStyle:'rgb(189,11,11 )'},anchors:["Bottom", "Top"],endpoint:"Rectangle" });

• Connect window1 to window2 with a 15 px wide yellow Bezier. Endpoints are a slightly lighter shade of yellow.（連接window1 window2 15 px寬黃色的貝塞爾曲線。端點稍淺的黃色。）

  jsPlumb.connect({source:'window1',target:'window2',anchors:["Bottom", [0.75,0,0,-1]],paintStyle:{lineWidth:15,strokeStyle:'rgb(243,230,18)'},endpointStyle:{fillStyle:'rgb(243,229,0)'} });

• Connect window3 to window4 with a 10px wide blue-ish half transparent Bezier. Put Endpoints underneath the element they attach to. The Endpoints have a radial gradient. Both ways of specifying gradient positioning are shown here.（連接window3與10 px寬window4放慢一半透明的貝塞爾曲線。下面把端點附加到元素。端點有一個徑向漸變。兩種方式指定梯度定位顯示在這里。）

  var w34Stroke = 'rgba(50, 50, 200, 1)';var w34HlStroke = 'rgba(180, 180, 200, 1)';jsPlumb.connect( {source:'window3',target:'window4',paintStyle:{lineWidth:10, strokeStyle:w34Stroke},anchors:["RightMiddle", "LeftMiddle"],endpointStyle:{ gradient : {stops:[[ 0, w34Stroke ], [ 1, w34HlStroke ]], offset:17.5, innerRadius:15 }, radius:35},//endpointStyle:{ gradient : {stops:[[0, w34Stroke], [1, w34HlStroke]], offset:'78%', innerRadius:'73%'}, radius:35 }});

• Connect window2 to window3 with an 8px red Bezier and default rectangular endpoints. See also how the first Anchor is specified here - this is how you create Anchors in locations jsPlumb does not offer shortcuts for. The Endpoints in this example have linear gradients applied.（連接window2 window3 8 px紅貝塞爾曲線和默認的矩形的端點。參見第一個錨是如何指定在這里——這是如何創建錨位置jsPlumb并不提供快捷方式。本例中的端點應用線性漸變。）

  var w23Stroke = 'rgb(189,11,11)';jsPlumb.connect({source:'window2',target:'window3',paintStyle:{lineWidth:8,strokeStyle:w23Stroke},anchors:[[0.3,1,0,1], "Top"],endpoint:"Rectangle",endpointStyles:[{ gradient : {stops:[[0, w23Stroke], [1, '#558822']] }},{ gradient : {stops:[[0, w23Stroke], [1, '#882255']] }}]});

• Connect window5 to window6 from center to center, 5px wide line that is green and half transparent. the Endpoints are 125px in radius and spill out from underneath their elements.（連接window5 window6從中心到中心,5 px寬線綠色和透明的一半。端點是125 px的半徑和泄漏從下面的元素。）

  jsPlumb.connect({source:'window5',target:'window6',anchors:["Center", "Center"],paintStyle:{lineWidth:5,strokeStyle:'rgba(0,255,0,0.5)'},endpointStyle:{radius:125} });

• Connect window4 to window5 from bottom right to top left, with a 7px straight line purple Connector, and an image as the endpoint, placed on top of the element it is connected to.（連接window4 window5從右下角到左上角,用7 px直線紫色連接器,和一個端點的形象,把它連接到的元素。）

  jsPlumb.connect({source:"window4",target:"window5",anchors:[ "BottomRight","TopLeft" ],paintStyle:{ lineWidth:7, strokeStyle:"rgb(131,8,135)" },endpoint:[ "Image", { src:"http://morrisonpitt.com/jsPlumb/img/endpointTest1.png" } ],connector:"Straight" });

• Connect window5 to window6 between their center points with a semi-opaque connector, and 125px endpoints:（連接window5 window6半透明連接器,其中心點之間和125 px端點:）

  jsPlumb.connect({source:"window5",target:"window6",anchors:[ "Center", "Center" ],paintStyle:{ lineWidth:5, strokeStyle:"rgba(0,255,0,0.5)" },endpointStyle:{ radius:125 } });

• Connect window7 to window8 with a 10 pixel wide blue Connector, anchored on the top left of window7 and the bottom right of window8:（連接window7 window8 10像素寬藍連接器,window7固定在左上角和右下角window8:）

  jsPlumb.connect({source:"window7",target:"window8",paintStyle:{ lineWidth:10, strokeStyle:"blue" },anchors:[ "TopLeft", "BottomRight" ] });

• Connect the bottom right corner of window4 to the top left corner of window5, with rectangular Endpoints of size 40x40 and a hover color of light blue:（連接的右下角window4 window5左上角,矩形端點的大小40 x40和盤旋的顏色淺藍色:）

  jsPlumb.connect({source:"window4",target:"window5",anchors:["BottomRight","TopLeft"],paintStyle:{lineWidth:7,strokeStyle:'rgb(131,8,135)'},hoverPaintStyle:{ strokeStyle:"rgb(0, 0, 135)" },endpointStyle:{ width:40, height:40 },endpoint:"Rectangle",connector:"Straight" });
• Connect window1 to window2 with the default paint settings but provide some drag options (which are passed through to the underlying library's draggable call):（連接window1 window2默認的油漆設置但提供一些拖動選項(通過底層庫的拖拽電話):） jsPlumb.connect({source:'window1', target:'window2',dragOptions:{cursor:'crosshair'} });

?

?

轉載于:https://www.cnblogs.com/seberina/p/3643221.html

總結

以上是生活随笔為你收集整理的jsPlumb 学习笔记（1）（api部分翻译）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。