Home Javafx JavaFX 3D Effect Example
Questions:Ask|Latest

Related Tutorials


 
 

Share on Google+Share on Google+

JavaFX 3D Effect Example

Advertisement
We can create an Object in JavaFX and can give him 3D Effect (like Creating Sphere with Circle and 3D text by blurring Text in background).

JavaFX 3D Effect Example

     

We can create an Object in JavaFX and can give him 3D Effect (like Creating Sphere with Circle and 3D text by blurring Text in background).

To create 3D effect we have to use ?javafx.scene.effect? package.

package javafx3deffect;

import javafx.scene.paint.*;

import javafx.application.*;

import javafx.scene.effect.*;

import javafx.scene.geometry.*;

import javafx.application.Stage;

import javafx.scene.geometry.Circle;

import javafx.scene.paint.Color;

import javafx.animation.Timeline;

import javafx.animation.Interpolator;

import javafx.animation.KeyFrame;

import javafx.ext.swing.Button;

import javafx.input.MouseEvent;

import javafx.scene.text.Text;

import javafx.scene.Font;

import javafx.scene.FontStyle;

/**

* @author Amit

*/

var val:Integer;

var t=Timeline {

repeatCount: Timeline.INDEFINITE

autoReverse:true

keyFrames : [

KeyFrame {

time : 0s

values:val=>0

},KeyFrame {

time : 4s

values:val=>400 tween Interpolator.EASEBOTH

}

]

}

Frame {

title: "Painting Variations"

width: 500

height: 400

closeAction: function() {

java.lang.System.exit( 0 );

}

visible: true

stage: Stage {

content: [

Text {

font: Font {

size: 24

style: FontStyle.PLAIN

}

x: 0, y: 20

content: "HelloWorld"

effect:GaussianBlur{radius:10}

scaleX:3.4

scaleY:3.4

},

Circle {

centerX: bind val, centerY: 40

radius: 60

opacity:0.6

fill: RadialGradient{

centerX:30

centerY:10

radius:30

proportional:false

stops:[

Stop {offset: 0.3 color: Color.GREEN},

Stop {offset: 1.0 color:Color.DARKGREEN }

]

}

onMouseMoved: function( e: MouseEvent ):Void {

t.start();

}

},Text {

font: Font {

size: 24

style: FontStyle.PLAIN

}

x: 10, y: 30

content: "HelloWorld"

fill:RadialGradient{

centerX:60

centerY:30

radius:60

proportional:false

stops:[

Stop {offset: 0.3 color: Color.GREEN},

Stop {offset: 1.0 color:Color.LIGHTGREEN }

]

}

scaleX:3

scaleY:3

}

]

}

}

Output:

Download Full Project

JavaFX Transformation Example

We can create an Object and then can apply transformation on this object as we wish. We can Translate, Scale, Rotate any object.

package javafxtransformation;

import javafx.ext.swing.Label;

import javafx.ext.swing.Canvas;

import javafx.ext.swing.Button;

import javafx.scene.paint.Color;

import javafx.ext.swing.TextField;

import javafx.ext.swing.GridPanel;

import javafx.ext.swing.SwingFrame;

import javafx.ext.swing.FlowPanel;

import javafx.ext.swing.BorderPanel;

import javafx.scene.geometry.Rectangle;

/**

* @author Amit

*/

var rotationValue:Number=10;

var rotationText =TextField {

columns: 5

text: "{rotationValue}"

editable: true

}

var scaleValue:Number=1;

var scaleText =TextField {

columns: 5

text: "{scaleValue}"

editable: true

}

var translateXValue:Number;

var translateXText =TextField {

columns: 3

text: "{translateXValue}"

editable: true

}

var translateYValue:Number;

var translateYText =TextField {

columns: 3

text: "{translateYValue}"

editable: true

}

var translate = GridPanel{

rows:1

columns:4

content:[Label {

text: "X :"

},translateXText,

Label {

text: "Y :"

},translateYText

]

}

SwingFrame {

title: "Transformation"

width: 800

height: 600

closeAction: function() {

java.lang.System.exit( 0 );

}

visible: true

content: BorderPanel {

top: Canvas {

content:Rectangle {

x: 100, y: 50

width: 100, height: 20

fill: Color.GREEN

anchorX:100

anchorY:100

// Rotate

rotate: bind rotationValue

// Scale

scaleX: bind scaleValue

scaleY: bind scaleValue

// Translate

translateX: bind translateXValue

translateY: bind translateYValue

}

}

bottom:GridPanel{

columns:3

rows:3

content: [ Label {

text: "Rotate By :"

}, Label {

text: "Scale By :"

}, Label {

text: "Translate To :"

},rotationText,

scaleText,

translate,

Button {

text: "Rotate"

action: function() {

rotationValue = java.lang.Double.parseDouble(rotationText.text);

}

},Button {

text: "Scale"

action: function() {

scaleValue = java.lang.Double.parseDouble(scaleText.text);

}

},Button {

text: "Translate"

action: function() {

translateXValue=java.lang.Double.parseDouble(translateXText.text);

translateYValue=java.lang.Double.parseDouble(translateYText.text);

}

}]

}

}

}

Output:

Rotating rectangle by 40 degree.

Scale rectangle by 2.

Translate Rectangle according to X-axis and Y-axis position.

Download Full Project

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: September 9, 2008

Related Tutorials

Ask Questions?    Discuss: JavaFX 3D Effect Example   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
DMCA.com