javascript – 如何缩放jsPlumb图

前端之家收集整理的这篇文章主要介绍了javascript – 如何缩放jsPlumb图前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我正在尝试使用滚动缩放.我有一个#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

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

猜你在找的HTML相关文章