jquery - 2 つのラファエル オブジェクトの間にドラッグで線を引く

Question

2 つの Raphael オブジェクト間に接続線を引こうとしましたが、できません。

jsPlumb を試してみましたが、 div タグでしか機能しません。ラファエル長方形オブジェクトにエンドポイントを描画したい。私はすでにこれを試しました。

Raphael オブジェクトで jsplumb を使用した以下のコード:

$("#btnAI, #btnDI").live("click", function() {

        if(this.id == "btnAI")
            text = "AI";
        else
            text = "DI";

        var Execount = "#" + (++ecount);
        var SetAI = paper.set().draggable.enable();
        // create a set to store AI

        var outerRect = getRectangle(paper, 30, 40, 120, 120, "white", "Gray", 5);
        // outer Rectangle
        SetAI.push(outerRect);

        var InnerRect = getRectangle(paper, 40, 50, 100, 100, "#5a5a5a", "Gray", 5);
        // inner Rectangle
        SetAI.push(InnerRect);

        SetAI.push(GetText(paper, 90, 70, text + uniqueId("AI")));
        // text to display which contact

        SetAI.push(GetText(paper, 110, 130, Execount));
        // text for unique id

        SetAI.push(GetLine(paper, 40, 80, 100, 0));
        //upper line

        SetAI.push(GetLine(paper, 40, 120, 100, 0));
        //lower line

        SetAI.push(getRectangle(paper, 99, 90, 41, 20, null, "#FFF", 0));
        //rect to display o/p value

        SetAI.push(getRectangle(paper, 40, 85, 48, 30, null, "#FFF", 0));
        //rect to display o/p value

        jsPlumb.setMouseEventsEnabled(true);
                jsPlumb.setRenderMode();
                jsPlumb.Defaults.Container = 'canvasdiv';
                jsPlumb.Defaults.Overlays = [["Arrow", {
                            location : 0.9
                        }], ["Label", {
                            location : 0.1,
                            label : function(label) {
                                return label.connection.labelText || "";
                            },
                            cssClass : "aLabel"
                        }]];
                outerRect.node.setAttribute("class","jsclass");
                var sourceEndpoint = {
                        endpoint : "Rectangle",
                        paintStyle : {
                            fillStyle : "red",
                            width:20,
                            height:15
                        },
                        isSource : true,
                        connector : ["Flowchart", {
                            stub : 40
                        }],
                        connectorStyle : {
                        lineWidth : 3,
                        joinstyle : "round",
                        strokeStyle :"Green",
                    },
                        connectorHoverStyle :{
                        lineWidth : 3,
                        strokeStyle : "#2e2aF8"
                    },
                        dropOptions : {
                            hoverClass : "hover",
                            activeClass : "active",
                            zIndex:1000
                        },
                }

                var targetEndpoint = {
                        endpoint : "Rectangle",
                        paintStyle : {
                            fillStyle : "green",
                            width:20,
                            height:15
                        },
                        isTarget : true,
                        connector : ["Flowchart", {
                            stub : 40
                        }],
                        connectorStyle : {
                        strokeStyle : "#FF3333",
                        lineWidth : 2
                    },
                    dropOptions : {
                            hoverClass : "hover",
                            activeClass : "active"
                        },
                }

                jsPlumb.addEndpoint(outerRect.node, {anchor : "BottomCenter"}, sourceEndpoint);
                //jsPlumb.addEndpoint(outerRect.node, {anchor : "RightMiddle"}, targetEndpoint);
                jsPlumb.draggable($(".jsclass"));

これを手伝ってください。

Answer 1

優れた jQuery 線描画プログラムはjsPlumbです。