Diseñando con el mouse DUDA | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

4
respuestas

por DANIEL EDUARDO SIERRA RODRIGUEZ

| 35k xp | 2 posts

Agent

Hola! Espero se encuentren bien y que alguien pueda ayudarme.

Esta fue mi solucion para el cambio de colores del ultimo ejercicio, pero por mas que intente no pude hacer que mi funcion de cambiar de color tomara en cuenta un rango en vez de una coordenada en especifico, alguien puede orientarme de como debo hacerlo?

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

<script>
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    var colorDelpincel = "green";
    var colores = ["red", "green", "blue"];

    function dibujarCuadrado(color,x,y,w,h){

        pincel.fillStyle = color;
        pincel.fillRect(x,y,w,h);
    }



    dibujarCuadrado("grey",0, 0, 600, 400)
    dibujarCuadrado("red", 0, 0, 50, 50)
    dibujarCuadrado("green", 50, 0, 50, 50)
    dibujarCuadrado("blue", 100, 0, 50, 50)

    function colorSelector(event){

    var x = event.pageX - screen.offsetLeft;
    var y = event.pageY - screen.offsetTop;

    if (x = 50) {
        colorDelpincel = "red"
    }

    else if (x = 100) {
         colorDelpincel = "green"
    }

    else if (x = 150) {

        colorDelpincel = "blue"
    }


    }

    var puedoDibujar = false;

    function dibujarCirculo(evento) {

        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = colorDelpincel;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }

    }

    pantalla.onmousemove = dibujarCirculo;

    function habilitarDibujar() {

        puedoDibujar = true;
    }

    function deshabilitarDibujar() {

        puedoDibujar = false;
    }



    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;
    pantalla.onclick = colorSelector;

</script>

4 respuestas

por Heiner Tinoco

| 174.5k xp | 172 posts

Director de Proyectos

07/05/2023

Te paso mi ejemplo para que puedas guiarte

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DISEÑA CON EL MOUSE</title>
</head>
<body>
    <canvas width="600" height="400"></canvas>

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

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

    var poderDibujar = false;

    //Variables para dibujar la paleta
    var xRojo = 0;
    var xVerde  = 50;
    var xAzul = 100;
    var yCuadrados = 0;
    var dimensionCuadrados = 50;
    var colorActivo = "blue";

    function dibujarCirculos(x, y, colorActivo ) {

        if(poderDibujar) {
            pincel.fillStyle = colorActivo;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * 3.14);
            pincel.fill();
        }
    }

    //Función para dibujar cada uno de los cuadrados de la paleta
    function dibujarCuadrado(x, y, dimension, color) {
        pincel.fillStyle = color;
        pincel.fillRect(x, y, dimension, dimension)
        pincel.fill();
    }

    //Función para dibujar la paleta de colores
    function dibujarPaletaColores() {
        dibujarCuadrado(xRojo, yCuadrados, dimensionCuadrados, 'red');
        dibujarCuadrado(xVerde, yCuadrados, dimensionCuadrados, 'green');
        dibujarCuadrado(xAzul, yCuadrados, dimensionCuadrados, 'blue');
    }

    function habilitarDibujar() {
        poderDibujar = true;
    }

    function deshabilitarDibujar() {
        poderDibujar = false;
    }

    //Función para delimitar el área
    function poderDibujarArea(xCoordenada,yCoordenada){
        if ((xCoordenada >= 0 && xCoordenada < (3*dimensionCuadrados+5)) && 
            (yCoordenada >=0 && yCoordenada < (dimensionCuadrados+5))) {
            return false;
        } else{
            return true;
        }

    }    

    function capturarMovimientoDelMouse(evento){
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        if (poderDibujarArea(x,y)){
                dibujarCirculos(x,y,colorActivo);
        }
    }

    function seleccionarColor(evento) {
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
        //Cada condición altera el color de la variable colorActivo

        //Comenzamos por la condición del eje Y que es común para todas
        if (y > yCuadrados && y < (yCuadrados + dimensionCuadrados)) {
            if(x > xRojo && x < (xRojo + dimensionCuadrados)) {
                colorActivo = "red";
                console.log(colorActivo);
            } else if (x > xVerde && x < (xVerde + dimensionCuadrados)) {
                colorActivo = "green";
            } else if(x > xAzul && x < (xAzul + dimensionCuadrados)) {
                colorActivo = "blue";
            }            
        }
    }
    pantalla.onmousemove = capturarMovimientoDelMouse;
    pantalla.onmousedown = habilitarDibujar;
    pantalla.onmouseup = deshabilitarDibujar;
    dibujarPaletaColores();
    pantalla.onclick = seleccionarColor;
</script>

</body>
</html>

por MAIRA ALICIA HERNANDEZ OCHOA

| 140.6k xp | 16 posts

08/05/2023

Mi sugerencia seria que, en lugar de usar una coordenada específica para detectar el color seleccionado, podrías utilizar una función que calcule si la posición del mouse está dentro de un rango determinado de píxeles para cada color. Por ejemplo, puedes cambiar la parte que escribiste.

EN LUGAR DE UTILIZAR ESTE

if (x = 50) { colorDelpincel = "red" } else if (x = 100) { colorDelpincel = "green" } else if (x = 150) {

colorDelpincel = "blue"

}

PUEDES UTILIZAR LA SIGUIENTE FUNCION:

function colorSelector(event) {
    var x = event.pageX - pantalla.offsetLeft;
    var y = event.pageY - pantalla.offsetTop;

    if (x >= 0 && x <= 50 && y >= 0 && y <= 50) {
        colorDelpincel = "red";
    } else if (x >= 50 && x <= 100 && y >= 0 && y <= 50) {
        colorDelpincel = "green";
    } else if (x >= 100 && x <= 150 && y >= 0 && y <= 50) {
        colorDelpincel = "blue";
    }
}

por Estudiante

| 60.3k xp | 40 posts

08/05/2023

Creo que el error está aquí

if (x = 50) {
        colorDelpincel = "red"
    }

    else if (x = 100) {
         colorDelpincel = "green"
    }

    else if (x = 150) {

        colorDelpincel = "blue"
    }

Porque allí le estás diciendo si haces clic en el punto 50 entonces será rojo, pero estás poniendo un punto específico 50, o sea tu click debe ser certero en el 50. creo que debes cambiarlo a un rango de espacio o sea x > 0 && x <5 entonces es rojo y así todos.

por Estudiante

| 60.3k xp | 40 posts

08/05/2023

Bueno de esa forma entonces si tu haces click en el rango x del 0 al 50 (que es donde se está tu cuadrado rojo) entonces cojerá el color rojo.