6

アップデート - 1

これが私の JSFiddleです。

この例では。DOM ロード時に最初の 2 つの div を接続しました。

このコード行で

JSPlumb

jsPlumb.connect
            (
                {
                    source: 'A',
                    target: 'B',
                    anchors: ["RightMiddle", "LeftMiddle"],
                    paintStyle: { strokeStyle: "#ff9696", lineWidth: 8 },
                    connector: ["Flowchart", { curviness: 63}],
                    connectorStyle: [{
                        lineWidth: 3,
                        strokeStyle: "#5b9ada"
                    }],
                    hoverPaintStyle: { strokeStyle: "#2e2aF8", lineWidth: 8 }
                }
            );

コネクタ スタイルを渡しています。

クエリ- ソース エンドポイントとターゲット エンドポイントを Green および Ping として表示したい。現在、青く表示されています。





オリジナル

私は最近、他の開発者が未完成のままにしていた開発を引き継ぎました。プロジェクトでは、2 つの要素間のコネクタを描画できる必要があります。そのために、元の開発者はjsPlumbを使用しました。コネクタを手動で作成すると、ライブラリは正常に動作し、結果が生成されます。しかし、今私がやりたいことは、コネクタを動的に作成することです。jsPlumb のドキュメントを読んで試してみましたが、必要な結果が得られません。

これは、手動で作成したときの様子です（ターゲット要素の色と矢印に注意してください） ここに画像の説明を入力

しかし、自動的に作成すると、この色と矢印が得られません。これは、テスト用に作成したフィドルです。私がやっていることはjsPlumb.connect();、パラメーターを呼び出して渡すことです。

jsPlumb.connect({
    source: "page-1",
    target: "page-2",
    anchors: [
        [1.06, 0.5, 0, 1],
        [-0.06, 0.5, 0, 0]
    ],
    endpoint: ["Dot", {
        radius: 4
    }],
    endpointStyle: {
        fillStyle: "#5b9ada"
    },
    setDragAllowedWhenFull: true,
    paintStyle: {
        fillStyle: "#5b9ada",
        lineWidth: 5
    },
    connector: ["Straight"],
    connectorStyle: [{
        lineWidth: 3,
        strokeStyle: "#5b9ada"
    }],
    connectorOverlays: [
        ["Arrow", {
            width: 10,
            length: 10,
            foldback: 1,
            location: 1,
            id: "arrow"
        }]
    ]
});

誰が間違いを指摘できますか？

よろしく

ジェハンゼブ・マリク

4

2 に答える 2

13

jsPlumbのドキュメントはめちゃくちゃなので、この種の質問がstackoverflow内で頻繁に出てこないことにちょっと驚いています。これが間違っていたものです：

paintStyle.fillStyleはもう存在しないようです...どのデモもそれを使用していませんが、connect-call内でpaintStyleが定義されている場合は常に、ドキュメントで参照されています。奇妙ですが、strokeStyleは完璧に機能します。

    paintStyle: {
        strokeStyle: "#5b9ada",
        lineWidth: 3
    },

それを超えて私が提案するのは（その行を変更しても、すべてが機能する）、jsPlumb.readyでjsPlumbを呼び出すことです。

    jsPlumb.bind("ready", function() { // your connection code here... });

更新されたフィドルを参照してください：http：//jsfiddle.net/p42Zr/5/

編集：

ページの読み込みと回答の間に質問が変更されましたが、気づきませんでした。ここまでの答えはオリジナルを扱っています。

他のフィドルの問題は少し異なります。何が起こるかというと、jsPlumbはすでに定義されているエンドポイントの上に新しいエンドポイントを作成します。これを変更するには2つの方法があります。からエンドポイントを取得し、var myendpoint = jsPlumb.addEndpoint( ... )後でこの変数を使用してそれらを接続します。ただし、この場合の簡単な方法はendpoint: ["Blank"]、オプションに追加することです。（編集） endpoint-Styleを "Blank"に設定すると、エンドポイントが描画されなくなり、接続と、以前に定義された2つのエンドポイントが必要に応じて作成されます（/ EDIT）。更新されたフィドルを参照してください：http：//jsfiddle.net/XbcZv/1/

編集 コメントで出てきた質問に答えるには：接続にポインタカーソルを表示するにはどうすればよいですか？

単に追加します：

._jsPlumb_connector {
    cursor: pointer;
}

/あなたのCSSに編集します。エンドポイントでのcssの変更については、cssクラス_jsPlumb_endpointを編集します。

于 2013-02-26T10:38:08.587 に答える
1

エンドポイントのスタイルを設定すると、問題が解決する場合があります。

エンドポイントの connectorStyle は最優先事項です。したがって、エンドポイントの connectorStyle を設定した場合、コネクタの paintstyle は機能しません。

jsplumb の、connector.js 内のセット ペイント スタイルのソース コード:

        this.setPaintStyle(this.endpoints[0].connectorStyle || 
                       this.endpoints[1].connectorStyle || 
                       params.paintStyle || 
                       _jsPlumb.Defaults.PaintStyle || 
                       jsPlumb.Defaults.PaintStyle, true);
于 2014-02-25T06:16:33.077 に答える