无法将图片设置为jsPlumb端点 [英] Can't set image to jsPlumb endpoint

问题描述

我在项目中使用jsPlumb库，并且具有一个可以更改端点映像(如果已连接)的函数.我在页面加载时调用它，并且一切正常，但是当我在连接事件上调用它时，什么也没有发生.这是我的代码:

I'm using jsPlumb library in my project and I have a function that changes endpoint images if they are connected. I call it when the page loads and everything works fine, but when I call it on connection event, nothing happens. Here is my code:

function changeEndpointImage(){
            var elem = $('.tableBody');   //These are my connectable elements
            for(var i=0;i<elem.length;i++)
            {
                 var eps=jsPlumb.getEndpoints($(elem[i]));  //Getting endpoints for each of the connectable elements
                 for(var j=0;j<eps.length;j++)
                 {
                      if(eps[j].connections.length!=0)  //Checking if any of them have connections
                           eps[j].setImage("images/styled_radiobutton.png");  //Setting another image
                 }
            }
        }
jsPlumb.bind("connection", function(connection) {
     changeEndpointImage();

     //I have also tried this method commented below, but nothing.
     //connection.sourceEndpoint.setImage("images/styled_radiobutton.png");
     //connection.targetEndpoint.setImage("images/styled_radiobutton.png");

});

如果连接已断开，我还试图将端点图像恢复为第一眼外观，但是在这种情况下，只有源端点被更改，目标保持不变:

I'm also trying to change endpoint images back to the first look if the connection is detached, but in this case, only the source endpoint gets changed, target remains the same:

jsPlumb.bind("connectionDetached", function(connection) {
    connection.targetEndpoint.setImage("images/rsz_styled_radiobutton.png");
    connection.sourceEndpoint.setImage("images/rsz_styled_radiobutton.png");
});

我缺少什么或如何解决此问题?

What am I missing or how can I fix this problem?

这是jsfiddle:

Here is jsfiddle:

https://jsfiddle.net/vaxobasilidze/cg3hkde7/

将一些项目拖到右侧的div，按添加新链接"，然后尝试附加分离的连接.您将看到端点不变.

Drag few items to the right div, press "Add new link" and try to attach detach connections. You will see that endpoints don't change.

推荐答案

我在jsPlumb Google组中找到了解决方案.我已经设置了端点Blank而不是Image，添加了cssClass: 'myClass'属性，然后设置了样式.myClass { background: url(...) }.这可以满足我的要求，因为连接的端点获得了附加的类'jsplumb-endpoint-connected'，并且我可以将其他图像设置为该类的背景.

I found a solution to this in jsPlumb google group. I have set endpoint Blank instead of Image, added cssClass: 'myClass' property and then styled .myClass { background: url(...) }. This does what I wanted, because connected endpoints get additional class 'jsplumb-endpoint-connected' and I can set another image as a background to this class.

这篇关于无法将图片设置为jsPlumb端点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！