Arvind@Sun
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!
Posted at 09:09AM Jun 05, 2008 by arvindsrinivasan in JavaFX | Comments[1]
Nice examples! I currently porting my old javafX sample to the preview SDK and I got this problem.
Posted by anonymous on October 16, 2008 at 05:35 AM PDT #