Image en niveaux de gris avec projecteur coloré en JavaFX

Question

J'ai besoin d'un moyen d'avoir une image en échelle de gris dans un ImageView et sur la souris déplacée si la position du curseur est dans les limites ImageView pour montrer un projecteur coloré sur la position de la souris. J'ai créé un échantillon pour vous aider à comprendre ce dont j'ai besoin. Cet exemple annule les couleurs d'une image colorée dans l'événement 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 }, 
           ] 
          } 
         } 
        ] 
       } 
      ] 
     }, 
    ] 
    }, 
} 

Pour être plus précis:

1. Je veux afficher une image couleur en niveaux de gris
2. Sur mouseover Je veux un coup de projecteur à colorer, en contraste avec le reste de l'image qui va être rendu en mode niveaux de gris (comme mentionné dans l'exigence n ° 1 ci-dessus). Le projecteur se déplace dans le même sens que le curseur de la souris

Answer 1

Voici comment je le ferais. Utilisez 2 images, une couleur et une échelle de gris. Utilisez un clip sur les niveaux de gris. Voici un exemple de code

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

Malheureusement, je ne peux pas offrir une réponse directe à cette question, mais je ne pense pas que vous puissiez réaliser ce que vous recherchez en utilisant uniquement les modes de fusion, espérons-le Quelqu'un me corrigera si je me trompe. Je suggérerais d'explorer à la fois une version en niveaux de gris et en couleur de l'image, où l'image couleur est "hors écran", puis de faire référence à la partie de l'image couleur correspondant à la même zone que la image en niveaux de gris à l'écran. De cette façon, il semblerait que le projecteur mobile met en évidence une partie de l'image en niveaux de gris en couleur. En d'autres termes, le projecteur est réellement "sur" l'image couleur, même si elle est hors écran.