固定在鼠标后面的两条线之间的角度

Question

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

您可以在上面看到一个示例,我只是为了帮助自己告诉您我想要实现的目标.我要做的是以下内容:画布上有一个给定的X,Y坐标,这一点是两条线的固定起点.两条线之间的角度应始终固定,例如:40°.两条线应该跟随鼠标,它们之间有固定的角度.搜索网站我可以实现此功能的以下状态:基于本教程,我可以创建跟随鼠标的两条线,并且两条线的端点总是远离鼠标100px,但是,当然,这不是'给我一个固定的角​​度,当我在画布上移动鼠标时,角度会发生变化.

这是我的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);

然后获得角度(使用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
};

(在jsfiddle.net演示 - 你的小提琴更新)