0

mi problema es el siguiente, estoy intentando hacer un grafico en java acerca de los problema de fisica donde tengo dos tanques, lo que pasa esque tiene que ser todo parametrizado, pero al cambiar algun valor en el canvas no se muestra bien la grafica el codigo inicial es este donde dibujo los tanques

function drawTanque(tanque, dezplazamiento, altura=50, diametro = 50, diametroAgujero = 5,alturaAgujero=10, nivelAgua=30){

    if(tanque.getContext){
        console.log(`altura: ${altura} diametro ${diametro} diamettro Aguja ${diametroAgujero} altura Agujero ${alturaAgujero} nivelAgua ${nivelAgua}`);
        let tanCa = tanque.getContext('2d');
           
        tanCa.beginPath();
        tanCa.moveTo(50+dezplazamiento,50);
        tanCa.lineTo(50+dezplazamiento,altura+50);
        tanCa.lineTo(diametro+50+dezplazamiento,altura+50);
        tanCa.lineTo(diametro+50+dezplazamiento,50);
        tanCa.fillStyle = "blue";
        tanCa.fillRect(51+dezplazamiento,51+(50-nivelAgua),diametro-1,nivelAgua-1);
        tanCa.fillStyle = 'gray';
        tanCa.fillRect(51+dezplazamiento+diametro,50+altura-diametroAgujero-alturaAgujero,5,diametroAgujero);
        //tanCa.closePath();
        tanCa.stroke();
 
    }
}

y el llamado inicial lo hago con esta funcion

function rePaint(){
        tanque1.width = tanque1.width;
        tanque2.width = tanque2.width;
    if(alturaH1.value != ""){
        console.log(alturaH1.value);
        drawTanque(tanque1,0,alturaH1.value,diametroH1.value,diametroAgujeroH1.value,alturaAgujeroH1.value,nivelH1.value);
        drawTanque(tanque2,50,alturaH2.value,diametroH2.value,diametroAgujeroH2.value,alturaAgujeroH2.value,nivelH2.value);
    }else{
        drawTanque(tanque1,0); 
        drawTanque(tanque2,50);
    }
    
}

y esto me dibuja esto: introducir la descripción de la imagen aquí

La cosa es que tengo un formulario donde estan los valores de cada dimension como la altura del tanque, el diametro etc, lo que sucede es que al cambiar un valor me dibuja algo extraño y pues al cambiar algun valor esta el evento onchange() que llama el metodo de repaint()

imagen despues de cambiar valor

Ya hice varias pruebas con los valores que le llegan y son los mismos, entonces no se si sea algo respecto al canvas que no conozca xd, agradezco cualquier ayuda

2
  • Hola, primero que nada, java y javascript son lenguajes distintos, no te confundas al hacer tu pregunta. Has intentado poner tu función repaint() en esta otra función llamada requestAnimationFrame(), si tienes más dudas sobre esta función puedes investigar aquí, espero te sea de ayuda.
    – WTFChamp
    el 10 jun. 2022 a las 8:16
  • Hola, gracias por responder, ya lo pude arreglar, en realidad lo que pasaba esque tenia que hacer un parseo a los datos ya que el input me devuelve es un string y al pasarcelo como argumento a las funciones de dibujo le llegaban valores muy grandes creo xd
    – KalyNotch
    el 12 jun. 2022 a las 1:23

1 respuesta 1

2

El problema esta en que no le entraba los datos adecuados a las funciones de dibujo de canvas, el input devuelve un string y debo pasarle un numero

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.