问题标签 [jsplumb]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
14071 浏览

javascript - jsPlumb - 每侧的动态端点锚点

我正在尝试找出一种如何将端点锚动态添加到 jsPlumb 容器的方法。

我希望源端点位于左侧,目标端点仅位于右侧。

问题是,我无法找到任何方法来做到这一点,而无需求助于一些黑客,就像我现在正在做的那样。

jsPlumb 支持连续锚点,但单个锚点的位置将根据连接器之间的方向和连续锚点的数量重新计算。这意味着源端点和目标端点都可以共享容器的同一侧,这是我想避免的。

这是我想出的 jsFiddler 代码

这是我自己用来破解和重新计算锚点位置的代码的一部分(单击“添加”按钮时),结果有一些错误:(

预期结果

如上图所示,左侧只有源端点(Dot),右侧(Box)只有目标端点,一旦添加了新端点,就会根据一侧的锚点数量重新计算锚点。

这可行,但仍然有问题:只有在我移动容器并且容器之间的连接也不正确时才会更新位置。

我想要的是一种让它正确工作和连接项目的方法(最好使用正确的 jsPlumb 代码而不求助于黑客)

0 投票
2 回答
3024 浏览

jsplumb - jsPlumb:如何选择特定的连接器

我似乎无法弄清楚如何选择特定的 jsPlumb 连接器。我知道我可以选择与源或目标相关的所有连接器,但通常我会在同一个源和目标之间有多个连接器,因此在这种情况下我看不到能够选择特定连接器的方法。

我的具体用例如下:

如果用户单击连接器,他们会看到一个允许他们编辑连接的对话框。(即设置标签名称,删除连接)。现在,如果他们设置标签或删除连接,我将被迫分离图表中的所有内容,然后重新绘制所有内容。此方法有效,能够仅分离已修改的一个连接或仅更改其标签似乎更清洁。

想法?

0 投票
1 回答
4766 浏览

javascript - jsPlumb 使用单击而不是拖动来连接元素

我正在尝试使用jsPlumb将问题与测验中的答案联系起来。我有大部分工作期望我希望能够单击一个问题,然后单击一个答案,而不是从一个端点拖动到另一个端点。这是因为在触摸设备上拖动很乏味。这可能吗?

这是我的 jsbin 与拖动工作

这是我正在使用的 jquery。

0 投票
1 回答
1619 浏览

javascript - jsPlumb 在调用 setPaintStyle() 时删除了直接连接

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

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

我正在处理的这个项目必须允许用户“选择”连接线,这样他们就可以按下“删除”按钮来清除他们选择的连接。我允许用户通过调用 jsPlumb 的setPaintStyle()方法来选择连接,如下所示:

仅当线条弯曲(jsPlumb 默认)时,这才按预期工作。

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

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

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

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

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

0 投票
3 回答
3088 浏览

jquery - 加载 jQuery EasyUI 后 jsPlumb 不工作(jQueryUI 和 EasyUI 之间的冲突)

我遇到了 jsPlumb 和 jQuery EasyUI 的真正问题。

这里会发生什么。我有一个使用 EasyUI 的网站,我试图向它添加一些 jsPlumb 连接,但这些连接并没有像我希望的那样运行。

我只用 jsPlumb 准备了一些演示,它正在工作。但是当我将它添加到现有站点时,连接不起作用。

在调查了冲突在哪里之后,我得出了这个结论:

只要我不加载 EasyUI,jsPlumb 就可以工作。加载 EasyUI 后:

  • 我无法通过拖动源端点来创建新连接(我拖动端点但现在创建了新连接)
  • 端点不遵循它们所属的 div(当您用鼠标指向它们时,它们会正确定位它们)

我使用 jsFiddle 准备了 2 个演示来说明我的意思。唯一认为这两个示例不同的是 jquery.easyui 的外部资源

我该如何解决这个问题?也许你们中的一些人知道冲突在哪里。我的网站现在建议将 EasyUI 更改为其他任何东西,我真的很想使用 jsPlumb,因为我找不到任何像这样强大的工具包。


编辑:

正如建议的那样,我试图覆盖 draggable 并且它部分工作但不是我想要的那样。

部分原因是:

  • 端点不再可拖动 - 这很好,
  • 但是他们不会创建新的连接,这很糟糕。
  • 他们不遵循他们所附的窗口。

此外,现在我现在,EasyUI 覆盖了可拖动的 jQuery,这导致了这种奇怪的(对我而言)行为。可悲的是,我有强制可拖动方法成为原始 jQuery 方法的问题......所以我期待其他解决方案来解决我的问题


编辑:我删除了 EasyUI 中与可拖放覆盖相关的所有内容及其工作。现在的问题是如何在程序中而不是在easyui脚本中执行此操作,因为有人会更新到新版本并且一切都将停止工作......

0 投票
2 回答
7170 浏览

jquery - 使用jsPlumbs,在调整窗口大小时重绘线条?

我正在与 jsplumbs 做一件简单的事情。我只是用一条直线连接 div,那么在调整窗口大小时如何重绘线条?所以它总是跟随 div 的中心。我可以使用 z-index 将行放在 div 下方吗?如果我必须将一个 div 与其他几个 div 连接,那么从一个 div 中绘制多条线的最佳方法是什么?

到目前为止,这是我的代码:

http://jsbin.com/esuvuw/1/edit

谢谢你的帮助

0 投票
1 回答
961 浏览

javascript - 将嵌入式 svg 转换为图像或画布(目标是捕获有关所选 div 容器的屏幕)

对不起我的英语不好。

我想用 jsPlumb 绘制图表并导出捕获的图像。

Jsplumb 在 svg 中呈现如下:

我想将此转换为画布(我可以使用 html2canvas 将其转换为图像 - 我尝试这种方式:Google docs)或直接转换为图像。jsPlumb 在 html 而不是文件中生成 SVG,所以我不能使用svgeezy。我尝试使用canvg,但我不能(错误的文档)。

我需要一个客户端解决方案或更简单的服务器端解决方案。

jsPlumb 的示例代码:http: //jsfiddle.net/WRUra/3/您只需将 div1 连接到 div2 或 div3 容器,并在 svg 中呈现连接器元素。

问候, Zserrbo

0 投票
1 回答
1887 浏览

jquery - 在 jsPlumb 中使用“位置:相对”?

首先,我正在尝试(新手)jsPlumb。我似乎无法在 jsPlumb 文档中或通过谷歌搜索找到以下内容,现在我在兜圈子,所以必须是时候继续问了:基本上,我可以相对定位元素并让它们与 jsPlumb 一起使用吗?

例如,以下工作完美

但是如果我将框的“位置:绝对”更改为“位置:相对”,那么行为就会变得不稳定(特别是在将框拖到当前视图之外时)。jsPlumb 是否只需要绝对定位的元素?如果我希望我的元素初始化相对定位会发生什么?如果有人问过这个(某种)问题或者它在某个地方的文档中,我深表歉意 - 但我找不到它。

0 投票
1 回答
1145 浏览

jquery - jsPlumb 提高执行速度

我正在使用 jsPlumb 库来绘制(连接)一些 div。div 的数量是动态的,最多可以达到 2000 个 div。我正在使用以下递归方法来画线:

我的问题是,对于大于 100 的数字,加载时间非常长,并且有时谷歌浏览器会弹出一个关闭选项卡选项。我可以对我的方法进行任何改进还是 jsPlumb 这么慢?

0 投票
1 回答
230 浏览

javascript - 使用 jsPlumb 存储和检索坐标

我想使用 jsPlumb(带有 jquery)来创建一个家谱类型的程序。我希望节点是可拖动的,我知道 jsPlumb 可以为您做到这一点。但是,在节点被拖动并重新定位后,我想让用户能够保存他的更改并保存精确的布局。我需要获取每个元素的坐标并将它们存储在数据库中,然后使用该数据重新创建页面。我怎样才能以最有效的方式做到这一点?