마우스 뒤 따르는 두 줄 사이의 각도 고정

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;