我正在尝试使用滚动缩放.我有一个#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
我的假设可能是错的,请解释它的缺失,我会尽力解决它!