Question

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

例如，让我们点击并拖动图标＆＃34; Gothic＆＃34;当我打开页面时，它在右下角：

Gothic in corner

Gothic in center

滚动应该这样，图标将位于屏幕中间，但它应保持在原始位置。所以只需将窗口移动到该位置即可。

这是包含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 = 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）例如开发者工具在布朗瑟一侧，所以有一些问题需要集中。我试图用左和右变量来纠正这个条件，这些变量应该反映当前滚动的偏移量，但这并不完全有效。还有任何想法如何用滚动来纠正计算？

  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 / 2 y：icon.y-window.innerHeight / 2

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

1 个答案: