Lo primero es crear una clase JPanel en la que se dibuje un círculo.
Para dibujar un circulo, necesitamos 4 argumentos:
- posición en el eje de coordenadas x (horizontal)
- posición en el eje de coordenadas y (vertical)
- ancho
- alto
El ancho y el alto lo dejaremos con un valor fijo, pero las coordenadas x e y irán variando a través de los JSlider, así que x e y serán atributos de nuestra clase.
Y tendremos métodos para modificar sus valores, cada vez que se modifique uno de los JSlider.
Esta clase JPanel, no va a contener JSliders, ni método main(), ni nada.
Simplemente va a modelar un panel con un circulo, que mediante dos métodos se irá redibujando en las distintas posiciones x e y que vaya recibiendo.
Hay que darle un tamaño, por ejemplo 500 x 500. El tamaño de este panel influirá luego en los valores máximo de los JSlider, ya que si por ejemplo dan valores que superen estas dimensiones, perderíamos de vista el círculo.
En mi caso, he decidido que el panel tenga el fondo blanco y lo que se dibuje sea una circunferencia (no un círculo) de color rojo.
Además le he puesto un borde biselado para que luego quede un poco más vistoso.
Fíjate que para dibujar la figura, sobreescribimos el método paint().
Los métodos para desplazarla, lo que hacen es modificar los atributos x e y con el nuevo valor y ordenan "repintar" el panel.
Bien, este sería el panel con círculo.
Ahora, en otra clase que será la principal, construiremos un marco con dos JSlider.
El marco podemos maquetarlo con un BorderLayout. Este layout nos distribuye el marco en 5 zonas.
Una zona es la central, que será donde insertaremos nuestro panel con la figura.
Las otras 4 zonas son NORTE (arriba), SUR (abajo), ESTE(derecha) y OESTE(izquierda).
En el sur podemos poner el JSlider que modifique la horizontal, o sea, el eje X
En el este podemos poner el otro Jslider, orientado verticalmente, y será quien modifique el eje Y
Cada JSlider, irá dentro de un JPanel, así que en esta clase, tendremos anidadas otras clases "menores" para modelar estos paneles que serán añadidos al marco principal.
También haremos otro panel central, que a su vez contendrá el panel de la figura.
Se podría haber usado directamente el panel de la figura para poner en el centro, pero usando otro panel "externo", podemos darle un borde vacío de 20 pixeles por cada lado y así queda algo de separación entre paneles y es más bonito.
Este borde vacío, primero probé a ponerselo al panel de la figura, pero entonces la figura se desplazaba por encima del borde vacío y del borde biselado.
Por eso opté por usar otro panel contenedor, así la dimensión extra que ganamos por el borde de 20 píxeles, no afecta al espacio por donde puede moverse la figura.
Los JSlider cada uno , va a tener su propio ChangeListener.
Estos ChangeListener lo que hacen es detectar si los JSlider se están desplazando, en cuyo caso recogerán el valor actual del Jslider para enviárselo al panel de la figura, que con sus métodos hará que la figura se "mueva".
Este sería el código:
Los JSlider requieren cierta configuración para que queden presentables.
Se les pone como limite máximo 450, a pesar de que el panel donde se mueve la figura es de 500, ¿por qué?
Porque a ese límite hay que descontar el ancho y alto que tiene la figura, si no al llegar a los límite se sale del panel.
En mi caso puse que la circunferencia mide 50x50, por eso descontamos 50 pixeles de las dimensiones del panel para establece los máximos.
Al JSlider vertical además hay que pedir que invierta el orden establecido de la regla de medidas que muestra en pantalla.
Como sale por defecto, no coincide con el desplazamiento de Y, entonces cuando incrementas la Y, la figura en lugar de bajar, sube... y queda raro.
Puedes jugar a modificar ese valor para ver como queda de un modo y otro.
Y no hay mucho más que contar.
La lógica es muy sencilla. Cuando un JSlider cambia (ChangeListener) se le envía a los métodos del panel de la figura los nuevos valores X e Y para que redibuje la figura en la nueva posición. Eso es todo.
Abajo adjunto en un zip el código de las dos clases, por si te es más cómodo.
Por favor, no te conformes con obtener el código. Pregunta cualquier cosa que no entiendas.
Un saludo.
Crear cuenta