javascript - 如何缩放 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

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