Question

所以我有一堆对叠加绝对的div。用户通过拖动叠加层来创建方形div。如果你要创建一个div然后放大和缩小，div就会保持在同一个位置，因为它对于叠加是绝对的，如前所述。

然而，这就是问题所在。您可以将div位置（顶部，左侧，高度，宽度）保存到.json并加载.json以显示以前保存的所有div。这样可以正常工作....如果你保存并加载相同的浏览器缩放百分比。

例如，如果要以150％缩放比例绘制div，并尝试在100％缩放时加载div的位置，则会改变位置（以弥补我设想的缩放）。

我尝试在保存时强制窗口缩放到100％，但这不起作用，我现在有点卡住了。有没有人有任何建议？

Answer 1

按照Alex的建议使用百分比，我能够提出一个完美的解决方案。

在设置div的顶部和左侧的方法中 - 我将相对于父级的像素更改为相对于父级的百分比。

所以这个

{
   width = endX - startX;
   left = startX;

   height = endY - startY;
   top = startY;
}

成为这个

{
    width = endX - startX;
    var percentageLeft = startX / parent.offsetWidth * 100;
    left = percentageLeft;

    height = endY - startY;
    var percentageTop = startY / parent.offsetHeight * 100;
    top = percentageTop;
}

然后通过更改保存/加载来查找百分比而不是像素，我能够完成这项工作！

保存和加载div位置 - 缩放和保存会在加载时更改div位置

1 个答案: