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
        }
        ]
    }
};
Square with no gradient fill

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
            }
Square with left-to-right gradient fill

Horizontal (right-to-left) gradient fill (swap the start and end coordinates)

            fill: LinearGradient {
                startX: 120
                startY: 20
                endX: 20
                endY: 20
Square with right-to-left gradient fill

Vertical (top to bottom) gradient fill

            fill: LinearGradient {
                startX: 20
                startY: 20
                endX: 20
                endY: 120
Square with top-to-bottom gradient fill

Diagonal (south-west to north-east) gradient fill

            fill: LinearGradient {
                startX: 20
                startY: 120
                endX: 120
                endY: 20
Square with diagonal gradient fill

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
About

arvindsrinivasan

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
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
   
       
Today