javafx - JavaFX 中带有彩色聚光灯的灰度图像

Question

如果光标位置位于 ImageView 边界内，我需要一种在 ImageView 和鼠标上移动灰度图像的方法，以在鼠标位置上显示彩色聚光灯。

我创建了一个示例来帮助您了解我的需要。此示例在 onMouseMoved 事件上取消彩色图像的颜色。

package javafxapplication3;

import javafx.scene.effect.BlendMode;
import javafx.scene.Group;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.paint.Color;
import javafx.scene.paint.RadialGradient;
import javafx.scene.paint.Stop;
import javafx.scene.Scene;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

var spotlightX = 0.0;
var spotlightY = 0.0;
var visible = false;
var anImage = Image {
        url: "{__DIR__}picture1.jpg"
    }
Stage {
    title: "Spotlighting"
    scene: Scene {
        fill: Color.WHITE
        content: [
            Group {
            blendMode: BlendMode.EXCLUSION
            content: [
                ImageView {
                    image: anImage
                    onMouseMoved: function (me: MouseEvent) {
                        if (me.x > anImage.width - 10 or me.x < 10 or me.y > anImage.height - 10 or me.y < 10) {
                            visible = false;
                        } else {
                            visible = true;
                        }
                        spotlightX = me.x;
                        spotlightY = me.y;
                    }
                },
                Group {
                    id: "spotlight"
                    content: [
                        Circle {
                            visible: bind visible
                            translateX: bind spotlightX
                            translateY: bind spotlightY
                            radius: 60
                            fill: RadialGradient {
                                centerX: 0.5
                                centerY: 0.5
                                stops: [
                                    Stop { offset: 0.1, color: Color.WHITE },
                                    Stop { offset: 0.5, color: Color.BLACK },
                                ]
                            }
                        }
                    ]
                }
            ]
        },
    ]
    },
}

更具体地说:

1. 我想以灰度模式显示彩色图像
2. 鼠标悬停时，我希望聚光灯着色，与将以灰度模式渲染的图像的其余部分形成对比(如上面的要求 1 中所述)。聚光灯将沿着与鼠标光标相同的方向移动

Answer 1

这是我的做法。使用 2 个图像，一种颜色和一种灰度。在灰度上使用剪辑。下面是示例代码

var color:ImageView = ImageView {
    image: Image {
        url: "{__DIR__}color.jpg"
    }   
}

var x:Number = 100;
var y:Number = 100;
var grayscale:ImageView = ImageView {
    image: Image {
        url: "{__DIR__}grayscale.jpg"
    }
    clip: Circle {
        centerX: bind x
        centerY: bind y
        radius: 40
    }   
    onMouseDragged: function (e: MouseEvent): Void {
        x = e.sceneX;
        y = e.sceneY;
    }
}


Stage {
    title: "Application title"
    scene: Scene {
        width: 500
        height: 500
        content: [
            color, grayscale
        ]
    }
}