javafx - 在 Javafx 中向剪切图像添加照明效果

Question

我尝试将浮雕效果(也称为凹凸贴图)添加到复杂的剪裁图像中。 (即一 block 拼图。) 这可以通过每个像素的操作来完成，但它非常昂贵:裁剪的确切形式是运行时确定的，因此即使是凹凸贴图也必须在运行时生成。

JavaFX 的光照效果提供了类似的现成效果:

// Create clipping
pieceClip = createPiece(topEdge, leftEdge, bottomEdge, rightEdge);
pieceClip.setFill(Color.WHITE);
pieceClip.setStroke(null);

// Create clipped image view
imageView.setImage(image);
imageView.setClip(pieceClip);

// Create ambient light
Light.Distant light = new Light.Distant();
light.setAzimuth(-135.0);

// Create lighting effect
Lighting lighting = new Lighting();
lighting.setLight(light);
lighting.setSurfaceScale(4.0);

// Create shape to apply lighting on (the shape is the same as the clipping)
Shape pieceStroke1 = createPiece(topEdge, leftEdge, bottomEdge, rightEdge);
pieceStroke1.setFill(new Color(1, 1, 1, 0.4));
pieceStroke1.setStroke(null);

// Apply lighting
pieceStroke1.setEffect(lighting);

// Add clipped image and lighting overlay to the shape
getChildren().addAll(imageView, pieceStroke1);

这个效果差不多，灯光效果:

但是，它有一个副作用:由于叠加层是白色的并且只是半透明的，它会使图像变暗(使其有点模糊，不像以前那么生动)。

我尝试使用 Blend(COLOR_BURN、DARKEN 等)来恢复图像颜色，但由于对这些效果不太熟悉，所以我失败了。

如何保留我的图像色彩饱和度，但应用浮雕效果？

我有几个想法如何去做，但我不知道哪个可行:

1. 直接对图像应用光照。 它失败了，因为光照应用于未剪切的图像。
2. 通过在图像或光照叠加层上应用混合效果来纠正颜色饱和度降低 由于我对这些效果的无能，它失败了。
3. 剪裁覆盖形状以仅覆盖受光照影响的区域 它需要对贝塞尔曲线进行偏移，这很难而且成本很高。
4. 改变叠加层形状 alpha 以跟随光照效果强度。

任何想法将不胜感激。

Answer 1

解决方案

申请ColorAdjust对 Lighting 的影响效果链中的效果。

无论您做什么，照明效果都会在某种程度上改变图像的外观和颜色(因为照明就是这样做的)，但是通过应用额外的颜色调整，您可以获得可识别的图像非常接近原始着色。

如果您需要调整图像的形状，请对剪裁的图像进行快照并将效果应用到快照(如果需要)，如对以下内容的回答中所述:Border-Radius and Shadow on ImageView .

示例

// increase brightness and contrast.
ColorAdjust brightLight = new ColorAdjust(0, 0, .25, 0.25); 

// chain in your lighting effect.
brightLight.setInput(lighting);

// apply the chained effect to your image.
ImageView litAdjusted = new ImageView(image);
litAdjusted.setEffect(brightLight);

可执行样本

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.effect.*;
import javafx.scene.image.*;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.text.TextAlignment;
import javafx.stage.Stage;

// Java 8 code
public class HereBeDragons extends Application {

    @Override public void start(final Stage stage) {
        Image image     = new Image(imageLoc);
        Image clipImage = new Image(CLIP_IMAGE_LOC);

        ImageView plain = new ImageView(image);

        ImageView lit = new ImageView(image);
        Lighting lighting = createLighting();
        lit.setEffect(lighting);

        ImageView litAdjusted = new ImageView(image);
        ColorAdjust brightLight = new ColorAdjust(0, 0, .25, 0.25);
        brightLight.setInput(lighting);
        litAdjusted.setEffect(brightLight);

        plain.setClip(new ImageView(clipImage));
        SnapshotParameters params = new SnapshotParameters();
        params.setFill(Color.TRANSPARENT);
        WritableImage clippedImage = plain.snapshot(params, null);
        ImageView litAdjustedClip = new ImageView(clippedImage);
        litAdjustedClip.setEffect(brightLight);
        plain.setClip(null);

        HBox layout = new HBox(
                10,
                new CaptionedImage(plain,       "Plain"),
                new CaptionedImage(lit,         "Lit"),
                new CaptionedImage(litAdjusted, "Lit and Adjusted"),
                new CaptionedImage(litAdjustedClip, "Clipped,\nLit and Adjusted")
        );
        layout.setPadding(new Insets(20));
        layout.setStyle("-fx-background-color: lightblue;");

        stage.setTitle("Here be Dragons");
        stage.setScene(new Scene(layout, Color.LIGHTBLUE));
        stage.setResizable(false);
        stage.show();
    }

    private Lighting createLighting() {
        // Create ambient light
        Light.Distant light = new Light.Distant();
        light.setAzimuth(-135.0);

        // Create lighting effect
        Lighting lighting = new Lighting();
        lighting.setLight(light);
        lighting.setSurfaceScale(4.0);

        return lighting;
    }

    private class CaptionedImage extends Label {
        public CaptionedImage(ImageView imageView, String caption) {
            setText(caption);
            setGraphic(imageView);
            setContentDisplay(ContentDisplay.TOP);
            setTextAlignment(TextAlignment.CENTER);

            setStyle(
                    "-fx-text-fill: midnightblue; " +
                    "-fx-font-size: 16px; " +
                    "-fx-font-family: palatino; " +
                    "-fx-font-style: italic;"
            );
        }
    }

    public static void main(String[] args) {
        launch(args);
    }

    private static final String imageLoc =
        "http://icons.iconarchive.com/icons/custom-icon-design/round-world-flags/128/Wales-icon.png";    
    // icon license: Free for non-commercial use. 
    // Buy commercial license here: 
    // http://www.customicondesign.com/free-icons/flag-icon-set/flat-round-world-flag-icon-set

    private static final String CLIP_IMAGE_LOC =
            "http://icons.iconarchive.com/icons/gpritiranjan/simple-christmas/128/star-icon.png";
    // star icon license: freeware, commercial usage allowed.
}