JavaFX FillStyle (scene)

1色で塗りつぶし

view plainprint?

1. Rectangle {  
2.     x: 20  
3.     y: 60  
4.     width: 60  
5.     height: 50  
6.     stroke: Color.DARKSLATEGRAY  
7.     fill: Color.CADETBLUE  
8. }  

Rectangle {
    x: 20
    y: 60
    width: 60
    height: 50
    stroke: Color.DARKSLATEGRAY
    fill: Color.CADETBLUE
}

線形グラデーション Liner Gradients

view plainprint?

1. Rectangle {  
2.     x: 20  
3.     y: 60  
4.     width: 60  
5.     height: 50  
6.     stroke: Color.DARKSLATEGRAY  
7.     fill: LinearGradient {  
8.         startX: 0.0  
9.         startY: 0.0  
10.         endX: 1.0  
11.         endY: 0.0  
12.         proportional: true  
13.         stops: [  
14.             Stop { offset: 0.0 color: Color.CADETBLUE },  
15.             Stop { offset: 1.0 color: Color.GOLD}  
16.         ]    
17.     }  
18. }  
19.   
20. Rectangle {  
21.     x: 20  
22.     y: 60  
23.     width: 60  
24.     height: 50  
25.     stroke: Color.DARKSLATEGRAY  
26.     fill: LinearGradient {  
27.         startX: 0.0  
28.         startY: 0.0  
29.         endX: 220.0  
30.         endY: 0.0                             
31.         proportional: false  
32.         stops: [  
33.             Stop { offset: 0.0 color: fill },  
34.             Stop { offset: 1.0 color: alterfill}  
35.         ]    
36.     }  
37. }  

Rectangle {
    x: 20
    y: 60
    width: 60
    height: 50
    stroke: Color.DARKSLATEGRAY
    fill: LinearGradient {
        startX: 0.0
        startY: 0.0
        endX: 1.0
        endY: 0.0
        proportional: true
        stops: [
            Stop { offset: 0.0 color: Color.CADETBLUE },
            Stop { offset: 1.0 color: Color.GOLD}
        ]  
    }
}

Rectangle {
    x: 20
    y: 60
    width: 60
    height: 50
    stroke: Color.DARKSLATEGRAY
    fill: LinearGradient {
        startX: 0.0
        startY: 0.0
        endX: 220.0
        endY: 0.0                           
        proportional: false
        stops: [
            Stop { offset: 0.0 color: fill },
            Stop { offset: 1.0 color: alterfill}
        ]  
    }
}

放射状グラデーション Radial Gradients

view plainprint?

1. Rectangle {  
2.     x: 20  
3.     y: 60  
4.     width: 60  
5.     height: 50  
6.     stroke: Color.DARKSLATEGRAY  
7.     fill:  RadialGradient {    
8.         centerX: 30   
9.         centerY: 70  
10.         radius: 30  
11.         proportional: false  
12.         stops: [    
13.             Stop {offset: 0.0 color: Color.WHITE},   
14.             Stop {offset: 0.5 color: Color.YELLOW},   
15.             Stop {offset: 1.0 color: Color.GOLD}    
16.         ]  
17.     }  
18. }    
19.   
20. Rectangle {  
21.     x: 20  
22.     y: 60  
23.     width: 60  
24.     height: 50  
25.     stroke: Color.DARKSLATEGRAY  
26.     fill:  RadialGradient {    
27.         centerX: 30  
28.         centerY: 70  
29.         radius: 30  
30.         proportional: false  
31.         cycleMethod: CycleMethod.REFLECT     
32.         stops: [    
33.             Stop {offset: 0.0 color: Color.WHITE},   
34.             Stop {offset: 0.5 color: Color.YELLOW},   
35.             Stop {offset: 1.0 color: Color.GOLD}    
36.         ]  
37.     }  
38. }  
39.    
40. Rectangle {  
41.     x: 20  
42.     y: 60  
43.     width: 60  
44.     height: 50  
45.     stroke: Color.DARKSLATEGRAY  
46.     fill:  RadialGradient {    
47.         centerX: 30  
48.         centerY: 70  
49.         radius: 30  
50.         proportional: false  
51.         cycleMethod: CycleMethod.REPEAT     
52.         stops: [    
53.             Stop {offset: 0.0 color: Color.WHITE},   
54.             Stop {offset: 0.5 color: Color.YELLOW},   
55.             Stop {offset: 1.0 color: Color.GOLD}    
56.         ]  
57.     }  
58. }  

Rectangle {
    x: 20
    y: 60
    width: 60
    height: 50
    stroke: Color.DARKSLATEGRAY
    fill:  RadialGradient {  
        centerX: 30 
        centerY: 70
        radius: 30
        proportional: false
        stops: [  
            Stop {offset: 0.0 color: Color.WHITE}, 
            Stop {offset: 0.5 color: Color.YELLOW}, 
            Stop {offset: 1.0 color: Color.GOLD}  
        ]
    }
}  

Rectangle {
    x: 20
    y: 60
    width: 60
    height: 50
    stroke: Color.DARKSLATEGRAY
    fill:  RadialGradient {  
        centerX: 30
        centerY: 70
        radius: 30
        proportional: false
        cycleMethod: CycleMethod.REFLECT   
        stops: [  
            Stop {offset: 0.0 color: Color.WHITE}, 
            Stop {offset: 0.5 color: Color.YELLOW}, 
            Stop {offset: 1.0 color: Color.GOLD}  
        ]
    }
}
 
Rectangle {
    x: 20
    y: 60
    width: 60
    height: 50
    stroke: Color.DARKSLATEGRAY
    fill:  RadialGradient {  
        centerX: 30
        centerY: 70
        radius: 30
        proportional: false
        cycleMethod: CycleMethod.REPEAT   
        stops: [  
            Stop {offset: 0.0 color: Color.WHITE}, 
            Stop {offset: 0.5 color: Color.YELLOW}, 
            Stop {offset: 1.0 color: Color.GOLD}  
        ]
    }
}