JavaFX - Colores

Para aplicar colores a una aplicación, JavaFX proporciona varias clases en el paquete javafx.scene.paintpaquete. Este paquete contiene una clase abstracta llamada Paint y es la clase base de todas las clases que se utilizan para aplicar colores.

Con estas clases, puede aplicar colores en los siguientes patrones:

  • Uniform - En este patrón, el color se aplica uniformemente en todo el nodo.

  • Image Pattern - Esto le permite llenar la región del nodo con un patrón de imagen.

  • Gradient- En este patrón, el color aplicado al nodo varía de un punto a otro. Tiene dos tipos de gradientes a saberLinear Gradient y Radial Gradient.

Todas esas clases de nodos a las que puede aplicar color, como Shape, Text (incluido Scene), tienen métodos llamados setFill() y setStroke(). Estos ayudarán a establecer los valores de color de los nodos y sus trazos, respectivamente.

Estos métodos aceptan un objeto de tipo Paint. Por lo tanto, para crear cualquiera de estos tipos de imágenes, debe crear una instancia de estas clases y pasar el objeto como parámetro a estos métodos.

Aplicar color a los nodos

Para establecer un patrón de color uniforme en los nodos, debe pasar un objeto de la clase color al setFill(), setStroke() métodos de la siguiente manera:

//Setting color to the text 
Color color = new Color.BEIGE 
text.setFill(color); 

//Setting color to the stroke 
Color color = new Color.DARKSLATEBLUE 
circle.setStroke(color);

En el bloque de código anterior, estamos usando las variables estáticas de la clase de color para crear un objeto de color.

De la misma manera, también puede usar los valores RGB o el estándar HSB de coloración o códigos hash web de colores como se muestra a continuación:

//creating color object by passing RGB values 
Color c = Color.rgb(0,0,255);   

//creating color object by passing HSB values
Color c = Color.hsb(270,1.0,1.0);  

//creating color object by passing the hash code for web 
Color c = Color.web("0x0000FF",1.0);

Ejemplo

A continuación se muestra un ejemplo que demuestra cómo aplicar color a los nodos en JavaFX. Aquí, estamos creando un círculo y nodos de texto y les aplicamos colores.

Guarde este código en un archivo con el nombre ColorExample.java.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.paint.Color; 
import javafx.stage.Stage; 
import javafx.scene.shape.Circle; 
import javafx.scene.text.Font; 
import javafx.scene.text.Text; 
         
public class ColorExample extends Application { 
   @Override 
   public void start(Stage stage) { 
      //Drawing a Circle 
      Circle circle = new Circle();    
      
      //Setting the properties of the circle 
      circle.setCenterX(300.0f); 
      circle.setCenterY(180.0f); 
      circle.setRadius(90.0f); 
       
      //Setting color to the circle 
      circle.setFill(Color.DARKRED);    
      
      //Setting the stroke width 
      circle.setStrokeWidth(3); 
      
      //Setting color to the stroke  
      circle.setStroke(Color.DARKSLATEBLUE);
      
      //Drawing a text 
      Text text = new Text("This is a colored circle"); 
      
      //Setting the font of the text 
      text.setFont(Font.font("Edwardian Script ITC", 50)); 
      
      //Setting the position of the text 
      text.setX(155); 
      text.setY(50); 
       
      //Setting color to the text 
      text.setFill(Color.BEIGE); 
      text.setStrokeWidth(2); 
      text.setStroke(Color.DARKSLATEBLUE); 
         
      //Creating a Group object  
      Group root = new Group(circle, text); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Color Example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compile y ejecute el archivo java guardado desde el símbolo del sistema utilizando los siguientes comandos.

Javac ColorExample.java 
java ColorExample

Al ejecutarse, el programa anterior genera una ventana JavaFX de la siguiente manera:

Aplicar un patrón de imagen a los nodos

Para aplicar un patrón de imagen a los nodos, cree una instancia del ImagePattern clase y pasar su objeto a la setFill(), setStroke() métodos.

El constructor de esta clase acepta seis parámetros, a saber:

  • Image - El objeto de la imagen con el que desea crear el patrón.

  • x and y - Variables dobles que representan las coordenadas (x, y) de origen del rectángulo de anclaje.

  • height and width - Variables dobles que representan la altura y el ancho de la imagen que se utiliza para crear un patrón.

  • isProportional- Esta es una variable booleana; al establecer esta propiedad en verdadero, las ubicaciones de inicio y finalización se establecen para ser proporcionales.

ImagePattern radialGradient = new ImagePattern(dots, 20, 20, 40, 40, false);

Ejemplo

A continuación se muestra un ejemplo que demuestra cómo aplicar un patrón de imagen a los nodos en JavaFX. Aquí, estamos creando un círculo y un nodo de texto y les aplicamos un patrón de imagen.

Guarde este código en un archivo con nombre ImagePatternExample.java.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.image.Image; 

import javafx.scene.paint.Color; 
import javafx.scene.paint.ImagePattern; 
import javafx.scene.paint.Stop; 

import javafx.stage.Stage; 
import javafx.scene.shape.Circle; 
import javafx.scene.text.Font; 
import javafx.scene.text.Text; 
         
public class ImagePatternExample extends Application { 
   @Override 
   public void start(Stage stage) {           
      //Drawing a Circle 
      Circle circle = new Circle();    
      
      //Setting the properties of the circle 
      circle.setCenterX(300.0f); 
      circle.setCenterY(180.0f); 
      circle.setRadius(90.0f); 
       
      //Drawing a text 
      Text text = new Text("This is a colored circle"); 
      
      //Setting the font of the text 
      text.setFont(Font.font("Edwardian Script ITC", 50)); 
      
      //Setting the position of the text
      text.setX(155); 
      text.setY(50); 
       
      //Setting the image pattern 
      String link = "https://encrypted-tbn1.gstatic.com" 
         + "/images?q=tbn:ANd9GcRQub4GvEezKMsiIf67U" 
         + "rOxSzQuQ9zl5ysnjRn87VOC8tAdgmAJjcwZ2qM";       
      
      Image image = new Image(link); 
      ImagePattern radialGradient = new ImagePattern(image, 20, 20, 40, 40, false); 
       
      //Setting the linear gradient to the circle and text 
      circle.setFill(radialGradient); 
      text.setFill(radialGradient); 
         
      //Creating a Group object  
      Group root = new Group(circle, text); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Image pattern Example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   } 
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compile y ejecute el archivo java guardado desde el símbolo del sistema utilizando los siguientes comandos.

Javac ImagePatternExample.java 
java ImagePatternExample

Al ejecutarse, el programa anterior genera una ventana JavaFX de la siguiente manera:

Aplicar patrón de degradado lineal

Para aplicar un patrón de degradado lineal a los nodos, cree una instancia del LinearGradient clase y pasar su objeto a la setFill(), setStroke() métodos.

El constructor de esta clase acepta cinco parámetros, a saber:

  • startX, startY - Estas propiedades dobles representan las coordenadas xey del punto inicial del gradiente.

  • endX, endY - Estas propiedades dobles representan las coordenadas xey del punto final del gradiente.

  • cycleMethod - Este argumento define cómo se deben rellenar las regiones fuera de los límites del degradado de color, definidas por los puntos inicial y final.

  • proportional- Esta es una variable booleana; al establecer esta propiedad entrue, las ubicaciones de inicio y finalización se establecen en una proporción.

  • Stops - Este argumento define los puntos de parada de color a lo largo de la línea de degradado.

//Setting the linear gradient 
Stop[] stops = new Stop[] { 
   new Stop(0, Color.DARKSLATEBLUE),  
   new Stop(1, Color.DARKRED)
};  
LinearGradient linearGradient = 
   new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops);

Ejemplo

A continuación se muestra un ejemplo que demuestra cómo aplicar un patrón de degradado a los nodos en JavaFX. Aquí, estamos creando un círculo y nodos de texto y les aplicamos un patrón de degradado lineal.

Guarde este código en un archivo con nombre LinearGradientExample.java.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 

import javafx.scene.paint.Color; 
import javafx.scene.paint.CycleMethod; 
import javafx.scene.paint.LinearGradient; 
import javafx.scene.paint.Stop; 

import javafx.stage.Stage; 
import javafx.scene.shape.Circle; 
import javafx.scene.text.Font; 
import javafx.scene.text.Text; 
         
public class LinearGradientExample extends Application { 
   @Override 
   public void start(Stage stage) {           
      //Drawing a Circle 
      Circle circle = new Circle();    
      
      //Setting the properties of the circle 
      circle.setCenterX(300.0f);  
      circle.setCenterY(180.0f); 
      circle.setRadius(90.0f); 
      
      //Drawing a text 
      Text text = new Text("This is a colored circle"); 
      
      //Setting the font of the text 
      text.setFont(Font.font("Edwardian Script ITC", 55)); 
      
      //Setting the position of the text 
      text.setX(140); 
      text.setY(50); 
       
      //Setting the linear gradient 
      Stop[] stops = new Stop[] { 
         new Stop(0, Color.DARKSLATEBLUE),  
         new Stop(1, Color.DARKRED)
      };  
      LinearGradient linearGradient = 
         new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops); 
       
      //Setting the linear gradient to the circle and text 
      circle.setFill(linearGradient); 
      text.setFill(linearGradient); 
         
      //Creating a Group object  
      Group root = new Group(circle, text); 
         
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("Linear Gradient Example"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }      
   public static void main(String args[]){ 
      launch(args); 
   } 
}

Compile y ejecute el archivo java guardado desde el símbolo del sistema utilizando los siguientes comandos.

Javac LinearGradientExample.java 
java LinearGradientExample

Al ejecutarse, el programa anterior genera una ventana JavaFX de la siguiente manera:

Aplicar patrón de degradado radial

Para aplicar un patrón de degradado radial a los nodos, cree una instancia del GradientPattern clase y pasar su objeto a la setFill(), setStroke() métodos.

El constructor de esta clase acepta algunos parámetros, algunos de los cuales son:

  • startX, startY - Estas propiedades dobles representan las coordenadas xey del punto inicial del gradiente.

  • endX, endY - Estas propiedades dobles representan las coordenadas xey del punto final del gradiente.

  • cycleMethod - Este argumento define cómo las regiones fuera de los límites del degradado de color están definidas por los puntos inicial y final y cómo deben rellenarse.

  • proportional- Esta es una variable booleana; al establecer esta propiedad entrue las ubicaciones de inicio y finalización se establecen en una proporción.

  • Stops - Este argumento define los puntos de parada de color a lo largo de la línea de degradado.

//Setting the radial gradient 
Stop[] stops = new Stop[] { 
   new Stop(0.0, Color.WHITE),  
   new Stop(0.3, Color.RED), 
   new Stop(1.0, Color.DARKRED) 
};        

RadialGradient radialGradient = 
   new RadialGradient(0, 0, 300, 178, 60, false, CycleMethod.NO_CYCLE, stops);

Ejemplo

A continuación se muestra un ejemplo que demuestra cómo aplicar un patrón de gradiente radial a los nodos en JavaFX. Aquí, estamos creando un círculo y nodos de texto y les aplicamos un patrón de degradado.

Guarde este código en un archivo con el nombre RadialGradientExample.java.

import javafx.application.Application; 
import javafx.scene.Group; 
import javafx.scene.Scene; 

import javafx.scene.paint.Color; 
import javafx.scene.paint.CycleMethod; 
import javafx.scene.paint.RadialGradient;  
import javafx.scene.paint.Stop; 

import javafx.stage.Stage; 
import javafx.scene.shape.Circle; 
import javafx.scene.text.Font; 
import javafx.scene.text.Text;   

public class RadialGradientExample extends Application {  
   @Override 
   public void start(Stage stage) { 
      //Drawing a Circle 
      Circle circle = new Circle(); 
      
      //Setting the properties of the circle 
      circle.setCenterX(300.0f); 
      circle.setCenterY(180.0f); 
      circle.setRadius(90.0f);  
      
      //Drawing a text 
      Text text = new Text("This is a colored circle"); 
      
      //Setting the font of the text 
      text.setFont(Font.font("Edwardian Script ITC", 50)); 
      
      //Setting the position of the text 
      text.setX(155); 
      text.setY(50);  
      
      //Setting the radial gradient 
      Stop[] stops = new Stop[] { 
         new Stop(0.0, Color.WHITE),  
         new Stop(0.3, Color.RED), 
         new Stop(1.0, Color.DARKRED) 
      };        
      RadialGradient radialGradient = 
         new RadialGradient(0, 0, 300, 178, 60, false, CycleMethod.NO_CYCLE, stops);  
      
      //Setting the radial gradient to the circle and text 
      circle.setFill(radialGradient); 
      text.setFill(radialGradient);  
      
      //Creating a Group object  
      Group root = new Group(circle, text);  
      
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300); 
      
      //Setting title to the Stage 
      stage.setTitle("Radial Gradient Example");  
      
      //Adding scene to the stage 
      stage.setScene(scene);  
      
      //Displaying the contents of the stage 
      stage.show(); 
   }
   public static void main(String args[]) { 
      launch(args); 
   } 
}

Compile y ejecute el archivo java guardado desde el símbolo del sistema utilizando los siguientes comandos.

Javac RadialGradientExample.java 
java RadialGradientExample

Al ejecutarse, el programa anterior genera una ventana JavaFX de la siguiente manera: