0

Me encuentro haciendo un proyecto personal en el que quiero simular un Paint; tengo dos div con sus respectivos iconos de Font Awesome (uno de goma de borrar y el otro de un lápiz). Yo lo que quiero lograr es: al darle click al div del lápiz que dibuje, pero con el mouse (todo esto es en un canvas), y al darle click a la goma de borrar, se va borrando lo dibujado a medida que el mouse presionado pasa. Y logro los dos objetivos pero me encuentro con el inconveniente de que: si presiono primero el lápiz y dibujo, luego uso la goma y borro, y después quiero usar nuevamente usar el lápiz no puedo, la goma se queda en uso constante y no logro hacer que quede desactiva o fuera de uso hasta que le vuelva a dar click al div correspondiente. Dejo el código .js abajo y agradezco cualquier ayuda o colaboración. Desde ya muchas gracias.

//Activar el lapiz
function activePencil(evento) {
    estadoLapiz = true;
    x = evento.offsetX;
    y = evento.offsetY;
}
  
//Desactivar el lapiz
function deactivatePencil() {
    estadoLapiz = false;
}
  
//Para dibujar con el mouse
function drawWithClick(evento) {
    let xFinal = evento.offsetX;
    let yFinal = evento.offsetY;    

    if (estadoLapiz && !estadoGoma) {
        drawLine(inpPalette.value, x, y, xFinal, yFinal);
        x = xFinal;
        y = yFinal;
        return !estadoLapiz;
    }
}

//Activa la goma de borrar
function activeEraser(evento) {
    estadoGoma = true;
    estadoLapiz = false;
    x = evento.offsetX;
    y = evento.offsetY;
}

//Desactiva la goma de borrar
function deactivateEraser() {
    estadoGoma = false;
}

//Para borrar con el mouse
function deleteWithClick(evento){
    x = evento.offsetX;
    y = evento.offsetY;
    
    if (estadoGoma && !estadoLapiz) {
        context.clearRect(x, y, sizeLine, sizeLine);
        return !estadoGoma;
    }
}
lapiz.addEventListener("click", () => {
    drawing.addEventListener("mousedown", activePencil);
    drawing.addEventListener("mousemove", drawWithClick);
    drawing.addEventListener("mouseup", deactivatePencil);
});

gomaBorrar.addEventListener("click", () => {
    drawing.addEventListener("mousedown", activeEraser);
    drawing.addEventListener("mousemove", deleteWithClick);
    drawing.addEventListener("mouseup", deactivateEraser);
});

1
  • Creo que en la función de activePencil activas el lapicero, pero no desactivas el eraser. Mientras que en activeEraser activas eraser y desactivas pencil. Luego condicionas con esto if (estadoLapiz && !estadoGoma) en drawWithClick.
    – H. Díaz
    Commented el 29 sept. 2021 a las 7:58

2 respuestas 2

3

La idea de guardar los estados no es mala, solo realizas la acción cuando esta está habilitada. El tema de habilitar y deshabilitar acciones lo debería manejar cada acción (lapiz, goma). Pero en cuanto a los listeners, se deberían crear una sola vez y simplemente hacer un if si la acción está habilitada. Si creas el listener cada vez que se habilita la función, deberías hacer removeListener de las demás acciones, además cada habilitación agrega un nuevo listener. Por ello no es conveniente hacer un addEventListener cada vez que habilitan una acción. Aquí dejo un ejemplo mínimo de la idea, espero que se entienda:

let estadoGoma = false; // <-- Esto determina si se hacen o no las acciones definidas en el evento que corresponda
let estadoLapiz = true;

function activePencil() { // <-- cada accion maneja la habilitación de las demás
    estadoGoma = false;
    estadoLapiz = true;
}
  
  
function activeEraser() {
    estadoGoma = true;
    estadoLapiz = false;
}

const estado = document.getElementById("estado");

document.getElementById("goma").addEventListener("click",activeEraser);
document.getElementById("lapiz").addEventListener("click",activePencil);

// Los listeners se pueden crear una sola vez, en este ejemplo hago solo uno para los dos.

window.document.addEventListener("mousemove", ()=>{

    estado.innerHTML = "Estado lapiz: "+estadoLapiz+" |  Estado goma: "+estadoGoma;
  
  if(estadoLapiz){ // <-- como el estado es global, cualquier función lo puede cambiar
    // aqui dibujamos
  }
  
  if(estadoGoma){
   //aqui borramos
  }

});
<div id="estado"></div>
<br>
<button id="goma">goma</button>
<br>
<button id="lapiz">lapiz</button>

En el ejemplo pongo un solo evento para todas las acciones (mousemove) para hacer mas sencillo el concepto, pero la idea sería definir todos los eventos y sus acciones.

En otras palabras, lo que propongo es que siempre estén definidas todas las acciones posibles para cada posible evento y manejar que se hace o deja de hacer en función de los estados.

1
  • Muchas gracias Emmeus, hice uso de un removeEventListener en la función deactivateEraser(), llegue a la conclusión de que era lo que me convenía ya que hice una "depuración" con algunos console.log y me di cuenta que la goma no se desactivaba nunca. Commented el 30 sept. 2021 a las 17:45
0

puede ser que no te este tomando el cambio dinámico en la funciones, prueba con esto:

lapiz.addEventListener.on("click", function() => {
    drawing.addEventListener("mousedown", activePencil);
    drawing.addEventListener("mousemove", drawWithClick);
    drawing.addEventListener("mouseup", deactivatePencil);
});

gomaBorrar.addEventListener.on("click", function() => {
    drawing.addEventListener("mousedown", activeEraser);
    drawing.addEventListener("mousemove", deleteWithClick);
    drawing.addEventListener("mouseup", deactivateEraser);
});
1
  • 1
    eso es exactamente igual a lo que ya está haciendo
    – Christian
    Commented el 29 sept. 2021 a las 4:25

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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