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

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
}

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