5

我正在制作用于缩放和平移图像的移动网络视图；使用 CSS 转换（缩放）进行缩放，使用 jQuery 的“offset()”函数进行平移。

我遇到的问题是，如果我在进行任何平移之前放大或缩小图像，图像会跳转到视图的左上角或右下角（分别）。初始跳转后，平移和缩放恢复正常工作。如果我在缩放之前平移，则不会发生任何问题。

据我所知，我已经将问题缩小到非常接近平移手势（touchmove）期间图像的偏移量发生变化的时间。我使用的事件监听器类似于：

function touchmoveListener(event) {
    // get current touch event coordinates
    var curX = event.X;
    var curY = event.Y;

    // pan image by changing offset
    var curOffset = $("#image").offset();
    var newOffset = {
        left: curOffset.left + (curX - lastX),
         top: curOffset.top  + (curY - lastY)
    };
    $("#image").offset(newOffset);

    // store coordinates for future panning
    lastX = curtX;
    lastY = curY;
}

我已经控制台记录了图像的原始偏移量、新计算的偏移量（分配之前），最后是分配后图像的新偏移量。当我遇到缩放然后平移问题（放大到 2.5 倍，平移到左侧）时，我得到如下输出：

original offset: {left: -215, top: -100}    // normal original location, okay!
computed offset: {left: -216, top: -100}    // pan 1px to the left, looks good!
assigned offset: {left: -441, top: -325}    // what the...? both off by 225px!

我真的不确定问题出在哪里，因为我正在记录传递给 offset() 函数的确切对象的坐标，但显然分配的坐标完全不同。有谁知道这里出了什么问题？任何输入将不胜感激。

笔记：

  • 我在 CSS 转换错误（http://bugs.jquery.com/ticket/8362）之后查看了 jQuery offset() 并且我正在使用 WebKit 进行测试，但我遇到的问题显然是设置偏移量，不访问它。
  • lastX 和 lastY 是为响应 touchstart 事件而初始化的（在 touchmove 触发之前），所以它们没有问题

谢谢，

-布伦丹

4

1 回答 1

0

.offset(coordinates)将目标元素的位置更改为relative文档。

如果#image的初始位置不是relative，这可能解释了您在首次初始化事件侦听器时看到的定位跳跃 - 图像的位置相对于文档而不是其初始位置发生变化。

于 2015-01-03T17:02:35.097 回答