Cache:true ... otro detalle para mejorar el rendimiento gráfico

Si, por ejemplo, utilizas una figura con una gradiente -o sombra- como fondo de un área, es mejor agregar a esa figura el parámetro cache:true, de manera de evitar que el objeto sea re-dibujado con cada cambio que se realiza por encima de él (en el caso de una gradiente, debe volver a recalcular y redibujar cada franja de color que conforma la transición entre los colores... lo que resulta sumamente "caro" en términos de procesamiento).

El código al pie del artículo

Al agregar cache:true se le indica al sistema que debe generar la imagen una vez y guardarla en cache, de esta menera, cuando se realiza un cambio sobre ella, sólo recupera la imagen desde una copia almacenada en memoria (como bytes) y pinta los cambios encima, lo que resulta sumamente rápido y menos "costoso" en ciclos de procesamiento.

En todo caso, no debes utilizar cache:true cuando la imagen va a cambiar con frecuencia, porque esto sólo producirá que sea re-generada con cada cambio, pero además almacenada, lo que da por resultado un proceso mucho más "costoso". El cache:true debe ser utilizado en imágenes que NO cambian frecuentemente.

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.paint.LinearGradient;
import javafx.scene.paint.Stop;
import javafx.animation.Timeline;
import javafx.animation.KeyFrame;
import javafx.scene.effect.DropShadow;

var px:Number;
var py:Number;
Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse:true
    keyFrames : [
        KeyFrame {
            time : 0s
            values: [px=>100, py=>100]
        }
        KeyFrame {
            time : 3s
            canSkip : true
            values: [px=>1180, py=>680]
        }
    ]
}.play();

var angle:Number;
Timeline {
    repeatCount: Timeline.INDEFINITE
    autoReverse:true
    keyFrames : [
        KeyFrame {
            time : 0s
            values: [angle=>0]
        }
        KeyFrame {
            time : 1.5s
            canSkip : true
            values: [angle=>360]
        }
    ]
}.play();

Stage {
    title: "Application title"
    width: 1024
    height: 768
    scene: Scene {
        content: [
            Rectangle {
                cache:true
                x: 0, y: 0
                width: 1280, height: 768
                fill: LinearGradient {
                    startX : 0.0
                    startY : 0.0
                    endX : 1.0
                    endY : 0.0
                    stops: [
                        Stop {
                            color : Color.BLACK
                            offset: 0.0
                        },
                        Stop {
                            color : Color.BLUE
                            offset: 1.0
                        },

                    ]
                }
                effect: DropShadow { offsetX:10, offsetY:10 }
            }
            Rectangle {
                x: bind px, y: bind py
                width: 200, height: 200
                fill: Color.RED
                rotate: bind angle
            }

        ]
    }
}

¿Qué usar? ¿Color o Paint?

Desarrollando el componente de "reloj" (no sé como llamarlo en español, en inglés les dicen Gauge), al incluir la posibilidad que el usuario pueda cambiar el color de fondo del "reloj" me topé con este dilema.... ¿Color o Paint?

Obviamente que yo opté por el Paint en el caso de este componente, porque permite pasar como un parametro a una función no solo un "color", sino una "gradiente" de colores, ya sea radial o lineal.

    public function customBackground(
      color:Paint, effect:Effect):Node {
        Circle {
            centerX: 150,
            centerY: 150
            radius: 135
            fill: bind color
        }
    };

La ventaja de usar Paint es que luego uno puede llamar la función (en el caso de mi componente) con :

background: control2.
    customBackground(Color.DARKBLUE)

o pasarle una "gradiente":

background: control3.customBackground(
        RadialGradient {
        centerX: 56, centerY: 56
        focusX: 0.1, focusY: 0.1
        radius: 103
        proportional: false
        stops: [
            Stop {
                color: Color.WHITE
                offset: 0.0
            },
            Stop {
                color: Color.DARKRED
                offset: 1.0
            }
        ]
    })

lo que permite mayor personalización....

Es un detalle menor, pero al menos es bueno tener presente que existe la opción, especialmente si se están desarrollando componentes y se desea dar flexibilidad a quienes los utilicen.