javascript - 定位变换后的div(三 Angular 解法)

Question

我试图在 JavaScript 中使用一些三 Angular 函数来定位一些钻石 div，但似乎我的逻辑在某个地方失败了。

你可以看到我尝试了这个公式:pos + trig * 维度。我希望它能给我正确的坐标，以便我可以构建我的钻石网格。所以我的问题是，如何将菱形边界与三 Angular 学对齐？

var div = document.getElementsByTagName('div');

var x1 = div[0].offsetTop + Math.cos(45) * div[0].offsetHeight;
var y1 = div[0].offsetLeft + Math.sin(45) * div[0].offsetWidth;

div[1].style.top = y1 + 'px';
div[1].style.left = x1 + 'px';

整个 jsfiddle 可以在这里找到:https://jsfiddle.net/hmfxmvvs/

编辑:我的预期结果是这样的:https://jsfiddle.net/hmfxmvvs/5/

Answer 1

尝试从计算中删除 .offsetHeight 、 .offsetWidth

var x1 = div[0].offsetTop + (Math.cos(45));
var y1 = div[0].offsetLeft + (Math.sin(45));
div[1].style.top = Math.round(y1) + 'px';
div[1].style.left = Math.round(x1) - 9 + 'px';

jsfiddle https://jsfiddle.net/hmfxmvvs/2/