0
232
VistasProyectar un punto en una línea
Estoy tratando de encontrar las coordenadas del punto rojo en esta imagen donde los puntos se proyectan en una línea formada por el punto inicial y final de la línea irregular.
Estoy usando el código de este artículo, ¿Cuáles son las coordenadas del punto proyectado en un segmento de línea usando el producto punto perp? , pero parece que estoy haciendo algo incorrectamente. ¿Podría alguien ayudarme a lograr el resultado en la imagen de arriba? ¡Gracias!
const points = [ { x: 2, y: 2 }, { x: 3, y: 1 }, { x: 4, y: 4 }, { x: 5, y: 3 }, { x: 6, y: 6 }, { x: 7, y: 5 }, { x: 8, y: 6 } ]; const first = points[0]; const last = points.slice(-1)[0]; const d = { x: last.x - first.x, y: last.y - first.y }; function dot_product(pt1,pt2) { return pt1.x*pt2.x + pt1.y*pt2.y; } function drawChart() { let projected = []; for (var i=0; i<points.length; i++) { p = points[i]; let e2 = {x:px-first.x,y:py-first.y}; let dot = dot_product(d,e2); let len2 = dx * dx + dy * dy; let v = { x: first.x + (dot*dx)/ len2, y: first.y + (dot*dy)/ len2, } projected.push(v); } chart = new CanvasJS.Chart("chartContainer", { animationEnabled: false, theme: "light2", data: [ { type: "line", color: "blue", lineDashType: "dash", indexLabelFontSize: 16, dataPoints: [points[0],points.slice(-1)[0]] }, { type: "line", color: "blue", indexLabelFontSize: 16, dataPoints: points }, { type: "line", color: "red", indexLabelFontSize: 16, dataPoints: projected } ] }); chart.render(); } drawChart(); html { font-family: sans-serif; } body { width: 80%; position: relative; } #chartContainer { height: 400px; width: 320px; } <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <div id="chartContainer"></div>
·
Juan Pablo Isaza
Responde la pregunta