如何计算坐标以将 window 滚动到 Javascript 中的图标中心位置？

Question

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

比如我打开页面时点击右下角的"Gothic"图标并拖动：

滚动应该使图标位于屏幕中间，但它应该保持在原来的位置。因此，应该将 window 移动到该位置。

这是包含 windowScrollTo() 的事件。

jQuery(canvas).mousemove(函数(e) { var canvasPosition = jQuery(this).offset(); var p = fromScreen({x: e.pageX - canvasPosition.left, y: e.pageY - canvasPosition.top}); 最近的 = 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;
 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)，例如 brownser 一侧的开发人员工具，那么中心就会出现一些问题。我试图用应该反映当前滚动偏移量的左右变量来纠正这种情况，但这并不完全有效。然而，关于如何使用滚动更正计算的任何想法？

  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;
    });

在我看来，新条件仅适用于（内部）window（打开侧面板时）的后半部分。因此，如果图标位于上半部分或右半部分，则 window 未居中。

Answer 1

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

如何计算坐标以将 window 滚动到 Javascript 中的图标中心位置？

How to calculate coordinates to scroll window to icon center position in Javascript?

javascript

scroll