根据主要元素的位置和旋转角度添加新元素

Question

我正在使用香草javascript开发游戏，您可以在雷达上发现鱼。我要实现的目标如下：

我希望物体（鱼）在旋转时随机出现在表盘的位置（随机出现在宽度/高度上）。我能够获得表盘的角度，并且位置，但我不知道如何计算新对象的位置。

我目前的丑陋解决方案涉及在表盘内部 中创建一个临时div，获取位置并将其用于新对象，但这实际上不能正常工作。

请参阅this fiddle，了解我到目前为止的情况

function createNewFish() {

// Create new fishies

/*
const pos = document.getElementById('dial').getBoundingClientRect();
const degrees = getDialDegrees();

console.log(pos)
console.log(degrees)

// Calculate position for fish?
*/

Answer 1

对于任何尝试这样做的人，我已经设法使用以下解决方案来解决它：

当拨号盘旋转时，您可以像这样用相同的div（我用过9）填充拨号盘：

Linq to SQL

然后，如果要在表盘上的上显示随机位置的元素（如我的雷达需要），则可以使用 Math.random（）< / strong>，然后获取该div的位置：

function DialGenerator() {
  for(let i=0;i<9;i++) {
    const insideDial = document.createElement('div');
    insideDial.classList.add('dial-inside')
    insideDial.setAttribute('id', 'dial-inside-'+i)
    document.getElementById('dial').appendChild(insideDial)
  }
}

这将返回div在刻度盘上的位置，您可以使用该位置将元素放置在雷达上。

希望这对某人有帮助！