Question

更新 - 1

在这个例子中。我已经在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。现在它显示蓝色。

原始

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

这是我手动创建时的注意事项（注意目标元素的颜色和箭头） enter image description here

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

有谁可以指出错误在哪里？

此致

Jehanzeb Malik

Answer 1

由于jsPlumb文档很乱，我很惊讶这种问题在stackoverflow中不会更频繁出现。这就是错误：

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

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

除此之外我会建议（即使你改变那一行，一切都会奏效）是在jsPlumb.ready上调用jsPlumb

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

请参阅更新的小提琴：http://jsfiddle.net/p42Zr/5/

编辑：

加载页面和我的答案之间的问题已经改变，我没有注意到。直到这里的答案处理起初。

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

修改要回答评论中提出的问题：如何在连接上显示指针光标？

只需添加：

._jsPlumb_connector { cursor: pointer; }

<强> /修改 对你的CSS。对于端点上的css更改，请编辑css类_jsPlumb_endpoint。

Answer 2

设置端点的样式可以解决问题。

Endpoint的connectorStyle是首要任务。因此，如果您设置了endpoint的connectorStyle，那么连接器的paintstyle将不起作用。

jsplumb在connector.js中设置绘画风格源代码：

        this.setPaintStyle(this.endpoints[0].connectorStyle || 
                       this.endpoints[1].connectorStyle || 
                       params.paintStyle || 
                       _jsPlumb.Defaults.PaintStyle || 
                       jsPlumb.Defaults.PaintStyle, true);

连接器样式在动态创建时未应用于jsPlumb连接器

2 个答案: