AYUDA -Hacer click en una zona y que pase algo (aplicación de dibujo)

Español
1 
// menú interfaz
PImage interimg; 

// pinceles cursor
PImage pincel1;
PImage pincel2;
PImage pincel3;
PImage pincel4;
PImage pincel5;
PImage pincel6;
PImage pincel7;
PImage pincel8;
PImage pincel9;
PImage pincel10;

// color y opciones del menú
int []
colorACTUAL= {0,0,0}; 
int opcion;

void setup() {
 
size(554, 550);
smooth (3); //suaviza el trazo de los pinceles
  
// cargar  img interfaz e img del cursor 
interimg = loadImage("interfaz.png");
pincel1 = loadImage("pluma.png");
pincel2 = loadImage("spray.png");
pincel3 = loadImage ("borrador.png");
pincel4 = loadImage ("resaltador.png");
pincel5 = loadImage ("pincel.png");
pincel6 = loadImage ("crayon.png");
pincel7 = loadImage ("rodillo.png");
pincel8 = loadImage ("lapiz.png");
pincel9 = loadImage ("pfuente.png");
pincel10 = loadImage ("pmagico.png");

}

void draw() {
  
background(255);

// cordenadas del menú  //
if(mousePressed==true)
{
// pluma
if(mouseX>20 && mouseY > 16 && mouseY<56)
{ 
opcion = 1;
}
// aerosol        
if(mouseX> 22 && mouseY > 62 && mouseY<100)
    { 
      opcion = 2;
    }
    
// borrador   
if(mouseX>...&& mouseY > ...&& mouseY<...)
    {
      opcion = 3;
    }
 
// resaltador
if(mouseX>... && mouseY > ... && mouseY<...)
    { 
      opcion= 4;
    }

// pincel    
if(mouseX>...&& mouseY > ... && mouseY<...)
    { 
      opcion = 5;
    }

// crayón
if(mouseX>... && mouseY > ... && mouseY<...)
    { 
      opcion= 6;
    }

// rodoillo
if(mouseX>... && mouseY > ... && mouseY<...)
    {
      opcion = 7;
    }
    
// lápiz   
if(mouseX>... && mouseY > ... && mouseY<...)
    {
      opcion = 8;
    }
 
// pluma fuente    
if(mouseX>... && mouseY > ...&& mouseY<...)
    {}
      opcion = 9;
    }
 
// pincel mágico
if(mouseX>...&& mouseY > ... && mouseY..)
    { 
    opcion= 10; 
    }
 
// disquete 
if(mouseX> .. && mouseY > ... && mouseY<...
)
 { opcion= 11;  }
    
  
////////////////////////////////////    
 
 // SCase_cambio de opciones_herramientas & colores
 switch(opcion) 
 
    { 
//pluma
      case 1:
        cursor (pincel1,0,0);
        stroke(2);
        fill(255,89,6);
        rect(0, 0, 30, 30);
      break; 

        // img interfaz
  image (interimg,0,0);

}

Si pongo los valores X e Y tengo que tocar en esas cordenadas exactas para que cambie el cursor. ¿Existe alguna forma de que se pongan valores aproximados?, es decir:
de acá hasta acá se puede hacer click , cambia el cursor y se habilita el uso del pincel.

Abajo dejo una imagen de la interfaz

Sin%20t%C3%ADtulo
Sin título.png770×570 35.6 KB

2

sorry, only english,

i understand that the “drawing tools”
needs to be buttons with pictures.
the buttons need to be of type toggle
more as a option group // only one can be selected…
it should be shown if it ( one ) is selected.

so i just modified a button group like that, using/testing transparent .png files
so still can show the status ( selected / unselected ) via a green blue background color
visible through the tool picture.

that button option group is

  • a array
  • of class

in 2 separate TABs
also there are 2 more, but UNUSED TABs ( slider and old test_main )

more info
http://kll.engineering-news.org/kllfusion01/articles.php?article_id=154#here11b
for download only:
http://kll.engineering-news.org/kllfusion01/downloads/MY_class_picturebuttons.zip

1 Like
3

Thank you so much.
I will try later and post when it works :smiley:

4

Hola! según lo que entendí, necesitas que el cursor pueda seleccionar entre las opciones, con lo cual puedes checar el ejemplo del botón en processing https://processing.org/examples/button.html aquí, aquí estás verificando si te encuentras sobre el área que delimita el rectángulo o la circunferencia, si lo estás, entras a otro if en donde ahora verifica si estás presionando el mouse, y si sí, cambias el color del background.

Ahora respecto a cambiar entre cursor y el pincel. Primero debes de verificar que estás dentro del área de dibujo. por dar un ejemplo. si sí lo estás ahora te preguntas, está el mouse presionado? y bien, si si lo está, ahora haces que dibuje una linea tomando como puntos a la posición actual y a la posición anterior del cursor, sin actualizar el background para que no borres la linea. Y básicamente sería eso.

 if(mouseX > 200 && mouseY > 200 && mouseX < 800 && mouseY < 800){//checas si estás dentro del área de dibujo
  ellipse(mouseX, mouseY, 10, 10);//aparece un circulo cada que estás dentro de la región de dibujo
  if(mousePressed == true) //lo estás, entonces ahora checas si estás presionando el cursor
//bien, ahora si estas condiciones se cumplen, entonces ahora si pones el algoritmo para dibujar la linea

Suerte!

1 Like