5

トップ要素を表示し、その要素を画面上の他の 6 つの要素に接続する jsplumb を使用した非常に単純なセットアップを作成しました。

コネクタ ラインをアニメーション化して、単に表示するのではなく、一番上の要素から成長するように見えるようにすることは可能かどうか疑問に思っています。

シンプルなレイアウトを作成するためにコピーしたコードを次に示します。

jsPlumb.ready(function() {
    jsPlumb.importDefaults({
            // notice the 'curviness' argument to this Bezier curve.  the curves on this page are far smoother
            // than the curves on the first demo, which use the default curviness value.            
            Connector : [ "Bezier", { curviness:50 } ],
            PaintStyle : { strokeStyle:"#000000", lineWidth:6 },
            EndpointStyle : { radius:1, fillStyle:"#000000" },
            HoverPaintStyle : {strokeStyle:"#ec9f2e" },
            EndpointHoverStyle : {fillStyle:"#ec9f2e" },            
            Anchors :  [ "BottomCenter", "TopCenter" ]
        });

        jsPlumb.connect({source:"starterPoint", target:"window1"});
        jsPlumb.connect({source:"starterPoint", target:"window2"});
        jsPlumb.connect({source:"starterPoint", target:"window3"});
        jsPlumb.connect({source:"starterPoint", target:"window4"});
        jsPlumb.connect({source:"starterPoint", target:"window5"});
        jsPlumb.connect({source:"starterPoint", target:"window6"});


});

私が使用したCSSは次のとおりです。

body
{
    width: 960px;
    margin: 0 auto; 
}

#starterPoint
{
    width: 8px;
    height: 8px;
    margin: 0 auto;
    background-color:#000;  
}

#window1, #window2, #window3, #window4, #window5, #window6
{
    width: 100px;
    height: 50px;
    float: left;
    margin-left: 50px;
    margin-top: 70px;
    background-color:#036;  
}

そして、私のhtmlの本文セクションの内容は次のようになります

<div id="starterPoint">&nbsp;</div>
<div id="window1">&nbsp;</div>
<div id="window2">&nbsp;</div>
<div id="window3">&nbsp;</div>
<div id="window4">&nbsp;</div>
<div id="window5">&nbsp;</div>
<div id="window6">&nbsp;</div>

コネクタを starterPoint から下の各ウィンドウ要素に「成長」させたいと思います。

私はjsplumbの使用に非常に慣れていないため、それに関する多くの情報を見つけることができないようです

ありがとう

4

1 に答える 1

1

新しいデモを作ろう ,

HTML側：

<div id="main">
            <div class="component window" id="window1"><strong>Window 1</strong></div>
            <div class="component window" id="window2"><strong>Window 2</strong></div>
</div>

CSS側：

/** ELEMENT POSITIONS **/
#window1 { top:5em;left:4em;}
#window2 { top:5em; left:49em;}
/** OPEN SANS FONT **/
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
    src:local('Open Sans'), 
        local('OpenSans'),
        url("OpenSans-Regular.ttf") format('truetype'),
        url("OpenSans.woff") format('woff');        
}


body {
    padding:0;
    margin:0;
    background-color:white;    
    font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;    
    background-color:#eaedef;

}


.component { 
  border:1px solid #346789; 
  border-radius:0.5em;        
  opacity:0.8; 
  filter:alpha(opacity=80);
  background-color:white;
  color:black;
  padding:0.5em;   
  font-size:0.8em;
}

.component: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 {
    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:8em; 
    height:8em;
    line-height: 8em; 
    font-size:0.8em;
    -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);
}

そしてJQuery側：

jsPlumb.bind("ready", function() {
     jsPlumb.importDefaults({
            // notice the 'curviness' argument to this Bezier curve.  the curves on this page are far smoother
            // than the curves on the first demo, which use the default curviness value.            
            Connector : [ "Bezier", { curviness:50 } ],
            PaintStyle : { strokeStyle:"#000000", lineWidth:6 },
            EndpointStyle : { radius:1, fillStyle:"#000000" },
            HoverPaintStyle : {strokeStyle:"#ec9f2e" },
            EndpointHoverStyle : {fillStyle:"#ec9f2e" },            
            Anchors :  [ "BottomCenter", "TopCenter" ]
        });

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

        jsPlumb.bind("click", function(c) {
                var p = $(c.canvas).find("path"),
                    l = p[0].getTotalLength(),
                    i = l, d = -10, s = 10,
                    att = function(a, v) {
                        for (var i = 0; i < p.length; i++)
                            p[i].setAttribute(a, v);
                    },
                    tick = function() {
                        if (i > 0) {
                            i += d;
                            att("stroke-dashoffset", i);
                            window.setTimeout(tick, s);
                        }
                    };
                att("stroke-dasharray", l + " " + l);
                tick();

            });

});

要点はjsPlumb.bind("click", function(c) { } ) ;。この関数は、マウスがパス上でクリックされたときにトリガーされます。そして、それTotalLengthはp[i].setAttribute(a, v);

また、動作を確認するための codepen リンクがHEREにあります。

于 2013-10-02T10:53:39.580 に答える