라인/와이어 수동으로 두 요소 연결

Question

사용자가 와이어 또는 선을 사용하여 점 집합을 연결하기를 원합니다. 및 이 연결되면 연결이 완료됩니다. 그렇지 않으면 플레이어가 잘못된 연결을하면 화면에 잘못된 연결이 표시됩니다.

Answer 1

I로 시작하는 몇 가지 포인터를 제공 할 수 있습니다.

선 그리기는

노드의 선택에 당신은 선을 그릴 수 있으며, 다른 노드에 놓습니다. 노드 ID 포착 유지 및 목록에 1,2,6이 맞는지 또는 잘못되었는지 표시

function drawLine(x, y) { 
    ctx.beginPath(); 
    ctx.moveTo(startX, startY); 
    ctx.lineTo(x, y); 
    ctx.closePath(); 
    ctx.stroke(); 
    ctx.restore(); 
} 

canvas.onmousedown = function (e) { 
    ctx.save(); 
    e.preventDefault(); 
    e.stopPropagation(); 
    startX = parseInt(e.clientX - offsetX); 
    startY = parseInt(e.clientY - offsetY); 
    isDown = true; 
} 
canvas.onmousemove = function (e) { 
    if (!isDown) { 
     return; 
    } 
    e.preventDefault(); 
    e.stopPropagation(); 
    mouseX = parseInt(e.clientX - offsetX); 
    mouseY = parseInt(e.clientY - offsetY); 
    drawLine(mouseX, mouseY); 
} 
canvas.onmouseup = function (e) { 
    if (!isDown) { 
     return; 
    } 
    e.preventDefault(); 
    e.stopPropagation(); 
    isDown = false; 
}