jsPlumb在调用setPaintStyle()时删除直接连接
我正在使用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 )。
但是,如果connect()
方法中的connect()
connector
选项更改为“直线” ,则垂直连接线( 它们的端点彼此相交)在我单击时会消失。 其余的直线没有直接相互交叉的直线点没有这个问题。
完全删除连接器选项,或将其值设置为“Bezier”,或者在选项设置为“Straight”时不调用setPaintStyle()
方法,然后单击的行保持原样。
这是一个jsBin示例: jsPlumb setPaintStyle()与直线bug
最初我认为这是我的应用程序中的一个错误,但在花了很多时间之后我将问题跟踪到setPaintStyle()方法。 我非常有信心这是一个jsPlumb错误,但我并不完全确定。 在这一点上非常令人沮丧,因为唯一能阻止我提供项目的是能够将笔触颜色更改为红色。 如果我能用直线完成这个简单的任务,那么我可以前进。
我已经考虑过自己定位SVG路径节点并改变这种方式的笔触颜色,但由于jsPlumb使用VML for IE8( ie8是这个项目的要求 ),我不确定我能做到这一点。 有什么建议?
对于那些可能遇到这个令人沮丧的jsPlumb错误的人。 在我整个星期六都在寻找修复之后,我终于找到了解决方法。
我实际上使用了getPaintStyle()
和repaint()
方法的组合,而不是使用setPaintStyle()
方法来改变笔触颜色。 这是一个固定的jsBin示例: http ://jsbin.com/ogekot/7/edit
jsPlumb.bind('click', function (connection, e) { e.preventDefault(); connection.getPaintStyle().strokeStyle = '#CE322A'; connection.repaint() });