### Problems Using LinearGradients in Compiled JavaFX Script?

If you find that the javafx.ui.LinearGradient class in Compiled JavaFX Script is not working, then you are probably running into JFXC-531.

The tutorial demo that was part of the distribution for the interpreted version of the JavaFX language described a linear gradient as a color transition along a line given by two end points. The coordinates of the end points are specified as fractional values between 0 and 1. However, for the values of the startX, startY, endX and endY attributes of the javafx.ui.LinearGradient class (in Compiled JavaFX Script) you will need to specify geometric coordinates and not fractional values between 0 and 1.

The following examples illustrate how you can specify linear gradients in different directions:

 Description JavaFX Image A square that is simply filled with white colour. The (x, y) coordinates (in the Group's coordinate system) of the four corners of the square (starting at the top-left corner and proceeding in a clockwise direction) are (20, 20), (120, 20), (120, 120) and (20, 120) ```import javafx.ui.\*; import javafx.ui.canvas.\*; Canvas { content: Group { transform: Translate { x: 40 y: 20 } content: [ Rect { x: 20 y: 20 height: 100 width: 100 stroke: Color.BLACK strokeWidth: 2 fill: Color.WHITE } ] } };``` The same square filled with a horizontal (left-to-right) linear gradient that transitions from yellow to orange to red. The gradient starts at the top left corner (20, 20) of the square and ends at the top right corner (120, 20). ``` fill: LinearGradient { startX: 20 startY: 20 endX: 120 endY: 20 stops: [ Stop { offset: 0.0 color: Color.YELLOW }, Stop { offset: 0.5 color: Color.ORANGE }, Stop { offset: 1.0 color: Color.RED } ] spreadMethod: SpreadMethod.PAD }``` Horizontal (right-to-left) gradient fill (swap the start and end coordinates) ``` fill: LinearGradient { startX: 120 startY: 20 endX: 20 endY: 20 ``` Vertical (top to bottom) gradient fill ``` fill: LinearGradient { startX: 20 startY: 20 endX: 20 endY: 120 ``` Diagonal (south-west to north-east) gradient fill ``` fill: LinearGradient { startX: 20 startY: 120 endX: 120 endY: 20 ```

I plan on using gradients for drawing some cool JavaFX buttons/icons!

Comments:

Nice examples! I currently porting my old javafX sample to the preview SDK and I got this problem.

Posted by anonymous on October 15, 2008 at 10:35 PM PDT #

Post a Comment:
• HTML Syntax: NOT allowed

arvindsrinivasan

##### Archives
Sun Mon Tue Wed Thu Fri Sat « July 2016 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Today
RSS Atom