javascript - 如何在 Javascript 中计算将窗口滚动到图标中心位置的坐标？

Question

我有一个网页，在 Canvas 上绘制了图标树: http://seznamka.moxo.cz/您可以使用图标移动。我的想法是，我想要做的是将窗口的 View 区域居中到图标的位置。

例如，我们点击并拖动打开页面时右下角的“Gothic”图标:

滚动应使图标位于屏幕中间，但应保留在其原始位置。因此，只需将窗口移动到该位置即可。

这是包含 windowScrollTo() 的事件。

jQuery(canvas).mousemove(function(e) { var canvasPosition = jQuery(this).offset(); var p = fromScreen({x: e.pageX - canvasPosition.left, y: e.pageY - canvasPosition.top}); 最近 = 布局.nearest(p);

if (nearest.node.visible)
  {
  var s = toScreen(nearest.point.p);
  var h = e.pageX-canvasPosition.left > s.x ? e.pageX-canvasPosition.left - s.x : s.x - e.pageX-canvasPosition.left;
  var v = e.pageY-canvasPosition.top > s.y ? e.pageY-canvasPosition.top - s.y : s.y - e.pageY-canvasPosition.top;
  var distance = Math.sqrt(h*h + v*v);              
  underMouseEvent = distance <= iconRadius ? true : false;
  }
else
  underMouseEvent = false;

if (underMouseEvent )
  highlighted = nearest;

    if (dragged !== null && dragged.node !== null) {
        dragged.point.p.x = p.x;
        dragged.point.p.y = p.y;
 window.scrollTo(
 s.x
 // window.innerWidth/2     
 ,
 s.y
 // window.innerHeight/2
  );      
    }
    renderer.start();
});

我尝试了两个变体 s.x、s.y(拖动的图标的坐标)和 window.innerWidth/2、window.innerHeight/2 但效果不佳。如何计算正确的x和y位置？

编辑我已经根据建议进行了更改。现在我添加了新版本，其中包括防止拖动图标时烦人的重复的条件。这样在拖动过程中只会调用一次。但我发现另一个问题是，如果我打开 pan(el) 例如，browser 一侧的开发人员工具，那么就会出现一些需要居中的问题。我尝试使用左右变量来纠正条件，这些变量应该反射(reflect)当前滚动的偏移量，但这并不能完全起作用。然而，有什么想法如何通过滚动来纠正计算吗？

  jQuery(canvas).mousemove(function(e) {
    var canvasPosition = jQuery(this).offset();
        var p = fromScreen({x: e.pageX - canvasPosition.left, y: e.pageY - canvasPosition.top});
        nearest = layout.nearest(p);

    if (nearest.node.visible)
      {
      var s = toScreen(nearest.point.p);
      var h = e.pageX-canvasPosition.left > s.x ? e.pageX-canvasPosition.left - s.x : s.x - e.pageX-canvasPosition.left;
      var v = e.pageY-canvasPosition.top > s.y ? e.pageY-canvasPosition.top - s.y : s.y - e.pageY-canvasPosition.top;
      var distance = Math.sqrt(h*h + v*v);              
      underMouseEvent = distance <= iconRadius ? true : false;
      }
    else
      underMouseEvent = false;

    if (underMouseEvent )
      highlighted = nearest;

        if (dragged !== null && dragged.node !== null) {
            dragged.point.p.x = p.x;
            dragged.point.p.y = p.y;

     if (typeof s != 'undefined')
     {
     **var left = document.body.scrollLeft || window.pageXOffset;
     var top = document.body.scrollTop || window.pageYOffset;**
     if ( releasedAfterDrag && 
          (
          s.x>window.innerWidth/2-**left** || 
          s.y>window.innerHeight/2-**top** 
          )
          )
      {
      window.scrollTo(
              s.x-window.innerWidth/2,
              s.y-window.innerHeight/2
              );
      console.log("dragging: " + releasedAfterDrag);
      }
     if (releasedAfterDrag)
      releasedAfterDrag = false;     
         }

    }
        renderer.start();
    });

    jQuery(window).bind('mouseup',function(e) {
        dragged = null;
    releasedAfterDrag = true;
    });

在我看来，新条件仅适用于(内部)窗口的后半部分(当侧面板打开时)。因此，如果图标位于上半部分或右半部分，则窗口不会居中。

Answer 1

您需要进行以下计算才能找到其坐标:x: icon.x-window.innerWidth/2y: icon.y-window.innerHeight/2