p5.js 和 Matter.js 命运之轮检测哪个元素位于顶部

问题描述 投票:0回答:1

你好,我正在制作命运之轮。我让动画正常工作,但试图找出如何检测每个椭圆的位置,以便我可以检测它何时处于 90 度且指针指向它。我用来构建轮子的数据是一系列十六进制颜色。这是codpen

这是构建轮子的函数

function prizes(revolve,xPosition,yPosition,data,radius,size){ 
var j = 0;
// translate(x,y);
  push()
  rotate(revolve)

for(i = 0 ; i < TWO_PI ; i+=TWO_PI/data.length)
{
  let x = radius * cos(i);
  let y = radius * sin(i);

  fill(data[j])
  textSize(32);
  ellipse(x,y,size)
  j++;
  }

  pop() 
}

提前致谢

javascript p5.js matter.js
1个回答
1
投票

问题是您依赖

revolve
参数来设置旋转,这反过来又修改了椭圆的位置。这使得更难弄清楚旋转后椭圆的实际位置。

您也许可以通过取消旋转点并检查它来找出答案,但恕我直言,这听起来相当复杂。相反,如果我是你,我会停止使用

revolve
函数来旋转整个画布,而是使用它来计算每个椭圆的位置。

一旦知道了每个椭圆的实际位置,就可以找出哪个椭圆在顶部。或者您可以使用

dist()
函数来找出哪个最接近指针。

© www.soinside.com 2019 - 2024. All rights reserved.