3

我正在将 jsPlumb 用于中型项目。尽管文档在可靠的解释方面很薄弱，但我已经成功完成了该项目，现在我已准备好交付它。

就在交货日期之前，我被要求将连接线笔直而不是弯曲。我认为这就像在 jsPlumb 连接方法中添加一个关键字一样简单，例如：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 默认）时，这才按预期工作。

但是，如果方法中的connector选项connect()更改为"Straight"，当我单击它们时，垂直的连接线（它们的端点相互交叉）就会消失。其他没有直接相互交叉端点的直线没有这个问题。

删除连接器选项，或将其值设置为“bezier”，或者setPaintStyle()在选项设置为“直”时调用该方法，然后点击的行保持在适当位置。

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

最初我认为这是我的应用程序中的一个错误，但在花费大量时间后，我将问题追溯到 setPaintStyle() 方法。我很有信心这是一个 jsPlumb 错误，但我并不完全确定。在这一点上非常令人沮丧，因为唯一阻止我交付项目的是将笔触颜色更改为红色的能力。如果我能用直线完成这个简单的任务，那么我就可以继续前进。

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

4

1 回答 1

2

对于其他可能遇到这个令人沮丧的 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()
});
于 2013-03-16T22:13:55.493 回答