将背景图像添加到jsPlumb中的连接器

Question

I'm wondering if it is possible to add a background image to a connector.

My objective is to create something like this:

This way I could have an animated images in the background symbolizing the direction and type of the connection.

Answer 1

AFAIK it is not possible since the connection is made up of SVG object which itself acts as background image. You can try dashstyle option while tweaking paint-style and gradients to obtain appropriate arrow as shown in image. For more refer: API DOC

Sample Code:

jsPlumb.Defaults.PaintStyle = {
    lineWidth: 4,
    strokeStyle: 'rgba(123, 123, 123, 1)',
    gradient:{
              stops:[[0,"green"], [1,"red"]]
        },
    dashstyle: "7"
};

Result:

Note : Remember to use jsPlumb.setRenderMode(jsPlumb.SVG) since dashstyle doesn't work with jsPlumb.CANVAS (by default it is SVG)