Quiero que cada extremo de la línea siga los círculos azul y rojo, y quiero que el círculo azul se mueva en dirección opuesta al círculo rojo. Ya he descubierto cómo hacer que el rojo siga el control deslizante.
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="ass3_part1.js" defer></script> <title>CPSC 1045 Assignment 3 Part 1</title> </head> <body> <h1>CPSC 1045 Assignment 3 Part 1</h1> <svg width="350" height="350" style="border:solid 1px black"> <circle id="top" cx="10" cy="100" r="10" fill="red" /> <circle id="bottom" cx="340" cy="240" r="10" fill="blue" /> <line id="connector" x1="10" y1="100" x2="340" y2="240" stroke="black" stroke-width="5px" /> </svg> <br> <input class="slider" type="range" id="rangeX" min="10" max="340" value="0" style="width:350px" oninput="move()" > </body> </html>js:
console.log("ass3_part1.js executing") function move(event){ let slider = document.querySelector("#rangeX"); let circle = document.querySelector("#top"); circle.setAttribute("cx", slider.value); console.log(circle); }Por lo que entiendo, esto es lo que estabas tratando de lograr:
function move(event){ let slider = document.querySelector("#rangeX"); let topCircle = document.querySelector("#top"); let bottomCircle = document.querySelector("#bottom"); let line = document.querySelector('#connector'); topCircle.setAttribute("cx", slider.value); //set x on left end-point to the same value as top circle: line.setAttribute('x1', slider.value); //set x on bottom circle to 350 (which is the width of the input component & the svg) minus the slider value //alternatively you could have it variable (tied to something like the width of the svg): //let inverseSliderValue = parseInt(document.querySelector.(#svgId).getAttribute(width))-slider.value; //bottomCircle.setAttribute('cx', inverseSliderValue); bottomCircle.setAttribute('cx', 350-slider.value); //set x on right end-point to the same value as the bottom circle: line.setAttribute('x2', 350-slider.value); } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="ass3_part1.js" defer></script> <title>CPSC 1045 Assignment 3 Part 1</title> </head> <body> <h1>CPSC 1045 Assignment 3 Part 1</h1> <svg width="350" height="350" style="border:solid 1px black"> <circle id="top" cx="10" cy="100" r="10" fill="red" /> <circle id="bottom" cx="340" cy="240" r="10" fill="blue" /> <line id="connector" x1="10" y1="100" x2="340" y2="240" stroke="black" stroke-width="5px" /> </svg> <br> <input class="slider" type="range" id="rangeX" min="10" max="340" value="0" style="width:350px" oninput="move()"> </body> </html>Traté de seguir el mismo patrón con el que habías comenzado (y modificar tu código lo menos posible). También agregué algunos comentarios al código, pero aquí hay una pequeña explicación:
Más o menos, desea mover el círculo azul hacia la izquierda horizontalmente la cantidad inversa que el círculo rojo se mueve hacia la derecha. Entonces, a medida que se mueve el control deslizante, querrá actualizar el valor x del círculo azul a su valor x inicial menos el valor del control deslizante. Para la línea, dado que solo está moviendo los círculos a lo largo del eje x, solo necesita actualizar los valores x de los puntos finales iguales al valor que asignó a su círculo asociado.