Question

我正在使用jsPlumb进行中型项目。虽然文档在可靠的解释方面很小，但我已经设法完成了项目，现在我已准备好提供它。

在交付日期之前，我被要求将连接线笔直而不是弯曲。我认为这就像在jsPlumb connect方法中添加关键字一样简单，例如：jsPlumb.connect({ connector: 'Straight'... }) ......就是这样。那有什么问题？

我正在研究的这个项目必须允许用户“选择”连接线，然后按“删除”按钮清除他们选择的连接。我允许用户通过调用jsPlumb的setPaintStyle()方法来选择连接，如下所示：

// Select/Deselect each connection on click
jsPlumb.bind('click', function (connection, e) {
   e.preventDefault();

   connection.setPaintStyle({ 
      strokeStyle: 'red'
   });
});

仅当线条弯曲时才能正常工作（ jsPlumb default ）。

但是，如果connector方法中的connect()选项更改为“直线”，则垂直连接线（其终点位于来自彼此）当我点击它们时就会消失。其余没有直接相交的直线的直线没有这个问题。

完全删除连接器选项，或将其值设置为“Bezier”，或者当选项设置为“Straight”时不调用setPaintStyle()方法，然后单击的行保持原样，就像应该做的那样

这是一个jsBin示例：jsPlumb setPaintStyle() with Straight lines bug

最初我认为这是我的应用程序中的一个错误，但在花了很多时间之后我将问题跟踪到setPaintStyle（）方法。我非常有信心这是一个jsPlumb错误，但我并不完全确定。在这一点上非常令人沮丧，因为唯一能阻止我提供项目的是能够将笔触颜色更改为红色。如果我能用直线完成这个简单的任务，那么我就可以前进了。

我已经考虑过自己定位SVG路径节点并以这种方式更改笔触颜色，但由于jsPlumb使用VML进行IE8（ ie8是此项目的要求），我不确定我能做到这一点。有什么建议吗？

Answer 1

对于那些可能遇到这个令人沮丧的jsPlumb错误的人。在我整个星期六都在寻找修复之后，我终于找到了解决方法。

我实际上使用了setPaintStyle()和getPaintStyle()方法的组合，而不是使用repaint()方法来更改笔触颜色。这是一个固定的jsBin示例：http://jsbin.com/ogekot/7/edit

jsPlumb.bind('click', function (connection, e) {
   e.preventDefault();

   connection.getPaintStyle().strokeStyle = '#CE322A';
   connection.repaint()
});

调用setPaintStyle（）时jsPlumb删除直接连接

1 个答案: