JavaFx Reflection Effect – Efek Bayangan dengan JavaFx

kali ini saya akan menunjukkan, bagamaina membuat effect bayangan pada sebuah objek dengan menggunakan JavaFx. sebagai contoh, saya ingin menampilkan efek bayangan pada sebuah obyek Rectangle.

/*
 * RectReflection.fx
 *
 * Created on 03 Mar 09, 21:58:29
 */
package flower;

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.scene.effect.*;

/**
 * @author Hakim
 */

Stage {
    title: "Reflection sample"
    width: 200
    height: 190
    scene: Scene {
        content: Rectangle {
            effect: Reflection { fraction: 0.7
            }
            x: 10, 
            y: 10
            width: 140, 
            height: 90
            fill: Color.BLUE
        }
    }
}

untuk menampilkan efek bayangan, yang diperlukan hanyalah menambahkan potongan kode ini (kelas Reflection ada pada package javafx.scene.effect) :

effect: Reflection { fraction: 0.7
            }

dan jadilah efek bayangan:
Rectangle Reflection

dengan cara yang sama, kita juga bisa menampilkan efek bayangan pada gambar seperti ini:
Cute Kittens Cups
ups!, so cute :) hehehe….

source codenya:

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.effect.*;
import javafx.scene.image.ImageView;
import javafx.scene.image.Image;

/**
 * @author Hakim
 */
def imgurl: String = "file:///D:/Users/Hakim/Pictures/kittens-cups.jpg";
Stage {
    title: "Reflection sample"
    width: 450
    height: 310
    scene: Scene {
        content: ImageView {
                effect: Reflection {
                    fraction: 0.75
                    topOffset: 0.0
                    topOpacity: 0.5
                    bottomOpacity: 0.0
                }
            image: Image {
                url: imgurl
            }
            x: 112
            fitWidth: 225
            preserveRatio: true
            smooth: true
            cache: true
        }
        fill: Color.BLACK
    }
}

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s