如何缩放jsPlumb图

Question

我正在尝试在滚动时提供缩放功能。我有一个#mainDiv，里面有多个.foo 表，里面有jsPlumb 端点。当用户滚动时，#mainDiv 应该保持相同的大小并且表格应该调整大小，这实际上会发生，但是表格的端点不会改变它们的大小和位置。看看这个 jsFiddle：

https://jsfiddle.net/vaxobasilidze/cg3hkde7/9/

Fiddle 很大，但我们只需要第一个 javascript 函数。将一些项目拖到右侧，添加新链接并滚动。表会改变大小，但端点保持不变。如何解决端点问题？

端点不是这些表的一部分，但它们是 jsPlumb 库的一部分，它的对象具有 setZoom() 函数。这个功能不起作用，我想知道为什么。连接器也应该改变它们的位置。

此外，应用还必须在触控设备上运行。 setZoom 是否适用于触摸设备的捏缩放，我该如何实现？

Answer 1

更新：

因此，根据问题，我们可以使用下面的 CSS 来根据父容器中的元素位置从左侧或右侧开始缩放。

需要在父容器中更改 CSS，如下所示

#mainDiv {
  display: inline-block;
  width: 82%;
  min-height: 100%;
  box-sizing: border-box;
  float: left;
  position:relative;
  margin: 0;
  padding: 3px;
}

请查看 JSFiddle 以获得解决方案！

JSFiddle Demo

旧答案：

我假设发生在中心的缩放是问题所在，因为我们从中间缩放表格总是超出容器边界。我建议添加以下 CSS 类，以便保留端点。

.elementTable{
  transform-origin: 0% 0%;
}

请在下面找到一个带有实现的工作 JSFiddle。

JSFiddle Demo

我的假设可能是错误的，请解释它缺少什么，我会尝试解决它！