javascript - 在不同的屏幕尺寸下动态改变另一个 div 的位置

Question

我正在创建一个 Ionic 2 应用程序，用户必须在屏幕上选择一些点，这些坐标的值将用于另一个具有不同尺寸的屏幕。我尝试使用 trhee/cross multiplication 规则，但它给了我一个不够的近似值。

这就是我所做的，使用在一个屏幕上看起来不错的值，并在另一个屏幕上使用相同的百分比，但尺寸不同:

makePosition() {
  let canvasRect = document.getElementById("shapeBoard").getBoundingClientRect();
  let top = this.elementHead.nativeElement.style.top; 
  let left = this.elementHead.nativeElement.style.left; 
  this.elementHead.nativeElement.style.top = canvasRect.top + (canvasRect.height * 1.931634728536)/100 + "px";
  this.elementHead.nativeElement.style.left = canvasRect.left + (canvasRect.width * 48.738582882804224)/100 + "px";
} 

html: https://codepen.io/jmachado/pen/ybzNzr

有没有办法动态改变圆 div 的位置，使其始终位于图像上的相同位置？

Answer 1

希望这5个步骤能让你准确定位:

1) 使圆圈位置相对于图像所在的容器。

2) 确保图像宽度与其容器的宽度是 100%。

3) 以百分比形式存储顶部和左侧位置。

4) 将 top 和 left 设置为百分比 % 而不是 px。

5) 确保图像没有设置边框或边距，其容器没有边框或填充。

左侧和顶部的百分比将随着屏幕大小的调整而自动调整，无需任何 JavaScript。

另外当你设置top和left时，它会相对于圆的top和left。您可能需要通过向圆圈添加其一半宽度的负边距来将圆圈居中到给定的精确顶部/左侧百分比。