jsplumb小例子

最新推荐文章于 2024-04-17 11:58:14 发布

yinxianluo

最新推荐文章于 2024-04-17 11:58:14 发布

阅读量5.2k

点赞数

分类专栏： JAVA开发文章标签： js

本文链接：https://blog.csdn.net/yinxianluo/article/details/47057257

版权

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").

最低0.47元/天解锁文章

yinxianluo

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jsplumb小例子

#divclasshost{top:1500px;left:600px;} .demo {position: relative; width:100%;height: 2000px;} .outclass{width: 50px;height:50px;border: 1px solid blue;position:absolute;} .di
复制链接

扫一扫