Grayscale image with colored spotlight in JavaFX
- by DaUltimateTrooper
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 },
]
}
}
]
}
]
},
]
},
}
I am a total newbie what can I say...
