jquery - 动态创建时，连接器样式未应用于 jsPlumb 连接器

Question

更新 - 1

这里是my JSFiddle 。

在此示例中。我已经在 DOM 加载上连接了前两个 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 }
                }
            );

我正在传递连接器样式。

查询 - 我想将源端点和目标端点显示为绿色和 Ping。现在它显示蓝色。

原创

我最近接手了其他开发人员未完成的开发项目。在项目中，我们需要能够在两个元素之间绘制连接器。为此，原始开发人员使用了 jsPlumb 。当我手动创建连接器时，该库工作正常并产生结果。但现在我想做的是动态创建一个连接器。阅读 jsPlumb 的 documentation我尝试这样做，但没有产生我想要的结果。

这就是我手动创建时的情况(注意目标元素处的颜色和箭头)

但是如果我自动创建它，我就不会得到这个颜色和箭头。这是fiddle我为测试而创建的。我正在做的是调用 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"
        }]
    ]
});

谁能指出错误在哪里吗？

问候

杰汉泽布·马利克

Answer 1

由于 jsPlumb 文档恕我直言是一团糟，我有点惊讶这种问题在 stackoverflow 中并没有更频繁地出现。这是错误的地方:

paintStyle.fillStyle 似乎不再存在了...没有演示使用它，但只要在连接调用中定义paintStyle，文档仍然会引用它。很奇怪，但是中风样式完美地完成了这项工作。

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

除此之外，我建议(即使您更改该行，一切都会正常)是在 jsPlumb.ready 上调用 jsPlumb

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

查看更新后的 fiddle :http://jsfiddle.net/p42Zr/5/

编辑:

问题在加载页面和我的回答之间发生了变化，我没有注意到。到目前为止，答案都涉及原始内容。

另一个 fiddle 的问题有点不同，发生的情况是 jsPlumb 在已经定义的端点之上创建新的端点。有两种方法可以改变这种情况。从 var myendpoint = jsPlumb.addEndpoint( ... ) 检索端点并稍后使用此变量来连接它们。在这种情况下，更简单的方法是添加 endpoint: ["Blank"]到选项。 (编辑)将端点样式设置为“空白”意味着不会绘制端点，这会导致连接和之前定义的两个端点如所希望的(/编辑) 。请参阅更新的 fiddle :http://jsfiddle.net/XbcZv/1/

编辑回答评论中提出的问题:如何在连接上显示指针光标？

只需添加:

._jsPlumb_connector {
    cursor: pointer;
}

/编辑到你的CSS。对于端点上的 css 更改，编辑 css 类 _jsPlumb_endpoint。