簡単な本 jsPlumb の使用法

javascriptこのコラムでは jsPlumb の役割を紹介します

推奨 (無料): javascript (ビデオ)

1. jsPlumb の役割:
は dom 間の接続を描画するために使用されます要素 接続するために開始点の ID と終了点の ID を必要とするフレームワーク。接続エンドポイントの場所、接続のスタイル、切断などをプロパティを通じて設定できます

---

2. jsPlumb
をインストールします(1) jsPlumb の依存関係をインストールします:

npm i jsplumb

(2) main.js にマウントします:

import jsPlumb from 'jsplumb'
Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

---

3. vue プロジェクトに適用します (react も同様)
( 1) jsPlumbを参照して親コンテナを設定します
接続状態の変更(切断、実線から点線、接続domの変更など)が必要ない場合は、接続メソッドの直前に追加するだけです

var jsPlumbs = jsPlumb.getInstance(); （引入实例）
jsPlumbs.setContainer("#boxParent"); （设置父级容器）

接続ステータスを手動で頻繁に変更する必要がある場合は、マウントされた

this.$nextTick(() => {
  var jsPlumbs = jsPlumb.getInstance();
  jsPlumbs.setContainer("#boxParent");
  this.jsPlumbs = jsPlumbs;
});

に記述することをお勧めします。 注:

1. 親の場合jsPlumb 要素が設定されていない場合、接続はグローバルに配置され、接続位置にずれが発生します
2. jsPlumb の参照方法を <script> タグ内に直接記述するとルータを切り替えると問題が発生します接続が表示されないことを確認します </script>

(2) 接続位置がずれるのを防ぐには、親コンテナ(#boxParentを設定したレイヤー)のcss属性を設定する必要があります:

position: relative;

コンテンツを接続するための特定のアプリケーション jsPlumb の css 属性を設定します。

position: absolute;

(3 ) 特定の接続方法

   jsPlumbs.ready(function() {
        jsPlumbs.connect({
            source: '开始id',
            target: '结束id',
            anchor: [Right, Left],
            endpoint: ["Dot"],
            connector: ["Bezier", { curviness: '150' }],
            paintStyle: {
                    stroke: "#9254DE",
                    strokeWidth: 1.5,
                    dashstyle: '3',
                  },
            endpointStyle: {
                    fill: "#120e3a",
                    outlineStroke: "#120e3a",
                    outlineWidth: 0,
                  },
        });
   })

注意事項

1. jsPlumbs.connect: 複数の線を接続するために周期的に呼び出すことができる特定の接続メソッド
2. ソースとターゲット: 接続する 2 つのノードによって設定される ID
3. アンカー接続線の終点の位置: 左Right Top Bottom Center TopRight TopLeft BottomRight BottomLeft
4. エンドポイント設定エンドポイント タイプ: ドット、長方形、イメージ、空白
5. コネクタ接続タイプ: ベジェ曲線 (ラジアンは { curviness: '150' で設定可能) }、デフォルトは 150)、直線、フローチャート フローチャート、ステート マシン state machine
6.paintStyle: 接続線のスタイルを設定し、ストローク幅は太さを設定し、ダッシュスタイルは破線かどうかを制御します
7.endpointStyle: エンドポイントのスタイルを設定します

(4) 接続をクリアします (以前の有線をすべてクリアするために使用します)

jsPlumbs.reset();

以上が簡単な本 jsPlumb の使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。