Question

使用CSS缩放/缩放，我发现我的一些鼠标处理程序不再按预期工作了。我创建了以下JSFiddle来解决这个问题：https://jsfiddle.net/2wb82x93/1/。一个方框将跟随您的鼠标。当您缩放包装器（使用按钮）时，该框仍然跟随您的鼠标，但具有偏移和不同的速度。这是有道理的：我们根据非缩放坐标翻译框。

代码大致如下：

HTML

<div class="sub">
    <div class="container"></div>
</div>

使用Javascript：

$(document).ready(function(){
  var offset = $('div.sub').offset();
  $('div.sub').mousemove(function(e){
      var x = e.pageX;
      var y = e.pageY;
      $('div.container').css({
        'left': x - offset.left,
        'top':  y - offset.top
      }); 
  });
});

然后我们缩放/缩放子div。

是否有可能获取检索/计算插值坐标？或者另一种修复此代码的方法？

Answer 1

我已通过手动计算元素的缩放量来解决此问题，然后将此坐标偏移量除以此缩放系数。

首先，我创建了以下递归函数，该函数接受一个元素并计算该元素的应用缩放。

function calculateZoom(element) {
  var ownZoom = parseFloat(element.style.zoom || 1);
  if(element !== document.body) {
    ownZoom *= calculateZoom(element.parentElement);
  }
  return ownZoom;
}

然后在我的鼠标事件处理程序中，我将偏移量除以计算值：

function mousehandler(element) {
  var relxpos = Math.round(event.pageX / this.zoomFactor) - this.center.left,
      relypos = Math.round(event.pageY / this.zoomFactor) - this.center.top;
  // Do computation with relxpos and relypos
}

当拖动这些值时，元素也会在缩放元素中保留在光标上！

缩放/缩放容器的插值坐标

1 个答案: