合并图像以进行叠加 [英] Combine Images for overlay
问题描述
我尝试做类似这篇文章的事情:相关问题
I try to do something similar to this post: related question
现在我尝试组合几个模板。组合模板看起来像预期的那样,但是反转组是黑色或白色,具体取决于创建的组的顺序。结果我得到:
Now I try to combine several stencils. The combined stencil looks as expected, however the inverted group is either black or white, depending on the order of the group created. The result I get:
似乎分组仍然需要孩子的一些混合信息,或者我可能只是不了解混合物的想法。任何想法如何我可以实现叠加,如旧问题,但有几个模板?
It seems that the grouping still takes some Blend-information of the childs, or maybe I just don't get the idea of the blends. Any Idea how I can achieve an overlay as in the old question but with several stencils?
以下是图像:
Here are the images:
package application;
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.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class Main extends Application {
@Override
public void start(Stage stage) {
Image original = new Image(getClass().getResourceAsStream("image.jpg"));
Image stencil1 = new Image(getClass().getResourceAsStream("stencil.jpg"));
Image stencil2 = new Image(getClass().getResourceAsStream("stencil2.jpg"));
Image stencil3 = new Image(getClass().getResourceAsStream("stencil3.jpg"));
ImageView iv = new ImageView(stencil1);
ImageView iv2 = new ImageView(stencil2);
ImageView iv3 = new ImageView(stencil3);
iv2.setBlendMode(BlendMode.ADD);
iv3.setBlendMode(BlendMode.ADD);
Group stencil = new Group();
stencil.getChildren().add(iv);
stencil.getChildren().add(iv2);
stencil.getChildren().add(iv3);
Rectangle whiteRect = new Rectangle(original.getWidth(), original.getHeight());
whiteRect.setFill(Color.WHITE);
whiteRect.setBlendMode(BlendMode.DIFFERENCE);
Group inverted = new Group(stencil, whiteRect);
// display the original, composite image and stencil.
HBox layout = new HBox(10);
layout.getChildren().addAll(new ImageView(original), inverted, stencil);
layout.setPadding(new Insets(10));
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) {
launch();
}
}
推荐答案
我终于弄清楚了自己。诀窍是始终创建ImageView对象的新实例,因为混合模式应用于场景图形直到imageview对象。
这里的代码剪切对我有用:
包应用程序;
I finally figured it out myself. The trick is to create always new instances of the ImageView objects, as the blending modes are applied down the scene-graph 'till the imageview-objects.
here is the code snipped that worked for me:
package application;
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.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;
public class Main extends Application {
private ImageView originalImageView;
private ImageView stencilImageView;
private Image original;
private Image stencil;
private Image stencil2;
private Rectangle whiteRect;
private Group inverted;
private Group overlaidBlack;
private Rectangle redRect;
private Group redStencil;
private Group overlaidRed;
private ImageView stencilImageView2;
private Group to;
private Group to2;
@Override
public void start(Stage stage) {
original = new Image(getClass().getResourceAsStream("image.jpg"));
stencil = new Image(getClass().getResourceAsStream("stencil.jpg"));
stencil2 = new Image(getClass().getResourceAsStream("stencil2.jpg"));
stencilImageView = new ImageView(stencil);
// first invert the stencil so that it is black on white rather than white on black.
whiteRect = new Rectangle(stencil.getWidth(), stencil.getHeight());
whiteRect.setFill(Color.WHITE);
whiteRect.setBlendMode(BlendMode.DIFFERENCE);
stencilImageView2 = new ImageView(stencil2);
stencilImageView2.setBlendMode(BlendMode.ADD);
to = new Group(stencilImageView, stencilImageView2);
ImageView tmpIv = new ImageView(stencil2);
tmpIv.setBlendMode(BlendMode.ADD);
to2 = new Group(new ImageView(stencil), tmpIv);
inverted = new Group(to, whiteRect);
originalImageView = new ImageView(original);
overlaidBlack = new Group(originalImageView, inverted);
inverted.setBlendMode(BlendMode.MULTIPLY);
overlaidBlack = new Group(originalImageView, inverted);
// create a new mask with a red tint (red on black).
redRect = new Rectangle(stencil.getWidth(), stencil.getHeight());
redRect.setFill(Color.RED);
redRect.setBlendMode(BlendMode.MULTIPLY);
redStencil = new Group(to2, redRect);
redStencil.setBlendMode(BlendMode.ADD);
overlaidRed = new Group(overlaidBlack, redStencil);
// display the original, composite image and stencil.
HBox layout = new HBox(10);
layout.getChildren().addAll(new ImageView(original), overlaidRed);
layout.setPadding(new Insets(10));
stage.setScene(new Scene(layout));
stage.show();
}
public static void main(String[] args) {
launch();
}
}
这篇关于合并图像以进行叠加的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!