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‘
      }
  });

jsPlumb 学习笔记（1）（api部分翻译）,布布扣,bubuko.com

jsPlumb 学习笔记（1）（api部分翻译）