Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Ayuda para delimitar un área de canvas y capturar un evento

JavaScript - Ayuda para delimitar un área de canvas y capturar un evento

Volver
Nuevo Tema
<<>>
 
Vista:

Ayuda para delimitar un área de canvas y capturar un evento

Publicado por Johanna (2 intervenciones) el 01/09/2022 01:32:58
Hola a todos no se si alguien pueda ayudarme con lo siguiente, estoy tratando de crear un mini paint en canvas, mi problema es el siguiente no puedo hacer que no se pueda dibujar sobre la paleta de colores, y no logro resolver como hacer para que se puedan seleccionar los colores que establecí. Mi código es el siguiente
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<canvas width="600" height="400"></canvas>
<br>
<br>
<button><b>Borrar Dibujo</b></button>
 
<script>
 
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 600, 400);
 
    var puedoDibujar = false;
    var x = 0
    var y = 0
    var colores = ["red","green","blue","white","black","pink"];
    var borrar = document.querySelector('button');
    var sizeCuadrados = 40
    var hasta = colores.length * sizeCuadrados //tamaño total de la paleta de colores
    var colorActual = "blue"
    var contador = 0
 
    function dibujarCirculo(evento) {
 
        if(puedoDibujar) {
            var x = evento.pageX - pantalla.offsetLeft;
            var y = evento.pageY - pantalla.offsetTop;
            pincel.fillStyle = colorActual;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * Math.PI);
            pincel.fill();
        }
    }
 
    function habilitarDibujar() {
 
        puedoDibujar = true;
    }
 
    function deshabilitarDibujar() {
 
        puedoDibujar = false;
    }
 
    function dibujarCuadrado(x,y,color){
 
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;
        pincel.fillRect(x,y,sizeCuadrados,sizeCuadrados);
    }
 
    function paletaColores(){
 
        while(x < hasta){
            for(let i=0; i<colores.length;i++){
                dibujarCuadrado(x,y,colores[i]);
                x = x + sizeCuadrados;
                contador ++
            }
        }
    }
 
    function delimitarAreaColores(x,y){
        sizeCuadrados = 40
        hasta = colores.length * sizeCuadrados
        if((coordenadaX >= 0 && coordenadaX < (hasta + 15)) &&
            (coordenadaY >= 0 && coordenadaY < (sizeCuadrados + 15))) {
            return false;
        }
        else {
            return true;
        }
    }
 
    function capturarMovimientoMouse(evento){
 
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
 
        if(delimitarAreaColores(x,y)){
            dibujarCirculo(x,y,colorActual)
        }
    }
 
    function seleccionarColor(evento) {
 
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
 
        //Cada condición altera el color de la variable colorActual
 
        //Comenzamos por la condición del eje Y que es común para todas
        if (y > yCuadrados && y < (yCuadrados + tamanhoCuadrados)) {
 
            if(x > xRojo && x < (xRojo + tamanhoCuadrados)) {
 
                colorActual = "red";
                console.log(colorActual);
 
            } else if (x > xVerde && x < (xVerde + tamanhoCuadrados)) {
 
                colorActual = "green";
 
            } else if(x > xAzul && x < (xAzul + tamanhoCuadrados)) {
 
                colorActual = "blue";
            }
        }
    }
 
 
    function limpiarPantalla(){
 
        var pantalla = document.querySelector('canvas');
        var pincel = pantalla.getContext('2d');
        pincel.clearRect(0,0,600,400);
        pincel.fillStyle = 'lightgrey';
        pincel.fillRect(0, 0, 600, 400);
    }
 
    function pantallaPrincipal(){
        x = 0
        y = 0
        colores = ["red","green","blue","white","black","pink"];
        sizeCuadrados = 40
        hasta = colores.length * sizeCuadrados;
        limpiarPantalla();
        paletaColores();
    }
 
 
 
    paletaColores();
    pantalla.onmousemove = dibujarCirculo;
 
    pantalla.onmousedown = habilitarDibujar;
 
    pantalla.onmouseup = deshabilitarDibujar;
 
    borrar.onclick = pantallaPrincipal;
 
    pantalla.onclick = seleccionarColor;
 
 
 
</script>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Ivan

Ayuda para delimitar un área de canvas y capturar un evento

Publicado por Ivan (118 intervenciones) el 01/09/2022 12:51:53
Hola,

una forma fácil de hacerlo sería poner el panel de "controles" fuera del <canvas>, por ejemplo encima o a un lado.

El ratón puede interactuar fácilmente con esta área y dejar el <canvas> sólo para dibujar.

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Ayuda para delimitar un área de canvas y capturar un evento

Publicado por Johanna (2 intervenciones) el 02/09/2022 06:33:43
Gracias por tu idea ahi pude resolver lo de delimitar el área para que no se dibuje sobre la paleta de colores, lo que aun no pude optimizar es el hecho de cuando haga click en los cuadrados de colores se seleccione ese color sin tener que poner tantos else if jajaja .... dejo mi código actualizado por si a alguien se le ocurre como optimizar esa parte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<canvas width="600" height="400"></canvas>
<br>
<br>
<button><b>Borrar Dibujo</b></button>
 
<script>
 
    var pantalla = document.querySelector('canvas');
    var pincel = pantalla.getContext('2d');
    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0, 0, 600, 400);
 
    var puedoDibujar = false;
    var x = 0
    var y = 0
    var colores = ["red","green","blue","white","black","pink"];
    var borrar = document.querySelector('button');
    var sizeCuadrados = 40
    var hasta = colores.length * sizeCuadrados //tamaño total de la paleta de colores
    var colorActual = colores[2]
 
    function dibujarCirculo(x,y,colorActual) {
 
        if(puedoDibujar) {
 
            pincel.fillStyle = colorActual;
            pincel.beginPath();
            pincel.arc(x, y, 5, 0, 2 * Math.PI);
            pincel.fill();
        }
    }
 
    function habilitarDibujar() {
 
        puedoDibujar = true;
    }
 
    function deshabilitarDibujar() {
 
        puedoDibujar = false;
    }
 
    function dibujarCuadrado(x,y,color){
 
        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");
        pincel.fillStyle = color;
        pincel.fillRect(x,y,sizeCuadrados,sizeCuadrados);
    }
 
    function paletaColores(){
 
        while(x < hasta){
            for(let i=0; i<colores.length;i++){
                dibujarCuadrado(x,y,colores[i]);
                x = x + sizeCuadrados;
            }
        }
    }
 
    function puedeDisenharArea(x,y){
 
        if ((x >= 0 && x < (6*40+5)) &&
            (y >=0 && y < (40+5))) {
 
            return false;
 
        } else{
 
            return true;
        }
    }
 
    function capturarMovimientoMouse(evento){
 
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
 
        if(puedeDisenharArea(x,y)){
 
            dibujarCirculo(x,y,colorActual)
        }
    }
 
    function seleccionarColor(evento) {
 
        var x = evento.pageX - pantalla.offsetLeft;
        var y = evento.pageY - pantalla.offsetTop;
 
        if (y > 0 && y < 40) {
 
            if(x > 0 && x < 40) {
 
                colorActual = colores[0];
 
            } else if (x > 40 && x < 80) {
 
                colorActual = colores[1];
 
            } else if(x > 80 && x < 120) {
 
                colorActual = colores[2];
            } else if (x > 120 && x < 160) {
 
                colorActual = colores[3];
 
            } else if(x > 160 && x < 200) {
 
                colorActual = colores[4];
            } else if(x > 200 && x < 240) {
 
                colorActual = colores[5];
            }
        }
    }
 
 
    function limpiarPantalla(){
 
        var pantalla = document.querySelector('canvas');
        var pincel = pantalla.getContext('2d');
        pincel.clearRect(0,0,600,400);
        pincel.fillStyle = 'lightgrey';
        pincel.fillRect(0, 0, 600, 400);
    }
 
    function pantallaPrincipal(){
        x = 0
        y = 0
        colores = ["red","green","blue","white","black","pink"];
        sizeCuadrados = 40
        hasta = colores.length * sizeCuadrados;
        limpiarPantalla();
        paletaColores();
    }
 
 
    pantalla.onmousemove = capturarMovimientoMouse;
 
    pantalla.onmousedown = habilitarDibujar;
 
    pantalla.onmouseup = deshabilitarDibujar;
 
    paletaColores();
 
    borrar.onclick = pantallaPrincipal;
 
    pantalla.onclick = seleccionarColor;
 
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Ivan

Ayuda para delimitar un área de canvas y capturar un evento

Publicado por Ivan (118 intervenciones) el 02/09/2022 07:33:55
Hola,

la idea es sencilla, fuera del <canvas> tratas a los elementos como HTML normal, por ejmplo el tema del color se puede hacer a través de un formulario (le das estilos CSS a tu gusto al input para convertirlo en un boton)

En JavaScript se puede interactuar muy fácil con un formulario, por ejmplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<body>
<script>
function myColor(ID) {
	var pColor = document.getElementById(ID).value;
    alert(pColor);
}
</script>
  <label>Color:</label>
  <input onchange="myColor(this.id)" type="color" id="favcolor" name="favcolor" value="#ff0000">
</body>
</html>

Al capturar estos valores de formulario luego los aplicas al <canvas>

Un saludo!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar