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

Question

我正在尝试在 javascript 中使用一些三 Angular 函数来定位一些菱形 div，但似乎我的逻辑在某处失败了。

你可以看到我尝试了这个公式:pos + trig * dimension。我希望它能给我正确的坐标，以便我可以构建我的菱形网格。所以我的问题是，如何将菱形边界与三 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/