组件中获取的HTML个元素坐标错误

Question

我已将自定义工具提示添加到 gridster 项目中的 SVG 图表（所有示例均在 stackblitz 上提供）。工具提示 (div) 坐标使用 nativeElement 获得并使用 Renderer2 设置（trivial example - tooltip div is offset by 20px). However, when I project the chart widget within gridster item, the tooltip is always added to the wrong position (see the full example - 悬停在圆圈上）。似乎对于每个小部件，div 的坐标都会增加该小部件离 window（左和上）边缘的距离。

从视觉上看，这是工具提示与圆的距离：

但实际上（元素离屏幕边缘越远，tooltip放得越远）：

我试过看看这是否是 <ng-content> 的问题，即 GridsterItem 中的内容投影，但在我制作自定义组件时它似乎并不像那样模仿那个（见this example）。为什么坐标在 gridster 项目中很时髦？ renderer 设置坐标是相对于小部件，还是相对于 document?

Answer 1

问题是您根据圆的客户端位置设置工具提示位置。您需要的是圆相对于其父项的位置。

public mouseEnter($event, data): void {
  const circle = $event.target as HTMLElement;
  const parent = circle.parentElement;
  const circleCoords = circle.getBoundingClientRect();
  const parentCoords = parent.getBoundingClientRect();
  const relativeX = circleCoords.left - parentCoords.left;
  const relativeY = circleCoords.top - parentCoords.top;
  const x = `${relativeX + 20}px`;
  const y = `${relativeY + 20}px`;
  this.renderer.setStyle(this.tooltip.nativeElement, 'left', x);
  this.renderer.setStyle(this.tooltip.nativeElement, 'top', y);
  this.renderer.setStyle(this.tooltip.nativeElement, 'display', 'block');
  this.renderer.setProperty(this.tooltip.nativeElement, 'innerHTML', data);
}

有关演示，请参阅 this stackblitz。

组件中获取的HTML个元素坐标错误

Wrong coordinates of HTML elements obtained in components

svg

tooltip

angular

angular-gridster2

angular-renderer2