Programmatic connection in jsplumb

问题

How can I recreate/redraw a connection in jsplumb that has two different image endpoints?

For example:

  instance.connect({source:"source", target:"target", anchors:["Bottom", "Top"], 
endpoint:[ "Image" , {url:"nameofpicture.jpg"} ], connector: "Flowchart"});

this works for one image(the image is the same on the source and target element)

instance.connect({source:"source", target:"target", anchors:["Bottom", "Top"], 
endpoints:["Dot","Rectangle"], connector: "Flowchart"});

this works and connects two elements with different endpoints (not of the same scope)

instance.connect({source:"source", target:"target", anchors:["Bottom", "Top"],
 endpoints:["Image",{url:"nameofpicture1.jpg"},"Image", {url:"nameofpicture2.jpg"}], connector: "Flowchart"});

so the conclusion would be that something like this would work, but it doesn't..

Is there a way to access the source's and target's Image endpoint (parameter) url? Maybe something like this: connectionname.endpoints[0].endpoint.type('url')??

回答1:

Try it like this:

endpoints: [ ['Image', {src:'nameofpicture1.png'}], ['Image', {src:'nameofpicture2.png'}] ]

来源：https://stackoverflow.com/questions/23638137/programmatic-connection-in-jsplumb