Question

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

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

小提琴非常大，但我们只需要第一个javascript函数。将几个项目拖到右侧，添加新链接并滚动。表将改变大小，但端点保持不变。如何使用端点修复此问题？

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

此外，app也必须在触摸设备上工作。 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

我的假设可能是错的，请解释它遗失的内容，我会尽力解决它！

如何缩放jsPlumb图

1 个答案: