Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Duda] Diseñando con el mouse

Hola compañeros, mi codigo hace lo que pide el desafio, ahora el problema es que si deslizo el mouse mientras selecciono el color, este pinta la paleta de colores aunque ya haya programado la restricción del area de dibujo. Les comparto el codigo y una captura de lo que sucede.

<canvas width="600" height="400"></canvas>

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');

    pincel.fillStyle = 'grey';
    pincel.fillRect(0, 0, 600, 400);

     pincel.fillStyle = "red"; 
     pincel.fillRect(0,0,50,50);
     pincel.fillStyle = "green"; 
     pincel.fillRect(50,0,50,50);
     pincel.fillStyle = "blue"; 
     pincel.fillRect(100,0,50,50);

    var puedoDibujar = false;
    var colores = ["red","green","blue"]
    var indiceColorActual = cambiarColor;


    function dibujarCirculo(evento) {


        if(puedoDibujar) { 

        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;           
        pincel.fillStyle = colores[indiceColorActual];
        pincel.beginPath();
        pincel.arc(x, y, 5, 0, 2 * 3.14);
        pincel.fill();


        if (x >= 0 && x < 155 && y > 0 && y < 55){

            puedoDibujar = false;

        }

        else {
            puedoDibujar = true;
        }
    }


    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {


        puedoDibujar = true;

        }


    function deshabilitarDibujar() {

        puedoDibujar = false;
    }

    function cambiarColor (evento){

        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;

        if (x > 0 && x <50 && y > 0 && y < 50){

            indiceColorActual = 0;

        }

        if (x > 50 && x <100 && y > 0 && y < 50){

            indiceColorActual = 1;

        }

         if (x > 100 && x <150 && y > 0 && y < 50){

            indiceColorActual = 2;

        }


    }




    pantalla.onmousedown = habilitarDibujar;

    pantalla.onmouseup = deshabilitarDibujar;

    pantalla.onclick = cambiarColor;

</script>

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta

Hola Roger, un saludo!

Revisando tú código todo está muy bien, lo único es que si te fijas con pantalla.onmousedown ejecutas habilitarDibujar, y con pantalla.onclick cambias el color dependiendo del área donde hagas click, lo que ocurre con esto es que al hacer click en la paleta activas tanto panatalla.onmousedown y pantalla.onclick, por lo que por un momento habilitas el poder colorear, por eso solo puedes hacer un punto. para evitar esto puedes cambiar la función habilitarDibujar y ejecutar el mismo condicional que haces para limitar la paleta, te muestro.

function habilitarDibujar(evento) {
      x = evento.pageX - pantalla.offsetLeft;
      y = evento.pageY - pantalla.offsetTop;

  if (x >= 0 && x < 155 && y > 0 && y < 55){

  puedoDibujar = false;

  }else{
  puedoDibujar = true;
  }

}

Espero haberte podido ayudar con tu duda, si no, dejamelo saber y trato de explicarlo mejor.