跟随鼠标的两条线之间的固定角度

Question

一段时间以来，我一直在试图使用JavaScript在HTML5 Canvas中实现此功能。下面是一个例子图片：

你可以看到一个例子，我只画来帮助自己，告诉你什么，我试图实现以上。 我想要做的是以下几点：在画布上有一个给定的X，Y坐标，这一点是两条线的固定起点。两条线之间的角度应始终固定，例如：40°。这两条线应该跟着鼠标在它们之间有一个固定的角​​度。在网站上搜索我可以达到以下状态： 基于this tutorial我可以创建鼠标后面的两条线，两条线的终点总是远离鼠标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 
}; 

（Demo at jsfiddle.net - Your fiddle updated）

Answer 2

这是你需要的吗？您可以查看这里工作的例子：http://edumax.org.ro/extra/new/Stack1/

var canvas, ctx; 

function viewDidLoad(){ 
canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 
canvas.height = 500; 
canvas.width = 500; 
canvas.addEventListener("mousemove", mouse_move_handler, false); 
} 

function mouse_move_handler(e){ 
var mouse = getCursorPosition(e); 
canvas.width = canvas.width; 
ctx.fillStyle="#00ffaa"; 
ctx.fillRect(0, 0, 500, 500); 
ctx.beginPath(); 
ctx.moveTo(mouse.x-100, mouse.y); 
ctx.lineTo(mouse.x, mouse.y+100); 
ctx.lineTo(mouse.x+100, mouse.y); 
ctx.lineWidth = 5; 
ctx.strokeStyle = "Black"; 
ctx.stroke(); 
ctx.closePath(); 
} 

// Get Current Mouse Position 
function getCursorPosition(e) { 
    var x, y; 
    if (e.layerX || e.layerY) { 
     x = e.layerX; 
     y = e.layerY; 
    } 
    else { 
     x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    }    
    return {x:x, y:y}; 
    } 
window.onload = viewDidLoad; 

Answer 3

如何

这个呢？ ：http://edumax.org.ro/extra/new/Stack2/

var canvas, ctx; 

function viewDidLoad(){ 
canvas = document.getElementById("canvas"); 
ctx = canvas.getContext("2d"); 
canvas.height = 500; 
canvas.width = 500; 
canvas.addEventListener("mousemove", mouse_move_handler, false); 
} 


var px, py; 

function mouse_move_handler(e){ 
var mouse = getCursorPosition(e); 

var centreX = canvas.width/2; 
var centreY = canvas.height/2; 


var line = Math.sqrt((mouse.y-centreY)*(mouse.y-centreY)+(mouse.x-centreX)*(mouse.x-centreX)); 

var k1 = 100; 
var k2 = line-100; 

var dx =(mouse.x-centreX)/ line; 
var dy = (mouse.y-centreY)/line; 

var x1 = mouse.x+100*dy; 
var x2 = mouse.x-100*dy; 
var y1= mouse.y-100*dx; 
var y2= mouse.y+100*dx; 

if(line>=100){ 
px = ((k1*centreX) + (k2*mouse.x))/(k1+k2); 
py = ((k1*centreY)+(k2*mouse.y))/(k1+k2); 



canvas.width = canvas.width; 
ctx.fillStyle="#00ffaa"; 
ctx.fillRect(0, 0, 500, 500); 
ctx.beginPath(); 
ctx.moveTo(x1, y1); 

ctx.lineTo(px, py); 
ctx.lineTo(x2, y2); 

ctx.lineWidth = 5; 
ctx.strokeStyle = "Black"; 
ctx.stroke(); 
ctx.closePath(); 
} 
} 

// Get Current Mouse Position 
function getCursorPosition(e) { 
    var x, y; 
    if (e.layerX || e.layerY) { 
     x = e.layerX; 
     y = e.layerY; 
    } 
    else { 
     x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
     y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
    }    
    return {x:x, y:y}; 
    } 
window.onload = viewDidLoad;