I have two plot about data that stored in two separate image. I need to place them in one Image so I can see the difference. How to accomplish this in javaFX?
Solution
Place the two images in a Group and apply a BlendMode by setting the blendMode of the topmost Node.
ImageView bottom = new ImageView(coke);
ImageView top = new ImageView(pepsi);
top.setBlendMode(BlendMode.DIFFERENCE);
Group blend = new Group(
bottom,
top
);
Executable Sample
Take the Pepsi challenge? Can you "spot" the difference?
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.BlendMode;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.stage.Stage;
/** Blend a coke can and a pepsi can to find the difference. */
public class PepsiChallenge extends Application {
@Override
public void start(Stage stage) {
Image coke = new Image(
"http://icons.iconarchive.com/icons/michael/coke-pepsi/256/Coca-Cola-Can-icon.png"
);
Image pepsi = new Image(
"http://icons.iconarchive.com/icons/michael/coke-pepsi/256/Pepsi-Can-icon.png"
);
ImageView bottom = new ImageView(coke);
ImageView top = new ImageView(pepsi);
top.setBlendMode(BlendMode.DIFFERENCE);
Group blend = new Group(
bottom,
top
);
HBox layout = new HBox(10);
layout.getChildren().addAll(
new ImageView(coke),
blend,
new ImageView(pepsi)
);
layout.setPadding(new Insets(10));
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) {
launch();
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With