Обнаружение столкновения на статическом элементе с динамически генерируемыми наклонными и повернутыми элементами на 2D плоскости - PullRequest
Новая
       12

Обнаружение столкновения на статическом элементе с динамически генерируемыми наклонными и повернутыми элементами на 2D плоскости

0 голосов
/ 06 ноября 2019

Я разрабатываю вращатель колеса (например, Wheel of Fortune) со статическим селектором.

Сегменты круга создаются с помощью квадратного элемента, который затем наклоняется на X градусов в зависимости от количества сегментов. Еще один квадратный элемент с полностью закругленной левой и верхней стороной. Затем отображается перекрытие для создания сегмента.

Как только колесо вращается, мне нужен кликер, чтобы определить, какой сегмент выбран.

Вопрос в том, как определить координаты сегмента, чтобы определить, находится ли кликер внутри сегмента.

Изменить, чтобы добавить сегмент кода:

Генерация сегмента 

<div className="Segment-outer" style={{transform: "skewX(" + this.props.skewDegrees
+ "deg)"}}>
  <div className="Segment-inner" style={{transform: "skewX(-"
  + this.props.skewDegrees + "deg)"}}>
  </div>
</div>

Сегменты хранятся в следующем разделекоторый затем поворачивается, как показано. 

<div className="Spinwheel-holder" style={{transform: "translate(-50%, -50%) 
rotate(" + this.state.rotateDegrees + "deg)"}}>

Вывод (после Skewing и CSS) это для пяти сегментов. Каждый сегмент становится тоньше по мере добавления:

Visualization

Известные переменные:

Сверху, слева, справа, снизу, x, y, высота, ширина

Дальнейшее редактирование:

В настоящее время я использую это для обнаружения столкновений, которое работает, но не совсем точно. 

collision = !(
  ((segmentRect.y + segmentRect.height) < (this.state.clickerLocation.y)) ||
  (segmentRect.y > (this.state.clickerLocation.y + this.state.clickerLocation.height)) ||
  ((segmentRect.x + segmentRect.width) < this.state.clickerLocation.x) ||
  (segmentRect.x > (this.state.clickerLocation.x + this.state.clickerLocation.width))
)
...