javascript - 跟随鼠标的两条线之间的固定 Angular

Question

一段时间以来，我一直在尝试使用 JavaScript 将此功能实现到我的 HTML5 Canvas 中。这是一个示例图片:

你可以在上面看到我刚刚画的一个例子来帮助自己告诉你我正在努力实现的目标。 我想做的是: Canvas 上有一个给定的 X，Y 坐标，这个点是两条线的固定起点。两条线之间的 Angular 应始终固定，例如:40°。这两条线应该跟随鼠标，它们之间有一个固定的 Angular ​​度。搜索站点我可以实现此功能的以下状态: 基于this tutorial我可以创建跟随鼠标的两条线，并且两条线的端点始终距离鼠标 100px，但是，当然，这并没有给我一个固定的 Angular ​​度，当我移动鼠标时 Angular 会发生变化 Canvas 。

这是我的 JS 代码中绘制两条线的部分:

  context.clearRect(0, 0, canvas.width, canvas.height);
  context.beginPath();
  context.moveTo(xcoord, ycoord);
  context.lineTo(ev._x+100, ev._y);
  context.stroke();
  context.closePath();

  context.beginPath();
  context.moveTo(xcoord, ycoord);
  context.lineTo(ev._x-100, ev._y);
  context.stroke();
  context.closePath();

如果我用鼠标单击但不释放按钮，则两条线会跟随鼠标，这就是 context.clearRect 部分存在的原因。

任何帮助将不胜感激，因为我无法自己解决这个问题。

Answer 1

首先，获取想要的行长度:

var delta = {x: event.x - coord.x, y: event.y - coord.y};
var len = Math.sqrt(delta.x*delta.x + delta.y*delta.y);

然后获取 Angular (使用 atan2 )，并添加 40°:

var angle = Math.atan2(delta.y, delta.x);
var angle_left = angle + 40 / 180 * Math.PI;
var angle_right = angle - 40 / 180 * Math.PI;

现在你可以从这里得到分数:

var left = {
    x: coord.x + Math.cos(angle_left) * len,
    y: coord.y + Math.sin(angle_left) * len
};
var right = {
    x: coord.x + Math.cos(angle_right) * len,
    y: coord.y + Math.sin(angle_right) * len
};

( Demo at jsfiddle.net - Your fiddle updated )