I need a way to have a gray scale image in an ImageView and on mouse moved if the cursor position is in the ImageView bounds to show a colored spotlight on the mouse position.
I have created a sample to help you understand what I need. This sample negates the colors of a colored image on the onMouseMoved event.
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 },
]
}
}
]
}
]
},
]
},
}
To be more specific:
- I want to display a colored image in grayscale mode
- On mouseover I want a spotlight to be colored, in contrast with the rest of the image which is going to be rendered in grayscale mode(as mentioned in requirement no.1 above). The spotlight will move in the same direction as the mouse cursor