Javafx Scene Builder Linear Gradient is what

Question

is there any one knows what on earth is the linear gradient?

How Can I use the right panel, especially the four scroll bar, to adjust the fill of the triangle on the left to make the triangle upper half white but down half black?

Is there any document to help train people how to use this? I am really sorry I can not find it.

Thanks in advance!

Answer 1

General info on linear gradients

The linear-gradient documentation is at:

• JavaFX CSS reference.
• It is a w3c color stop form.
• javadoc of how linear gradients work in JavaFX.

Because the linear gradient in JavaFX CSS is the same syntax as w3c CSS, any tutorial on CSS linear gradients returned by google will probably apply to JavaFX CSS.

Feedback email address for JavaFX documentation is: javasedocs_us@oracle.com

Linear Gradients and SceneBuilder

Scene Builder uses FXML to represent linear gradients. It can also use render linear gradients from CSS, though the gradient editor in SceneBuilder works to edit the FXML representation of gradients and not the CSS representation.

Here is a result of loading the following FXML file into SceneBuilder:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.paint.*?>
<?import java.lang.*?>
<?import javafx.scene.shape.*?>

<Polygon xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1">
  <points>
    <Double fx:value="-50.0" />
    <Double fx:value="40.0" />
    <Double fx:value="50.0" />
    <Double fx:value="40.0" />
    <Double fx:value="0.0" />
    <Double fx:value="-60.0" />
  </points>
  <fill>
    <LinearGradient startX="0.5" startY="0" endX="0.5" endY="1">
      <stops>
        <Stop color="WHITE" />
        <Stop color="BLACK" offset="1.0" />
      </stops>
    </LinearGradient>
  </fill>
</Polygon>

Scroll Bar Settings

The scroll bar settings are marking the proportional co-ordinates of the start and end properties of the linear gradient. These co-ordinates from a directional vector (line) along which colors in the linear gradient change according to the defined stops. The bars work as follows:

• left bar: startY
• top bar: startX
• right bar: endY
• bottom bar: endX

For the above fill, it means start at the top center and travel to the bottom center, varying the color from white to black as you go, so it's a straight top to bottom vertical transition.

Discrete Gradients

If you didn't want a smooth gradient, but instead wanted an abrupt one, then add more stops, for example:

<fill>
  <LinearGradient endX="0.5" endY="1" startX="0.5" startY="0">
    <stops>
      <Stop color="WHITE" />
      <Stop color="WHITE" offset="0.5"/>
      <Stop color="BLACK" offset="0.5" />
      <Stop color="BLACK" offset="1.0" />
    </stops>
  </LinearGradient>
</fill>