Thứ Ba, 26 tháng 5, 2015

[JavaFX 8] Phần 8 : Hiệu ứng - Effect

Phần 8 : Hiệu ứng - Effect
Ngoài những nét vẽ cơ bản được giới thiệu trong phần trước, JavaFX còn hổ trợ các hiệu ứng đối với hình vẽ được định nghĩa trong gói javafx.scene.effect. Những hiệu ứng này bao gồm :
+ Blend
+ Bloom
+ BoxBlur
+ ColorAdjust
+ ColorInput
+ DisplacementMap
+ DropShadow
+ Effect
+ FloatMap
+ GaussianBlur
+ Glow
+ ImageInput
+ InnerShadow
+ Light
+ Light.Distant
+ Light.Point
+ Light.Spot
+ Lighting
+ MotionBlur
+ PerspectiveTransform
+ Reflection
+ SepiaTone
+ Shadow

I. Giới thiệu Effect :

Effect là một hiệu ứng đồ họa mà chấp nhận một hay nhiều input (đầu vào) và chỉnh sửa nó theo một cách nào đó để cho ra một output (đầu  ra) như mong muốn. Output này được xem như một phần của Scene hoặc trở thành input của 1 effect khác.
Ví dụ :
Image + hiệu ứng Reflection  -> output1
Output1 + hiệu ứng DropShadow -> output2
Trong hiệu ứng thứ nhất Reflection, input là một image. Trong hiệu ứng thứ hai DropShadow, input là kết quả của hiệu ứng thứ nhất. Do đó, bạn lưu ý trong phần này khi gặp thuật ngữ "input", bạn phải hiểu đó là đầu vào của 1 effect, nó có thể là image, shape hoặc là kết quả của 1 hiệu ứng khác. Còn "output" là kết qủa của 1 hiệu ứng.
Code minh họa cho effect trên:
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.DropShadow;
import javafx.scene.effect.Reflection;
import javafx.scene.image.Image;
import javafx.scene.paint.Color;
import javafx.scene.paint.ImagePattern;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class exampleDropShadow extends Application {

   public void start(Stage primaryStage) {

       Rectangle rectangle = new Rectangle(60, 20, 200, 100);
       Image image = new Image("graphics/background.jpg");
       rectangle.setFill(new ImagePattern(image));
  
       // tạo hiệu ứng reflection - ảnh phản xạ
       Reflection reflection = new Reflection();

       // tạo hiệu ứng DropShadow - bóng rơi
       DropShadow dropShadow = new DropShadow(50, Color.BLACK);

      // Hiệu ứng Reflection là input của DropShadow qua phương thức setInput()
      dropShadow.setInput(reflection);
     
      //  thêm hiệu ứng vào rectangle
       rectangle.setEffect(dropShadow);

       Group root = new Group();
       root.getChildren().add(rectangle);

       Scene scene = new Scene(root, 400, 450);

       primaryStage.setTitle("Hello World!");
       primaryStage.setScene(scene);
       primaryStage.show();
   }

   public static void main(String[] args) {
       launch(args);
   }
}
Trong code trên, bạn thấy một effect đều có thể trở thành một input của một effect khác qua phương thức setInput(). Nhưng không phải tất cả các hiệu ứng đều có thể nhận một effect khác làm input như ColorInput, Light...những hiệu ứng này chỉ có thể làm input cho các hiệu ứng khác. Cũng như hiệu ứng Blend có thể nhận cùng lúc 2 effect khác nhau để làm input - đây cũng là effect duy nhất trong gói javafx.scene.effect có thể nhận được 2 effect làm input.
Node – là các thành phần của JavaFX được hổ trợ effect - sử dụng phương thức setEffect() để thực hiện effect trên nó. JavaFX còn hổ trợ effect trên Group.

II. Tìm hiểu các effect trong gói javafx.scene.effect:

1. GaussianBlur :

GaussianBlur là hiệu ứng làm nhòe đi input dựa trên hàm Gaussian. Hiệu ứng nhòe này dựa trên biến radius kiểu double, giá trị radius càng lớn thì input càng nhòe.

a.Các thuộc tính :

Kiểu
Tên thuộc tính
Giá trị mặc định
Miêu tả
Effect
input
null
input dành cho GaussianBlur
DoubleProperty
radius
10.0
giá trị radius

b. Cách sử dụng :

// Tạo đối tượng GaussianBlur với radius mặc định là 10.0
GaussianBlur gaussianBlur = new GaussianBlur();

// Tạo đối tượng GaussianBlur với radius bằng 5
GaussianBlur gaussianBlur = new GaussianBlur(5);

c. Một số phương thức của GaussianBlur :

kiểu trả về
Phương thức
Miêu tả
void
setInput(Effect  value)
Cung cấp input cho GaussianBlur effect, nếu bạn không cung cấp input thì node sẽ là input.
Effect
getInput ()
Trả về input dành cho GaussianBlur.
void
setRadius(double value)
Thiết lập radius -độ nhòe cho GaussianBlur.
double
getRadius ()
Trả về giá trị radius.

2. BoxBlur :

BoxBlur cũng là 1 hiệu ứng làm nhòe nhưng chất lượng kém hơn GaussianBlur.

a. Các thuộc tính :

Kiểu
Tên thuộc tính
Giá trị mặc định
Miêu tả
Effect
input
null
input dành cho GaussianBlur
DoubleProperty
height
5.0
kích thước chiều cao của box được sử dụng để tạo nhòe, giá trị nằm trong khoảng từ 0 -> 255
DoubleProperty
width
5.0
kích thước chiều rộng của box được sử dụng để tạo nhòe, giá trị nằm trong khoảng từ 0 -> 255
IntegerProperty
iterations
1
số lần lặp trung bình, giá trị từ 0 -> 3. Giá trị này càng cao thì hiệu ứng nhòe càng smooth (trơn mượt) hơn.

b. Cách sử dụng :

// Tạo đối tượng GaussianBlur với radius mặc định là 10.0
BoxBlur boxBlur  = new BoxBlur();

// Tạo đối tượng BoxBlur với width = 20, height = 10, iterations=3
BoxBlur boxBlur  = new BoxBlur(20,10,3);

c. Một số phương thức của BoxBlur:

kiểu trả về
Phương thức
Miêu tả
Void
setInput(Effect  value)
Cung cấp input cho BoxBlur effect, nếu bạn không cung cấp input thì node sẽ là input.
Effect
getInput ()
Trả về input dành cho BoxBlur.
Void
setHeigth(double value)
Thiết lập giá trị cho thuộc tính heigth.
Double
getHeigth()
Trả về giá trị của thuộc tính heigh.
Void
setWidth(double value)
Thiết lập giá trị cho thuộc tính Width.
Double
getWidth()
Trả về giá trị của thuộc tính Width.
Void
setIterations(int value)
Thiết lập giá trị cho thuộc tính iterations.
Int
getIterations()
Trả về giá trị của thuộc tính iterations.

3. MotionBlur :

MotionBlur tương tự như GaussianBlur nhưng có hổ trợ thêm thuộc tính angle - góc nhòe.

a.Các thuộc tính :

Kiểu
Tên thuộc tính
Giá trị mặc định
Miêu tả
Effect
input
null
input dành cho GaussianBlur
DoubleProperty
radius
10.0
giá trị radius
DoubleProperty
angle
0
giá trị góc nhòe tính theo độ từ 0 ->360

b. Cách sử dụng :

// Tạo đối tượng MotionBlur với radius mặc định là 10.0
MotionBlur motionBlur  = new MotionBlur();

// Tạo đối tượng MotionBlur với radius = 5 , angle = 25
MotionBlur motionBlur  = new MotionBlur(5,25);

c. Một số phương thức của MotionBlur:

kiểu trả về
Phương thức
Miêu tả
Void
setInput(Effect  value)
Cung cấp input cho MotionBlur effect, nếu bạn không cung cấp input thì node sẽ là input.
Effect
getInput ()
Trả về input dành cho MotionBlur.
Void
setRadius(double value)
Thiết lập giá trị thuộc tính
Double
getRadius ()
Trả về giá trị thuộc tính radius.
Void
setAngle(double value)
Thiết lập giá trị cho thuộc tính angle
Double
getAngle()
Trả về giá trị thuộc tính angle.

Không có nhận xét nào:

Đăng nhận xét