6

更新 - 1

这是我的 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。现在它显示为蓝色。





原来的

我最近接手了一个被其他开发人员留下的未完成的开发项目。在项目中，我们需要能够在 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 似乎不再存在了......没有演示使用它，但是只要在连接调用中定义了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。

于 2013-02-26T10:38:08.587 回答
1

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

Endpoint 的 connectorStyle 是重中之重。因此，如果您设置了端点的连接器样式，那么您的连接器的绘制样式将不起作用。

connector.js中jsplumb的设置绘制样式源码：

        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 回答