jsPlumb在调用setPaintStyle（）时删除直接连接， [英] jsPlumb removes Straight connection when calling setPaintStyle()

问题描述

我使用jsPlumb作为中型项目。虽然文档在实体解释方面比较薄弱，但我已经设法完成了该项目，现在我已准备好提供它。

I am using jsPlumb for a medium size project. Although the documentation is slim in terms of solid explanations, I've managed to complete the project and now I'm ready to deliver it.

在交货日期之前，我被要求使连接线条直线而不是弯曲。我认为这将像添加一个关键字到jsPlumb连接方法像： jsPlumb.connect（{connector：'Straight'...}） ...和它是。那么问题是什么？

Right before deliver date I've been asked to make the connection lines straight instead of curved. I thought this would be as easy as adding a keyword to the jsPlumb connect method like: jsPlumb.connect({ connector: 'Straight'... })... and it is. So what's the problem?

这个项目我正在努力允许用户选择连接线，这样他们可以按删除按钮清除他们选择的连接。我允许用户通过调用jsPlumb的 setPaintStyle（）方法来选择连接：

This project I'm working on has to allow users to "select" the connection lines so they can then press a "Remove" button to clear the connection they selected. I've allowed users to select a connection by calling jsPlumb's setPaintStyle() method like so:

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

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

只有当曲线弯曲时，才能如预期的那样工作（ jsPlumb默认） 。

This works as expected only when the lines are curved (jsPlumb default).

但是，如果 connect（）连接器 c>方法更改为直接，则当我点击它们时，垂直的连接线（它们的端点彼此相对）就会消失。

However, if the connector option in the connect() method is changed to "Straight", connection lines that are vertical (their end-points are across from each other) simply disappear when I click on them. The rest of the straight lines that don't have their end-points directly across from each other do not have this issue.

完全删除连接器选项，或者设置其连接器选项值改为Bezier，或者当该选项设置为Straight时，不调用 setPaintStyle（）方法，则单击的行保持原样。

Removing the connector option altogether, or setting its value to "Bezier", or not calling the setPaintStyle() method when the option is set to "Straight", then the clicked line stays in place like is supposed to do.

以下是一个jsBin示例： jsPlumb setPaintStyle（）与直线缺陷

Here is a jsBin example: jsPlumb setPaintStyle() with Straight lines bug

最初我认为这是我的应用程序中的一个错误，但在花了一段时间后，我已经跟踪问题到setPaintStyle（）方法。我觉得很自信这是一个jsPlumb bug，但我不完全确定。这是非常令人沮丧的，因为我唯一阻止我交付项目的东西是能够将笔画颜色更改为红色。如果我可以用直线完成这个简单的任务，那么我可以向前移动。

Initially I thought this was a bug in my application, but after spending a ton of time I've tracked the issue down to the setPaintStyle() method. I feel pretty confident that this is a jsPlumb bug, but I'm not totally sure. It is very frustrating at this point because the only thing that holds me back from delivering the project is the ability to change the stroke color to red. If I can complete this simple task with straight lines, then I can move forward.

我考虑自己定位SVG路径节点，改变笔画颜色，但由于jsPlumb使用VML for IE8（ ie8是此项目的要求），我不知道我可以这样做。任何建议？

I've considered to target the SVG path node myself and change the stroke color that way, but since jsPlumb uses VML for IE8 (ie8 is a requirement for this project), I am not sure that I can do that. Any suggestions?

推荐答案

对于其他人可能会遇到这个令人沮丧的jsPlumb错误。花了我整个星期六寻找一个修复，终于我找到了一个办法。

For others out there that might come across this frustrating jsPlumb bug. After spending my whole Saturday looking for a fix, finally I found a way around this.

我没有使用 setPaintStyle（）方法来更改笔触颜色， getPaintStyle（）和 repaint（）方法。以下是固定的jsBin示例： http://jsbin.com/ogekot/7/edit

Instead of using the setPaintStyle() method to change the stroke-color, I actually used a combination of the getPaintStyle() and repaint() methods. Here is a fixed jsBin example: http://jsbin.com/ogekot/7/edit

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

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

这篇关于jsPlumb在调用setPaintStyle（）时删除直接连接，的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！