动态计算 div 位置答案

【问题标题】：dynamically calculate div position in动态计算 div 位置
【发布时间】：2018-02-05 23:26:43
【问题描述】：

正在寻找构建餐桌座位/规划应用程序。目前有一个圆桌会议，我可以使用我在 stackoverflow 上找到的代码动态添加椅子。函数正在计算桌子周围每个座位的 x,y 绝对位置。

https://www.dropbox.com/s/4kvb0vre0dwtc0i/table.mov?dl=0

视频展示了我到目前为止所获得的结果。

对于任何对此感兴趣的人

export const calcRoundDimensions = (totalChairs, chairSize) => {
    var chairspos = [];

    var squareSize = chairSize * 2;

    for (var i = 0; i < totalChairs; i++) {
        var top = String(squareSize/2 + (-squareSize/2-chairSize) * Math.cos((360 / totalChairs / 180) * (i + 0) * Math.PI)) + 'px';
        var left = String(squareSize/2 + (squareSize/2+chairSize) * (true ? Math.sin((360 / totalChairs / 180) * (i + 0) * Math.PI) : -Math.sin((360 / totalChairs / 180) * (i + 0) * Math.PI))) + 'px';
        chairspos.push({top:top, left:left});
    }

    return {chairpos:chairspos, size:squareSize+chairSize};
}

我希望用方形做同样的事情（也是矩形的，但第一件事是第一件事）。

方桌将是固定宽度（150 像素）。我也希望能够顺时针添加椅子并将它们放在一边。（将有 12 或 16 个椅子的限制，但我猜这不重要）。

矩形桌子的两端各有一把椅子，然后可以在每个较长的一端添加 5 或 6 把椅子。

搜索了该网站，但找不到太多方向。

任何帮助将不胜感激！

【问题讨论】：

您应该编辑您的问题：1. 更具体 2. 研究语法
3.展示你尝试过的东西。这不是代码编写服务
@NirpendraPatel。我添加了一个视频。我相信，连同这个问题，事情现在应该更清楚了。至于语法，我相信对于非英语人士来说，它的水平更高
@gforce301 我没想到现成的代码。我正在寻找关于如何实现我所追求的正确方向的想法/点。如果我知道，我就不会在这里。翻译我已经知道如何用 javascript 做的东西并不完全是火箭科学。
“我没想到现成的代码”，但你没有费心去阅读对你作为海报的期望 (MCVE)。 “翻译一些我已经知道如何用 javascript 做的事情并不完全是火箭科学”，好吧，如果它这么容易做到，那么你到底为什么要在这里寻求帮助呢？

标签： javascript html css ecmascript-6 position

【解决方案1】：

不太清楚您需要什么，但以下内容会为您提供与页面绝对顶部和左侧相比的元素位置：

const box = element.getBoundingClientRect();
const elementPosition = {
  x:box.x+window.scrollX,
  y:box.y+window.scrollY
};

【讨论】：