Databases
StackOverflow2013
Postsdbo
POGrayscale image with colored spotlight in JavaFX
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POGrayscale image with colored spotlight in JavaFX
    text
    copied!<p>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.</p> <p>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. </p> <pre><code>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 &gt; anImage.width - 10 or me.x &lt; 10 or me.y &gt; anImage.height - 10 or me.y &lt; 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 }, ] } } ] } ] }, ] }, } </code></pre> <p>To be more specific:</p> <ol> <li>I want to display a colored image in grayscale mode</li> <li>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</li> </ol>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload