jsplumb小例子

于 2015-07-25 16:04:11 发布
阅读量5.3k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： JAVA开发 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yinxianluo/article/details/47057257
本文档介绍了如何使用jsplumb库在两个图标之间绘制可拖动的连接线，包括设置画线样式参数，如fillStyle、strokeStyle、lineWidth等，并提供了多个示例，展示了jsplumb在不同场景下的应用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

var parentWin = window.opener ;
//关闭父窗口
parentWin.close();

window.parent.close()

window.top.close()



Paint Style Parameters

This is the full list of parameters you can set in a paintStyle object, but note thatfillStyle is ignored by Connectors, and strokeStyle is ignored by Endpoints. Also, if you create a Connection using jsPlumb.connect and do not specify any Endpoint styles, the Endpoints will derive their fillStyle from the Connector's strokeStyle.

fillStyle, strokeStyle and outlineColor can be specified using any valid CSS3 syntax.

  • fillStyle - color for an Endpoint, eg. rgba(100,100,100,50), "blue", "#456", "#993355", rgb(34, 56, 78).
  • strokeStyle - color for a Connector. see fillStyle examples.
  • lineWidth - width of a Connector's line. An integer.
  • outlineWidth - width of the outline for an Endpoint or Connector. An integer.
  • outlineColor - color of the outline for an Endpoint or Connector. see fillStyle examples.
  • dashstyle - This comes from VML, and allows you to create dashed or dotted lines. It has a better syntax than the equivalent attribute in SVG (stroke-dasharray, discussed below), so jsPlumb supports this for both renderers. The dashstyle attribute is specified as an array of strokes and spaces, where each value is some multiple ofthe width of the Connector, and that's where it's better than SVG, which just uses absolute pixel values.

The VML spec is a good place to find valid values for dashstyle. Note that jsPlumb does not support the string values for this attribute ("solid", "dashdot", etc).

In SVG render mode, jsPlumb uses the lineWidth parameter in conjunction with the values in adashstyle attribute to create an appropriate value for stroke-dasharray.

  • stroke-dasharray - SVG only. This is the SVG equivalent of dashstyle. The SVG spec discusses valid values for this parameter. But be aware that jsPlumb does not convert this into a validdashstyle attribute when using the VML renderer. Better to use dashstyle.
  • stroke-dashoffset - SVG only. This is used in SVG to specify how far into the dash pattern to start painting. For more information, seethe SVG spec
  • joinstyle - VML and SVG only. As with dashstyle, this is a VML attribute that jsPlumb supports for both VML and SVG - jsPlumb turns this into astroke-linejoin attribute when rendering with SVG. This attribute specifies how you want individual segments of connectors to be joined; the VML and SVG specs both have examples of this, of which many are the same between the two, which is why jsPlumb will automatically convert this attribute into the SVG equivalent.
  • stroke-linejoin - SVG only. This is the equivalent of VML's joinstyle attribute, but as with stroke-dasharray, jsPlumb does not convert this into something approriate for VML. So, usingjoinstyle will enable you to support more browsers with less effort.




<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <style>
        #divclasshost{top:1500px;left:600px;}
        .demo {position: relative; width:100%;height: 2000px;}
        .outclass{width: 50px;height:50px;border: 1px solid blue;position:absolute;}
        .divclass{width: 50px;height:50px;border: 1px solid blue;position:absolute;}
        .divclasshost{width: 200px;height:400px;border: 1px solid blue;position:absolute;}
    </style>
    </head>
    <body >
    <div  class="demo" id="demo">
        <div id="divclasshost" class="divclasshost">主机</div>
    </div>
        <script src="http://m13671097712.blog.163.com/blog/jsPlumb-1.6.2-min.js"></script>
        <script src="http://m13671097712.blog.163.com/blog/jquery-1.3.2.js"></script>

    
        <script type="text/javascript">
            jsPlumb.ready(function() {

                 var instance = jsPlumb.getInstance();//创建实例

                 var hoverPaintStyle = { strokeStyle:"#7ec3d9" };    //声明颜色样式。下方调用
                 var w23Stroke = "rgb(189,11,11)";                    //声明rgb颜色样式。下方调用

                 var connectorStrokeColor = "rgba(50, 50, 200, 1)", //声明样式方便下方调用
                     connectorHighlightStrokeColor = "rgba(180, 180, 200, 1)",
                     hoverPaintStyle = { strokeStyle:"#7ec3d9" };     //设置线的鼠标浮动样式加入



                 var hostheight=Number(document.getElementById("divclasshost").offsetHeight)-2; //得到主机的高度
            
                 var hosttop=Number(document.getElementById("divclasshost").offsetTop); //得到主机上边距距离

                 var a=10;//声明传入接口图标个数
                          //循环画图标，和连线。
                 for(var i=1;i<=a;i++){
                      $(".demo").append("<div id='bussiness"+i+"' class='divclass' >传入接口</div>");    //创建DIV图标

                      var bussinessheight=Number(document.getElementById("bussiness"+i).offsetHeight)-2;//得到图标高度
                        
                      //根据图标高度与主机高度比较然后从新设置图标的位置。
                      if(a*bussinessheight>hostheight){
                        document.getElementById("bussiness"+i).style.top=hosttop-(a*bussinessheight-hostheight)/2+(i-1)*bussinessheight+(i*5)-25+'px';
                      }else{
                        document.getElementById("bussiness"+i).style.top=(hosttop+i*(hostheight/(a+1))-bussinessheight/2)+'px';
                      }
                        document.getElementById("bussiness"+i).style.left='40px';
                    //bussiness1与divclasshost连线方法
                    var content1=instance.connect({
                    source:"bussiness"+i,  //原点
                    target:"divclasshost",  //终点
                    connector:"Straight", //线的类型
                    anchors:["ContinuousRight",[0,i/(a+1),1,0]],
                    //ContinuousRight是开始图标的连线端点位置
                    //[0,i/(a+1),1,0]是结束图标的连线端点位置。
                    //ContinuousRight是端点不重复。Right是端点重复在一个点上。
                    //[0,0.2,1,0]是定位到一个点上。
                    paintStyle:{    //线的样式属性
                        lineWidth:2,//线的宽度属性
                        strokeStyle:w23Stroke,//线的颜色属性
                        //dashstyle:"4 1",       //分段显示4是每段长度 1是段与段之间的长度
                     }
                    ,hoverPaintStyle:hoverPaintStyle// 设置线的鼠标浮动样式加入
                    ,endpointStyle:{ radius:1 }//结束端点风格
                    ,overlays:[ ["PlainArrow", {location:1, width:15, length:12} ]]//箭头样式
                  });
                 }
                
                 var b=10;//声明传出接口图标个数
                 for(var j=1;j<=b;j++){

                      $(".demo").append("<div id='out"+j+"' class='outclass' >传出接口</div>");    
                      var outheight=Number(document.getElementById("out"+j).offsetHeight)-2;
                      if(b*outheight>hostheight){
                        document.getElementById("out"+j).style.top=hosttop-(b*outheight-hostheight)/2+(j-1)*outheight+(j*5)-25+'px';
                      }else{
                        document.getElementById("out"+j).style.top=(hosttop+j*(hostheight/(b+1))-outheight/2)+'px';
                      }
                        document.getElementById("out"+j).style.left='900px';
                    
                   //bussiness1与divclasshost连线方法
                    instance.connect({
                    source:"divclasshost",  //原点
                    target:"out"+j,  //终点
                    connector:"Straight",
                    anchors:[[1,j/(b+1),1,1],"ContinuousLeft"],
                    paintStyle:{//线的样式属性
                        lineWidth:2,//线的宽度属性
                        strokeStyle:w23Stroke,//线的颜色属性
                     //   dashstyle:"4 1",       //分段显示4是每段长度 1是段与段之间的长度
                     }
                    ,hoverPaintStyle:hoverPaintStyle// 设置线的鼠标浮动样式加入
                    ,endpointStyle:{ radius:1 }//结束端点风格
                    ,overlays:[ ["PlainArrow", {location:1, width:15, length:12} ]]//箭头
                  });

                 }
                // document.getElementById("bussiness1").style.top=(hosttop+1*(hostheight/4)-bussinessheight/2)+'px';
                // document.getElementById("bussiness2").style.top=(hosttop+2*(hostheight/4)-bussinessheight/2)+'px';
                // document.getElementById("bussiness3").style.top=(hosttop+3*(hostheight/4)-bussinessheight/2)+'px';
                // document.getElementById("bussiness5").style.top=(hosttop+1*(hostheight/4)-bussinessheight/2)+'px';
                // document.getElementById("bussiness6").style.top=(hosttop+2*(hostheight/4)-bussinessheight/2)+'px';
                // document.getElementById("bussiness7").style.top=(hosttop+3*(hostheight/4)-bussinessheight/2)+'px';

                instance.draggable(jsPlumb.getSelector(".outclass"), { containment:".demo"});//设置outclass可拖动
                instance.draggable(jsPlumb.getSelector(".divclass"), { containment:".demo"});//设置divclass可拖动
                instance.draggable(jsPlumb.getSelector(".divclasshost"), { containment:".demo"});//设置divclasshost可拖动
            });    
        </script>
     </body>
</html>

阅读(8)|评论(0)|阅读全文>>

jsplumb（2）在2个图标之间绘制一条线

2014-6-13 14:36:46

jsplumb（2）在2个图标之间绘制一条线 - m13671097712 - loading
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <style>
        .demo {position: relative; width:100%;height: 600px;}
        #div1{top:5em;left:4em;}
        #div2{top:5em;left:20em;}
        .divclass{width: 100px;height: 100px;border: 1px solid blue;position:absolute;}
    </style>
    </head>
    <body >
    <div  class="demo" >
        <div id="div1" class="divclass"></div>
        <div id="div2" class="divclass"></div>
    </div>
        <script src="http://m13671097712.blog.163.com/blog/jsPlumb-1.6.2-min.js"></script>
        <script type="text/javascript">
            jsPlumb.ready(function() {
                var instance = jsPlumb.getInstance();
                  
                  var w23Stroke = "rgb(189,11,11)"; //rgb颜色
                  //div1与div2连线方法
                  var connection3 = instance.connect({
                    source:"div1",  //原点
                    target:"div2",  //终点
                    paintStyle:{   //线的样式属性
                        lineWidth:10,//线的宽度属性
                        strokeStyle:w23Stroke,//线的颜色属性
                        outlineColor:"#666",//线的边框颜色属性
                        outlineWidth:4      //线的边框宽度属性
                     }
                     });
                instance.draggable(jsPlumb.getSelector(".divclass"), { containment:".demo"});
            });   
        </script>
     </body>
</html>

jsplumb（2）在2个图标之间绘制一条线 - m13671097712 - loading
2.画虚线代码如下：
                  var w23Stroke = "rgb(189,11,11)"; //rgb颜色

              //var hoverPaintStyle = { strokeStyle:"#7ec3d9" };    //设置线的鼠标浮动样式加入
                  //div1与div2连线方法
                  var connection3 = instance.connect({
                    source:"div1",  //原点
                    target:"div2",  //终点
                    paintStyle:{   //线的样式属性
                        lineWidth:10,//线的宽度属性
                        strokeStyle:w23Stroke,//线的颜色属性
                        dashstyle:"4 1",       //分段显示4是每段长度 1是段与段之间的长度
                     }
                //, hoverPaintStyle:hoverPaintStyle// 设置线的鼠标浮动样式加入
                //,endpoint:"Rectangle", //端点形状方形，去掉默认是圆形。
                     });   





阅读(8)|评论(0)|阅读全文>>

jsplumb（1）绘制2个图标可托拉拽

2014-6-13 13:48:24


jsplumb（1）绘制2个图标可托拉拽 - m13671097712 - loading
 
1.首先建立<div>容器。代码如下：
    <div  class="demo">
   
   
    </div>
    <style>
        .demo{width: 100%;height:500px;margin: auto;border: 1px solid red;}
    </style>
 
2.在div容器中建立2个图标div。代码如下：
    <div  class="demo" >
        <div id="div1" class="divclass"></div>
        <div id="div2" class="divclass"></div>
    </div>
        <style>
       .demo {position: relative; width:100%;height: 600px;}<!--注意position属性必须写-->
           #div1{top:5em;left:4em;}
           #div2{top:5em;left:10em;}
           .divclass{width: 100px;height: 100px;border: 1px solid blue;position:absolute;}<!--注意position属性必须写-->
        </style>
3.导入<script src="http://m13671097712.blog.163.com/blog/jsPlumb-1.6.2-min.js"></script>

4.编写js代码如下：

        <script type="text/javascript">
            jsPlumb.ready(function() {
                var instance = jsPlumb.getInstance();//创建实例
                instance.draggable(jsPlumb.getSelector(".divclass"), { containment:".demo"}); //设置divclass样式在demo样式中可拖动
            });   
        </script>

全部代码如下：
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">
    <style>


.demo {position: relative; width:100%;height: 600px;}
#div1{top:5em;left:4em;}
#div2{top:5em;left:10em;}
.divclass{width: 100px;height: 100px;border: 1px solid blue;position:absolute;}
  </style>
    </head>
    <body > 

    <div  class="demo" >
        <div id="div1" class="divclass"></div>
        <div id="div2" class="divclass"></div>
    </div>
        <script src="http://m13671097712.blog.163.com/blog/jsPlumb-1.6.2-min.js"></script>
       
        <script type="text/javascript">
            jsPlumb.ready(function() {
                var instance = jsPlumb.getInstance();
                instance.draggable(jsPlumb.getSelector(".divclass"), { containment:".demo"});
            });   
        </script>
     </body>
</html>

阅读(1)|评论(0)|阅读全文>>

jsplumb

2014-6-12 10:44:40


加载jsplumb两种方法
1.
jsPlumb.bind("ready",function(){
    //要执行jsplumb代码
}); 
2.
jsPlumb.ready(function() {  //要执行jsplumb代码 });

jsplumb代码解析如下：
var firstInstance = jsPlumb.getInstance();//创建实例 
//设置实例默认属性
firstInstance.importDefaults({ Connector : [ "Bezier", { curviness: 150 } ],// 连线类型 Bezier StateMachine Straight曲线 Flowchart 流程图线
  Anchors : [ "TopCenter" , "BottomCenter" ]
}); 
//使用实例进行连线
firstInstance.connect({ source:"element1", //连线的原点（源） target:"element2", //连线的终点（目标指向） scope:"someScope" });

//建立一个带默认属性的实例

var secondInstance = jsPlumb.getInstance({ PaintStyle:{ lineWidth:6, strokeStyle:"#567567", outlineColor:"black", outlineWidth:1 }, Connector:[ "Bezier", { curviness: 30 } ], Endpoint:[ "Dot", { radius:5 } ], EndpointStyle : { fillStyle: "#567567" }, Anchor : [ 0.5, 0.5, 1, 1 ] }); secondInstance.connect({ source:"element4", target:"element3", scope:"someScope" });



//设置默认容器
jsPlumb.setContainer($("body"));方法一
jsPlumb.setContainer(document.getElementById("foo"));方法二 jsPlumb.addEndpoint(someDiv, { endpoint options });给div加端点 
 
 

 
    
 
    
 
 
    
 
 
   
 
  
 
 
 
 
阅读(6)|评论(0)|阅读全文>> 
 

 

 
 
 
 
 
  
 
   
 
    
 
     
Jsplum拓扑图firstdemo，简单的图标拖拉拽
 
     
2014-6-10 16:47:29 
 
    
 
   
 
  
 
 
 
 
 
  

   <!DOCTYPE html>
   
 <html>
   
     <head>
   
         <meta charset="utf-8">
   
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   
         <meta name="viewport" content="width=device-width">
   
         <style type="text/css">
   
         #window1 {  top:5em;left:4em;border: 1px solid red;height: 100px;width: 100px;}
   
         body {
   
             padding:0;
   
             margin:0;    
   
             font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;    
   
             background-color: whitesmoke;
   
         }
   
         .demo {
   
           position: relative;
   
           width:100%;
   
           background-color:white;    
   
           overflow:auto;  
   
           margin-top: 53px;
   
           margin-bottom:25px;
   
           height: 600px;
   
         }
   
         .window {
   
             background-color:white;
   
             border:1px solid #346789;
   
             box-shadow: 2px 2px 19px #e0e0e0;
   
             -o-box-shadow: 2px 2px 19px #e0e0e0;
   
             -webkit-box-shadow: 2px 2px 19px #e0e0e0;
   
             -moz-box-shadow: 2px 2px 19px #e0e0e0;
   
             -moz-border-radius:0.5em;
   
             border-radius:0.5em;        
   
             width:5em; height:5em;        
   
             position:absolute;    
   
             color:black;
   
             padding:0.5em;
   
             width:80px; 
   
             height:80px;
   
             line-height: 80px;     
   
             -webkit-transition: -webkit-box-shadow 0.15s ease-in;
   
             -moz-transition: -moz-box-shadow 0.15s ease-in;
   
             -o-transition: -o-box-shadow 0.15s ease-in;
   
             transition: box-shadow 0.15s ease-in;
   
         }
   
         .window:hover {
   
             border:1px solid #123456;
   
             box-shadow: 2px 2px 19px #444;
   
            -o-box-shadow: 2px 2px 19px #444;
   
            -webkit-box-shadow: 2px 2px 19px #444;
   
            -moz-box-shadow: 2px 2px 19px #fff;
   
             opacity:0.9;
   
             filter:alpha(opacity=90);
   
         }
   
         .window a {
   
             font-family:helvetica;
   
         }
   
         </style>
   
     </head>
   
     <body >  
   
         <div id="main">
   
             <!-- demo -->
   
             <div class="demo">
   
                  <div class="window" id="window1"><strong>Window 1</strong></div>                       
   
             </div>
   
             <!-- /demo -->
   
         </div>
   
         <script src="http://m13671097712.blog.163.com/blog/../jsplumbb/dom.jsPlumb-1.6.2-min.js"></script>
   
         <script type="text/javascript">
   
             jsPlumb.bind("ready", function() {
   
                 var instance = jsPlumb.getInstance();
   
                 instance.bind("dblclick", function(connection, originalEvent) { alert("double click on connection from " + connection.sourceId + " to " + connection.targetId); });
   
                 instance.bind("endpointClick", function(endpoint, originalEvent) { alert("click on endpoint on element " + endpoint.elementId); });
   
                             instance.bind("contextmenu", function(component, originalEvent) {
   
                     ale 
   

    
 
   
  rt("context menu on component " + component.id);
   
                     originalEvent.preventDefault();
   
                     return false;
   
                 });
   
                 
   
                 //设置图标可以拖拽方法
   
                 instance.draggable(jsPlumb.getSelector(".window"), { containment:".demo"});  
   
                   
   
                 jsPlumb.fire("jsPlumbDemoLoaded", instance);
   
             });
   
         </script>
   
      </body>
   
 </html> 
   

    Jsplum拓扑图firstdemo，简单的图标拖拉拽 - m13671097712 - m13671097712的博客
   
 
  
 
 
 


                

        

    

    
  



    



            

  



          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值