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

Question

更新 - 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"
        }]
    ]
});

任何人都可以指出错误在哪里？

问候

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.