javascript – 如何缩放jsPlumb图

发布时间：2020-12-14 22:40:15 所属栏目：资源来源：网络整理

导读：我正在尝试使用滚动缩放.我有一个#mainDiv,其中有多个.foo表,里面有jsPlumb端点.当用户滚动时,#mainDiv应该保持相同的大小,并且表应该调整大小,这实际上会发生,但是表的端点不会改变它们的大小和位置.看看这个jsFiddle： https://jsfiddle.net/vaxobasilidze

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

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

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

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

此外,应用程序也必须在触摸设备上工作. setZoom是否适用于触控设备的捏拉缩放,我该如何实现？

最佳答案

更新：

因此,基于这个问题,我们可以使用下面的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

我的假设可能是错的,请解释它的缺失,我会尽力解决它！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!