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);
});