javascript - 尝试计算给定 Angular 鼠标 x 或 y(或两者的比率)以给出距离

Question

我有拖动事件之前和期间的 xy 坐标，this.x 和 this.y```` 是当前坐标，this.lastX和this.lastY```是原点。

我需要做的是给定源元素的弧度，确定要使用哪个鼠标坐标，即，如果 Angular 为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

我需要做的是让弧度指示通过计算 leftPosition 使用什么 x 或 y 坐标来控制项目的拖动，我一直在试图让它发挥作用:(

Answer 1

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>