试图以给定角度计算鼠标x或y（或两者的比率）以得出距离

Question

我有拖动事件之前和期间的xy坐标，this.x和this.y```` are the current coordinates, this.lastXandthis.lastY`是原点。

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