<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Distancia punto linea</title>
<script>
window.onload = function(){
dibujar(linea.origen.x,linea.origen.y,linea.destino.x,linea.destino.y, 0);
dibujar(300-linea.origen.y,300-linea.origen.x,300-linea.destino.y,300-linea.destino.x, 0);
calcDistancia(punto,linea)
rangoX = document.getElementById('rangoX')
rangoY = document.getElementById('rangoY')
rangoX.addEventListener('input', function(){
punto.x = this.value
init()
calcDistancia(punto,linea)
})
rangoY.addEventListener('input', function(){
punto.y = this.value
init()
calcDistancia(punto,linea)
})
};
function init(){
document.getElementById('canvas').getContext('2d').clearRect(0,0,300,300)
dibujar(linea.origen.x,linea.origen.y,linea.destino.x,linea.destino.y, 0);
dibujar(300-linea.origen.y,300-linea.origen.x,300-linea.destino.y,300-linea.destino.x, 0);
}
function dibujar(ox, oy, dx, dy, x){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(ox, oy);
ctx.lineTo(dx, dy);
x == 0 ? ctx.strokeStyle = "#000" : x == 1 ?
ctx.strokeStyle = "rgba(255,0,0,0.2)" : ctx.strokeStyle = "rgba(0,0,255,0.2)"
ctx.stroke();
}
var punto = {
x: 60,
y: 10
}
var linea = {
origen: {x: 200, y: 50},
destino: {x: 230, y:270}
}
function calcPendiente(linea){
if(linea.destino.x == linea.origen.x) return 0.00000000001;
return (linea.destino.y - linea.origen.y) / (linea.destino.x - linea.origen.x);
}
function calcOrdenada(linea, pendiente){
return linea.origen.y - (pendiente * linea.origen.x);
}
// Calcula distancia entre un punto y cada punto de una recta
function calcDistancia(punto, linea){
var origX = linea.origen.x;
var origY = linea.origen.y;
var destX = linea.destino.x;
var destY = linea.destino.y;
var puntX = punto.x;
var puntY = punto.y;
var canvasWidth = document.getElementById('canvas').width;
var pendiente = calcPendiente(linea);
var ordOr = calcOrdenada(linea, pendiente);
// Si el valor de X en el punto de destino
// es mayor que el de el origen
// se intercambia el nombre de los puntos
if(origX > destX){
var aux = origX
origX = destX
destX = aux
aux = origY
origY = destY
destY = aux
}
// Si la pendiente es menor o igual que 1
// y mayor o igual que -1 usa los valores normales
// if(pendiente <= 1 && pendiente >= -1){
for(var X = origX; X <= destX; X++){
var Y = pendiente * X + ordOr;
dibujar(X,Y,puntX,puntY, 1);
if( dist(X, Y, puntX, puntY) < 2 ){
// return true
}
}
// return false
// } else {
// sino, gira 90 grados el grafico
// para no perder precision
var aux = canvasWidth - origX;
origX = canvasWidth-origY;
origY = aux;
aux = canvasWidth-destX;
destX = canvasWidth-destY;
destY = aux;
pendiente = (pendiente**-1);
aux = canvasWidth-puntX
puntX = canvasWidth-puntY
puntY = aux
if(origX > destX){
var aux = origX;
origX = destX;
destX = aux;
aux = origY;
origY = destY;
destY = aux;
}
ordOr = origY - origX * pendiente;
for(var X = origX; X <= destX; X++){
var Y = pendiente * X + ordOr;
dibujar(X,Y,puntX,puntY, 2);
// Si la distancia entre el punto
// y alguno de los puntos de la recta
// es menor que dos, devuelve verdadero
if( dist(X, Y, puntX, puntY) < 2 ){
// return true;
}
}
// return false;
}
// }
// Calcula distancia entre dos puntos
function dist(x1,y1,x2,y2){
var yMayor, yMenor;
if(x1 > x2){
xMayor = x1;
xMenor = x2;
} else {
xMayor = x2;
xMenor = x1;
}
if(y1 > y2){
yMayor = y1;
yMenor = y2;
} else {
yMayor = y2;
yMenor = y1;
}
return Math.sqrt((xMayor-xMenor)**2 + (yMayor-yMenor)**2);
}
</script>
</head>
<body>
<div>
x<input id='rangoX' min="0" max="300" type="range">
y<input id='rangoY' min="0" max="300" type="range">
</div>
<canvas style="margin: 50px; background-color: lightyellow; border: 1px solid black" id="canvas" width="300" height="300"></canvas>
</body>
</html>