3

以下の作業コードを参照してください。誰かが2つのdivを結ぶ線の不透明度を設定する方法を教えてもらえますか？これに関するドキュメントには何も見つかりませんでした。を渡してsetOpacity: 0.5、のプロパティとしてopacity: 0.5使用してみました。それはどれも役に立たなかった。strokeStyle: rgba(120, 120, 240, 0.4)paintStyle

ご協力いただきありがとうございます。

コード

<!DOCTYPE html>
<html>
<head>
    <title>jsplumb example</title>
    <style type="text/css">
        .nodes {
            border: 2px solid steelblue;
            width: 200px;
            height: 100px;
        }
        .div1 {
            position: relative;
            top: 10%;
            left: 10%;
        }
        .div2 {
            position: relative;
            top: 20%;
            left: 40%;
        }
    </style>
</head>
<body>
    <div class='containerdiv'>
        <div class="nodes div1" id="inner1">Inner 1</div>
        <div class="nodes div2" id="inner2">Inner 2</div>
    </div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script type="text/javascript" src="./jquery.jsPlumb-1.3.16-all-min.js"></script>

<script type="text/javascript">
    jsPlumb.bind("ready", function() {
        jsPlumb.connect({
            source:"inner1", target:"inner2",
            paintStyle: {strokeStyle: 'rgb(120,120,240)', lineWidth: 6}
        });
        jsPlumb.draggable('inner1');
        jsPlumb.draggable('inner2');
    });                     

</script>
</body>

</html>
4

1 に答える 1

4

2つのオプションがあります。最初のオプション（私は機能しませんでした）は、connectorClassプロパティを使用して、クラス名またはクラス名の空白で区切られたリストをコネクタ要素に割り当てます。しかし、前述のように、これはうまくいかなかったようです（または、時間があれば、間違ってやっていた可能性があります）。

一方、コネクタを含むsvg要素には予測可能なクラス名がある場合、CSSを使用してその要素を直接スタイル設定できます。

._jsPlumb_connector  {
    opacity: 0.5; /* or whatever... */
}

JSフィドルデモ。

于 2013-01-28T02:52:31.320 に答える