Phần 8 (tt) : Hiệu ứng - Effect
16. BlendMode :
BlendMode được gọi là "chế độ hòa trộn màu sắc" dành cho image, shape,...Trong BlendMode định nghĩa các hằng số, mỗi hằng số đại diện cho một chế độ hòa trộn màu sắc khác nhau (trong phần này chúng tôi có sử dụng một số định nghĩa từ vietdesigner.net để miêu tả các hằng số). Chúng ta có thể chia các hằng số này theo 5 nhóm :
- Nhóm Darkening : làm tối hoặc chỉnh sửa input bị chói sáng.
- Nhóm Lighting : làm sáng hoặc dùng để sửa input thiếu sáng
- Nhóm Contrasting : kết hợp Darkening và lighting để hiệu chỉnh độ tương phản của input
- Nhóm Compare : căn chỉnh và so sánh sự khác nhau giữa 2 input.
- Nhóm khác : chứa các chế độ BlendMode còn lại.
a. Cách sử dụng BlendMode :
Có 2 cách sử dụng BlendMode :
- Cách 1 : sử dụng phương thức setEffect() của đối tượng Group với tham số đầu vào là một đối tượng Blend. Cách 1 có 2 trường hợp :
+ TH1 : input là đối tượng Shape.
+ TH2 : input là đối tượng Effect.
- Cách 2 : sử dụng phương thức setBlendMode() của đối tượng Shape.
Hai cách trên cho kết quả khác nhau:
- Đối với cách 1:
+ TH1 : Nếu Group chứa ít nhất 2 Shape, Shape nằm chồng lên được xem là top, Shape nằm dưới được xem là bottom. Hiệu ứng blend sẽ tác động đến cả 2 input, kể cả phần không chồng lấp.
+ TH2 : Trong trường hợp này hiệu ứng Blend chỉ tác động đến phần chồng lấp, phần không chồng lấp hiệu ứng Blend không tác động đến.
- Sử dụng cách 2, chỉ tác động đến input mà sử dụng hiệu ứng Blend. Input này được xem là top, những gì nằm bên dưới nó đều được xem là bottom.
- Khi bạn sử dụng BlendMode thuộc nhóm Darkening, Lighting, Contrasting, Compare thì kết quả cách 1-TH2 giống với cách 2 nhưng chỉ giống phần chồng lấp. Bởi cách 1-TH2 hiệu ứng Blend không tác động đến phần không chồng lấp, còn cách 2 hiệu ứng Blend tác động luôn lên input phần không chồng lấp.
Ví dụ : Sử dụng hiệu ứng Blend với BlendMode là Color_Burn để hòa trộn 2 image :
- Dùng cách 1 – TH1, Code :
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.Blend;
import javafx.scene.effect.BlendMode;
import javafx.scene.image.Image;
import javafx.scene.paint.ImagePattern;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class exampleBlend2 extends Application {
public void start(Stage primaryStage) {
// Tạo đối tượng Blend
Blend blend = new Blend(BlendMode.COLOR_BURN);
// Tạo Bottom input
Rectangle rectangle = new Rectangle(60, 20, 300, 200);
Image image = new Image("graphics/background.jpg");
rectangle.setFill(new ImagePattern(image));
// Tạo Top input
Rectangle rectangle1 = new Rectangle(80, 40, 80, 60);
Image image1 = new Image("graphics/moon.jpg");
rectangle1.setFill(new ImagePattern(image1));
Group root = new Group();
// Sử dụng hiệu ứng Blend trên Group qua phương thức setEffect()
root.setEffect(blend);
root.getChildren().add(rectangle);
root.getChildren().add(rectangle1);
Scene scene = new Scene(root, 440, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
|
Kết quả :
+ 
= 
- Dùng cách 1- TH2 : bạn xem lại ví dụ trong phần 15 – hiệu ứng Blend
- Dùng cách 2, code :
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.Blend;
import javafx.scene.effect.BlendMode;
import javafx.scene.image.Image;
import javafx.scene.paint.ImagePattern;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class exampleBlend2 extends Application {
public void start(Stage primaryStage) {
// Tạo Bottom Input
Rectangle rectangle = new Rectangle(60, 20, 300, 200);
Image image = new Image("graphics/background.jpg");
rectangle.setFill(new ImagePattern(image));
// Tạo Top Input
Rectangle rectangle1 = new Rectangle(80, 40, 80, 60);
Image image1 = new Image("graphics/moon.jpg");
rectangle1.setFill(new ImagePattern(image1));
// Sử dụng hiệu ứng Blend trên Top Input qua phương thức setBlendMode()
rectangle1.setBlendMode(BlendMode.COLOR_BURN);
Group root = new Group();
root.getChildren().add(rectangle);
root.getChildren().add(rectangle1);
Scene scene = new Scene(root, 440, 250);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
public static void main(String[] args) {
launch(args);
}
}
|
Kết quả :
+ = 
Ghi chú :
- Image làm bottom input được lấy từ nguồn: http://www.hdwallpapers.in/walls/abstract_color_background_picture_8016-wide.jpg
- Image làm top input được lấy từ nguồn : http://dreamatico.com/moon.html
b. Nhóm Darkening : dùng để làm tối image
Hằng số
|
Miêu tả
|
LIGHTEN
|
- Sử dụng phương thức setEffect() :
+ Input là shape : không có tác dụng.
+ Input là Effect: tương tự sử dụng phương thức setBlendMode() trên top input, nhưng chỉ phần chồng lấp nhau.
- Sử dụng phương thức setBlendMode() trên top input: hiệu ứng blend sẽ so sánh pixel của background, pixel nào tối hơn sẽ được giữ lại.
+  = 
(background : có thể là scene, image, shape,…làm hình nền )
|
MULTIPLY
|
- Sử dụng phương thức setEffect() :
+ Input là shape : làm tối lại cả top và bottom input. Màu đen được giữ nguyên
+ = 
+ Input là Effect: tương tự sử dụng phương thức setBlendMode() trên top input, nhưng chỉ phần chồng lấp nhau.
- Sử dụng phương thức setBlendMode() trên top input : pixel màu tối được giữ lại. Pixel màu sáng được pha trộn thành màu background
+ =  |
COLOR_BURN
|
- Sử dụng phương thức setEffect() :
+ Input là shape : màu tối của bottom input được thay thế bằng màu tối của top input. Màu sáng của top và bottom input được giữ nguyên.
+ =
+ Input là Effect: tương tự sử dụng phương thức setBlendMode() trên top input, nhưng chỉ phần chồng lấp nhau.
- Sử dụng phương thức setBlendMode() : màu tối được giữ nguyên, màu sáng của input được thay thế bằng màu tối của background
+ = |
c. Nhóm Lighting : giúp làm sáng image và sửa những image thiếu sáng.
Hằng số
|
Miêu tả
|
DARKEN
|
- Sử dụng phương thức setEffect() :
+ Input là shape : không có tác dụng.
+ Input là Effect: tương tự sử dụng phương thức setBlendMode() trên top input, nhưng chỉ phần chồng lấp nhau.
- Sử dụng phương thức setBlendMode() : ngược lại với DARKEN, so sánh pixel input với background, pixel nào sáng hơn sẽ được giữ lại.
+ =  |
SCREEN
|
- Sử dụng phương thức setEffect() :
+ Input là shape : tăng độ sáng cả top và bottom input. Màu đen được giữ nguyên.
+ = 
+ Input là Effect: tương tự sử dụng phương thức setBlendMode() trên top input, nhưng chỉ phần chồng lấp nhau.
- Sử dụng phương thức setBlendMode() : ngược lại với MULTIPLY, pixel màu sáng được giữ lại. Pixel màu tối được pha trộn thành màu background
+ =  |
ADD
|
- Sử dụng phương thức setEffect() :
+ Input là shape : tăng độ sáng cả top và bottom input. Màu đen được giữ nguyên.
+ = 
+ Input là Effect: tương tự sử dụng phương thức setBlendMode() trên top input, nhưng chỉ phần chồng lấp nhau.
- Sử dụng phương thức setBlendMode() : pixel màu sáng được giữ lại. Pixel màu tối được pha trộn thành màu background
+ =  |
COLOR_DODGE
|
- Sử dụng phương thức setEffect() :
+ Input là shape : tăng màu sáng của bottom và top input. Các màu tối của top và bottom được giữ nguyên.
+ = 
+ Input là Effect: tương tự sử dụng phương thức setBlendMode() trên top input, nhưng chỉ phần chồng lấp nhau.
- Sử dụng phương thức setBlendMode() : pixel màu sáng và màu tối được thay thế bằng màu sáng và màu tối của background.
+ =  |
d. Nhóm Contrasting : là sự kết hợp của lighting và darkening, dùng để tăng độ tương phản cho image, cũng là nhóm blend mode hay dùng nhất :
Hằng số
|
Miêu tả
|
OVERLAY
|
Là sự kết hợp của MULTIPLY và SCREEN, dựa trên màu sắc của bottom input.
- Sử dụng phương thức setEffect() :
+ Input là shape : làm rõ nét độ sáng tối của image
+ = 
+ Input là Effect: tương tự sử dụng phương thức setBlendMode() trên top input, nhưng chỉ phần chồng lấp nhau.
- Sử dụng phương thức setBlendMode() : màu sáng được thay thế bằng màu của background. Màu tối được giữ nguyên
+ =  |
SOFT_LIGHT
|
Là sự kết hợp của LIGHTEN và DARKEN, tương tự như OVERLAY, nhưng hiệu ứng thì nhẹ hơn.
- Sử dụng phương thức setEffect() :
+ Input là shape : làm rõ nét độ sáng tối của image
+ = 
+ Input là Effect: tương tự sử dụng phương thức setBlendMode() trên top input, nhưng chỉ phần chồng lấp nhau.
- Sử dụng phương thức setBlendMode() : màu sáng được thay thế bằng màu của background.
+ =  |
HARD_LIGHT
|
Là sự kết hợp của MULTIPLY và SCREEN, dựa trên màu sắc của bottom input. Thuật toán dành cho HARD_LIGHT thì ngược lại với OVERLAY
- Sử dụng phương thức setEffect() :
+ Input là shape : làm rõ nét độ sáng tối của image
+ = 
+ Input là Effect: tương tự sử dụng phương thức setBlendMode() trên top input, nhưng chỉ phần chồng lấp nhau.
- Sử dụng phương thức setBlendMode() : màu sáng được thay thế bằng màu của background. Màu tối được giữ nguyên
+ =  |
e. Nhóm Compare :
Hằng số
|
Miêu tả
|
DIFFERENCE
|
Màu tối hơn được khấu trừ từ màu sáng hơn của 2 input. Ở chế độ BlendMode này, thứ tự đầu vào không quan trọng, nó có thể được sử dụng để đảo ngược một phần của bottom input, hoặc so sánh 2 image (các pixel bằng nhau sẽ là màu đen).
- Sử dụng phương thức setEffect() :
+ Input là shape :
 + = 
+ Input là Effect: tương tự sử dụng phương thức setBlendMode() trên top input, nhưng chỉ phần chồng lấp nhau.
- Sử dụng phương thức setBlendMode() :
+ =  |
EXCLUSION
|
Các thành phần color từ 2 input được nhân và tăng lên gấp đôi, sau đó được trừ từ tổng các thành phần color của bottom input. Ở chế độ BlendMode này, thứ tự đầu vào không quan trọng, nó có thể được sử dụng để đảo ngược một phần của bottom input. EXCLUSION có thể cho ra kết quả tương tự DIFFERENCE với độ tương phản thấp hơn.
- Sử dụng phương thức setEffect() :
+ Input là shape :
+ = 
+ Input là Effect: tương tự sử dụng phương thức setBlendMode() trên top input, nhưng chỉ phần chồng lấp nhau.
- Sử dụng phương thức setBlendMode() :
+ =  |
f. Các chế độ BlendMode khác:
Hằng số
|
Miêu tả
|
SRC_OVER
|
- Sử dụng phương thức setEffect() :
+ Input là shape : không tác dụng
+ Input là Effect : top input được vẽ bên trên bottom input. Do đó, phần chồng lấp sẽ hiển thị top input.
- Sử dụng phương thức setBlendMode() : không tác dụng
|
SRC_ATOP
|
- Sử dụng phương thức setEffect() :
+ Input là shape : không tác dụng
+ Input là Effect: loại bỏ top input nằm ngoài nằm ngoài bottom input.
- Sử dụng phương thức setBlendMode() : không tác dụng
|
BLUE
|
- Sử dụng phương thức setEffect() :
+ Input là shape : không tác dụng
+ Input là Effect: màu chủ đạo của top input là BLUE, đối với phần chồng lấp : thành phần blue của bottom input được thay thế bằng thành phần blue của top input. Những thành phần khác của color không bị thay đổi.
- Sử dụng phương thức setBlendMode() : không tác dụng
|
GREEN
|
- Sử dụng phương thức setEffect() :
+ Input là shape : không tác dụng
+ Input là Effect: màu chủ đạo của top input là GREEN, đối với phần chồng lấp : thành phần green của bottom input được thay thế bằng thành phần green của top input. Những thành phần khác của color không bị thay đổi.
- Sử dụng phương thức setBlendMode() : không tác dụng
|
RED
|
- Sử dụng phương thức setEffect() :
+ Input là shape : không tác dụng
+ Input là Effect: màu chủ đạo của top input là RED, đối với phần chồng lấp : thành phần red của bottom input được thay thế bằng thành phần red của top input. Những thành phần khác của color không bị thay đổi.
- Sử dụng phương thức setBlendMode() : không tác dụng
|
Không có nhận xét nào:
Đăng nhận xét