Grayscale image with colored spotlight in JavaFX

Posted by DaUltimateTrooper on Stack Overflow See other posts from Stack Overflow or by DaUltimateTrooper
Published on 2010-03-27T23:56:40Z Indexed on 2010/03/28 0:03 UTC
Read the original article Hit count: 314

Filed under:

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...

© Stack Overflow or respective owner

Related posts about javafx