Изображение в градациях серого с цветным прожектором в 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
        ]
    }
}

Answer 2

К сожалению, я не могу предложить прямой ответ на этот вопрос, но я не думаю, что вы можете достичь того, что вы хотите, просто используя режимы наложения, надеюсь, кто-то исправит меня, если я ошибаюсь.

Я бы предложил исследовать версию изображения в оттенках серого и в цвете, где цветное изображение находится за пределами экрана, а затем элемент прожектора ссылается на часть цветного изображения, соответствующую той же области, что и на изображение в градациях серого. Таким образом, казалось бы, что подвижный прожектор выделяет часть изображения в градациях серого цветом. Другими словами, прожектор на самом деле «поверх» цветного изображения, даже если он находится за пределами экрана.