Javafx Multiple Effect

Kali ini saya ingin kembali membahas effect pada node di javafx. Jika anda telah membaca postingan saya sebelumnya maka anda dapat melihat kita bisa memberikan effect pada sebuah node dengan mudah. Berbeda dengan postingan sebelumnya, kali ini hendak menunjukkan kepada anda, bagaimana memberikan lebih dari satu effect pada sebuah objek.

untuk mempermudah, saya menggunakan objek gambar sebagai contoh (pada dasarnya anda bisa menggunakan objek selain gambar untuk diberi effect), dan menerapkan dua effect yaitu efek bayangan dan sephia.

cara 1:

/*
 * Multiplefx.fx
 *
 * Created on 01 Jun 09, 6:39:36
 */

package testareafx;

import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.effect.SepiaTone;
import javafx.scene.Group;
import javafx.scene.effect.Reflection;
import javafx.stage.Stage;
import javafx.scene.Scene;

/**
 * @author Hakim
 */

def img = ImageView {
    image: Image {
        url: "{__DIR__}butterfly.jpg"
    }

    effect: SepiaTone {
        level: 0.5
    }
}

def group = Group{
    content: img;
    effect: Reflection {
        fraction: 0.5
        topOffset: 0.0
        topOpacity: 0.5
        bottomOpacity: 0.0
    }
}

Stage {
    title : "Multiple Effect"
    scene: Scene {
        width: 500
        height: 500
        content: group
    }
}

cara 2:

/*
* Multiplefx.fx
*
* Created on 01 Jun 09, 6:39:36
*/

package testareafx;

import javafx.scene.image.ImageView;
import javafx.scene.image.Image;
import javafx.scene.effect.SepiaTone;
import javafx.scene.Group;
import javafx.scene.effect.Reflection;
import javafx.stage.Stage;
import javafx.scene.Scene;

/**
* @author Hakim
*/

def img = ImageView {
image: Image {
url: "{__DIR__}butterfly.jpg"
}

effect: SepiaTone {
level: 0.5
input: Reflection {
fraction: 0.5
topOffset: 0.0
topOpacity: 0.5
bottomOpacity: 0.0
};
}
}

def group = Group{
content: img;
}

Stage {
title : "Multiple Effect"
scene: Scene {
width: 500
height: 500
content: group
}
}

hasilnya adalah:

multiple effect

gambar paling kiri adalah gambar asli, gambar di tengah adalah multiple effect dengan cara 1 dan gambar paling kanan adalah setelah diterapkan dengan cara 2.

cara pertama, effect sephia hanya diterapkan pada gambar, sedangkan cara kedua, reflection menjadi input pada efek sephia, sehingga keduanya (gambar asli maupun bayangannya) akan mendapat efect sephia.

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