Попытка вычислить мышь x или y (или соотношение обоих) с заданным углом, чтобы дать расстояние - PullRequest
Новая
       30

Попытка вычислить мышь x или y (или соотношение обоих) с заданным углом, чтобы дать расстояние

1 голос
/ 03 марта 2020

У меня есть координаты xy до и во время события перетаскивания, this.x и this.y```` are the current coordinates, this.lastX and this.lastY``` - источник.

Что мне нужно сделать задается радиан элемента-источника, определяющий, какую координату мыши использовать, IE, если угол равен 0, тогда координаты x используются для получения «расстояния», если градусы равны 90, тогда используются координаты y

если радиан равен 0,785398, то нужно будет использовать и x, и y.

У меня есть следующий код для одной оси, но это только переворачивает координаты y 

        let leftPosition;
        if (this.walls[this.dragItem.wall].angle < Math.PI / 2) {
          leftPosition = Math.round((-(this.y - this.lastY) / this.scale + this.dragItem.origin.left));
        } else {
          leftPosition = Math.round(((this.y - this.lastY) / this.scale + this.dragItem.origin.left));
        }

У меня есть пример здесь https://engine.owuk.co.uk

что мне нужно сделать, это чтобы радиан диктовал, какая координата x или y используется для управления перетаскиванием элемента путем вычисления leftPosition, I схожу с ума, пытаясь заставить это работать :(

Ответы [ 3 ]

1 голос
/ 03 марта 2020

Math.sin и Math.cos - это то, что вам нужно, вот пример 

<canvas id="c" width=300 height=150></canvas>
<script>
  const ctx = document.getElementById('c').getContext('2d');

  function drawShape(size, angle, numPoints, color) {
    ctx.beginPath();
    for (j = 0; j < numPoints; j++) {
      a = angle * Math.PI / 180
      x = size * Math.sin(a)
      y = size * Math.cos(a)
      ctx.lineTo(x, y);
      angle += 360 / numPoints
    }
    ctx.fillStyle = color;
    ctx.fill();
  }

  ctx.translate(80, 80);
  drawShape(55, 0, 7, "green");
  drawShape(45, 0, 5, "red");
  drawShape(35, 0, 3, "blue");

  ctx.translate(160, 0);
  drawShape(55, 15, 7, "green");
  drawShape(45, 35, 5, "red");
  drawShape(35, 25, 3, "blue");
</script>
0 голосов
/ 10 марта 2020

Вот теоретический ответ на вашу проблему.

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

Вот визуальное представление:

Таким образом, при наведении курсора мыши на красную стрелку синий круг должен переместиться на светло-синий.
(кратчайшее расстояние между прямой и точкой)

Как мы это сделаем?
Давайте добавим к этому изображению все, что можем:

Сегмент и мышь образуют треугольник, и мы можем вычислить длину всех сторон этого треугольника.
Расстояние между двумя точками является простым пифагорейским вычислением:
https://ncalculators.com/geometry/length-between-two-points-calculator.htm

Тогда нам нужна высота треугольника, где основание является нашим сегментом:
https://tutors.com/math-tutors/geometry-help/how-to-find-the-height-of-a-triangle

Это будет дайте нам расстояние от нашей мыши до сегмента, и мы узнаем угол, добавив угол сегмента + 90 градусов (или PI / 2 в радианах), и это все, что нам нужно для расчета положения нашего светло-голубого круга .

Конечно, нам нужно будет также добавить некоторую минимальную / максимальную математику, чтобы не превысить границу. Овны сегмента, но если вы сделали это так далеко, это должно быть легко выбрать.

0 голосов
/ 04 марта 2020

Мне удалось решить мою проблему 

let position;

const sin = Math.sin(this.walls[this.dragItem.wall].angle);
const cos = Math.cos(this.walls[this.dragItem.wall].angle);

position = Math.round(((this.x - this.lastX) / this.scale * cos + (this.y - this.lastY) / this.scale * sin) + this.dragItem.origin.left);
...