Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

152
Views
HTML5 Canvas cómo realizar un seguimiento automático de la entrada de texto del usuario

Este es el código si quieres probarlo: https://jsfiddle.net/csCoder/eLxfrn10/8/

Actualmente tengo 2 cuadros de texto del usuario que escribirán su entrada y cuando presionen "dibujar línea", se lee la entrada y se dibuja una línea en consecuencia. Quiero hacer que la línea se dibuje automáticamente cada vez que el usuario ingrese algo en el cuadro de texto (sin tener que hacer clic en un botón) O cada vez que el usuario use el control deslizante. Actualmente, las líneas que dibujé cambiaron según lo que se escribió en el cuadro de texto. Sin embargo, tengo un control deslizante que actualiza el cuadro de texto y quiero que mi programa realice un seguimiento del control deslizante Y de los cuadros de texto en lugar de solo los cuadros de texto, si eso tiene sentido. ¡Aprecio tu ayuda!

Así es como se ve ahora: Imagen

Limpié el código para hacerlo más fácil y más relevante: este fragmento de código representa el control deslizante y el cuadro de texto (el usuario debería poder usar cualquiera para ingresar números).

 <input id="rangeInputM" type="range" min="-10" max="10" oninput="m1.value=rangeInputM.value" /> <input id="m1" type="number" value="1" min="-200" max="200" oninput="rangeInputM.value=m1.value" />

Aquí es donde tengo problemas para actualizar mi dibujo cada vez que ingreso texto nuevo o muevo el control deslizante. Usar #m1 como selector funciona para actualizar el cuadro de texto, pero estoy tratando de hacer que funcionen tanto el cuadro de texto (#m1) como el control deslizante (#rangeInputM):

 $("#rangeInputM").keyup(function(){ var m1,b1 = 0; m1 = parseFloat($("#m1").val()); b1 = parseFloat($("#b1").val()); var myGraph = new Graph({ canvasId: 'Graph', minX: -10, minY: -10, maxX: 10, maxY: 10, unitsPerTick: 1 }); myGraph.drawLine(m1, b1, 'blue', 3); });

¡Gracias!

about 4 years ago · Santiago Gelvez
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!