2 Replies Latest reply on Dec 7, 2010 2:39 AM by darrylburke

    RadialGradient => focusX and focusY

    s3a
      Could someone please explain to me in RadialGradient how focusX and focusY work exactly please? It has me very confused. The tutorials online don't explain in enough detail. What do the values for focusX and focusY do? Their changes are relative to what? The shape or the gradient? (etc).

      Any input would be greatly appreciated!
      Thanks!
        • 1. Re: RadialGradient => focusX and focusY
          darrylburke
          Best way to understand is to change the values of <tt>focusX</tt> and <tt>focusY</tt> and observe the difference. Then read the API again, it's actually quite expressive once you understand the terminology.

          Crude test rig:
          import javafx.stage.Stage;
          import javafx.scene.Scene;
          import javafx.scene.paint.Color;
          import javafx.scene.paint.RadialGradient;
          import javafx.scene.paint.Stop;
          import javafx.scene.shape.Circle;
          import javafx.scene.control.Slider;
          
          def sliderX = Slider {
                    min: 0
                    max: 200
                    value: 100
                    translateX: 50
                    translateY: 250
                    width: 200
                  };
          def sliderY = Slider {
                    min: 0
                    max: 200
                    value: 100
                    translateX: 250
                    translateY: 50
                    height: 200
                    vertical: true
                  };
          var paint;
          var tmp = bind sliderX.value + sliderY.value on replace {
                    paint = RadialGradient {
                      centerX: 75
                      centerY: 75
                      focusX: sliderX.value + 50
                      focusY: sliderY.value + 50
                      radius: 200
                      proportional: false
                      stops: [
                        Stop {
                          offset: 0.1
                          color: Color.BLUE
                        },
                        Stop {
                          offset: 0.9
                          color: Color.GOLD
                        }
                      ]
                    };
                  };
          
          Stage {
            title: "RadialGradientFocus"
            scene: Scene {
              width: 300
              height: 300
              content: [
                Circle {
                  centerX: 150,
                  centerY: 150
                  radius: 100
                  fill: bind paint
                },
                sliderX,
                sliderY
              ]
            }
          }
          Their changes are relative to what? The shape or the gradient?
          That depends on whether <tt>proportional</tt> is true or false. Play with it and learn.

          db
          • 2. Re: RadialGradient => focusX and focusY
            darrylburke
            So, is your question answered or not?

            db