JavaFX Transparent Cursor using WritableImage

Question

Edit-Answer:

You can check Fabian's answer and also this library (https://github.com/goxr3plus/JFXCustomCursor)

Actual Question

I want to create a cursor which is fading out in JavaFX so for that i am using a WritableImage and i am continuously reading pixels from the original Image and writing them to a new WritableImage.Then i set a custom cursor to the Scene using ImageCursor(writableImage),below is the full code(give it a try).

The problem is that a get black pixels where transparent pixels are expected.

Note that all the below classes have to be in package sample.

Code(Main):

package sample;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.FlowPane;
import javafx.stage.Stage;

public class Main extends Application {

    FadingCursor fade = new FadingCursor();

    @Override
    public void start(Stage primaryStage) throws Exception {

        primaryStage.setWidth(300);
        primaryStage.setHeight(300);

        Scene scene = new Scene(new FlowPane());

        primaryStage.setScene(scene);

        fade.startFade(scene,100);

        primaryStage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }

}

Code(FadingCursor)(Edited):

package sample;

import java.util.concurrent.CountDownLatch;

import javafx.application.Platform;
import javafx.scene.ImageCursor;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.PixelReader;
import javafx.scene.image.PixelWriter;
import javafx.scene.image.WritableImage;
import javafx.scene.paint.Color;

public class FadingCursor {

    private int counter;
    private Image cursorImage;

    /**
     * Change the image of the Cursor
     * 
     * @param image
     */
    public void setCursorImage(Image image) {
        this.cursorImage = image;
    }

    /**
     * Start fading the Cursor
     * 
     * @param scene
     */
    public void startFade(Scene scene, int millisecondsDelay) {

        // Create a Thread
        new Thread(() -> {

            // Keep the original image stored here
            Image image = new Image(getClass().getResourceAsStream("fire.png"), 64, 64, true, true);
            PixelReader pixelReader = image.getPixelReader();

            // Let's go
            counter = 10;
            for (; counter >= 0; counter--) {
                CountDownLatch count = new CountDownLatch(1);
                Platform.runLater(() -> {

                    // Create the fading image
                    WritableImage writable = new WritableImage(64, 64);
                    PixelWriter pixelWriter = writable.getPixelWriter();

                    // Fade out the image
                    for (int readY = 0; readY < image.getHeight(); readY++) {
                        for (int readX = 0; readX < image.getWidth(); readX++) {
                            Color color = pixelReader.getColor(readX, readY);

                            // Now write a brighter color to the PixelWriter.

                            // -------------------------Here some way happens
                            // the problem------------------
                            color = new Color(color.getRed(), color.getGreen(), color.getBlue(), (counter / 10.00) * color.getOpacity());
                            pixelWriter.setColor(readX, readY, color);
                        }
                    }

                    System.out.println("With counter:"+counter+" opacity is:" + writable.getPixelReader().getColor(32, 32).getOpacity());


                    scene.setCursor(new ImageCursor(writable));
                    count.countDown();
                });
                try {
                    // Wait JavaFX Thread to change the cursor
                    count.await();
                    // Sleep some time
                    Thread.sleep(millisecondsDelay);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }

            }

        }).start();

    }

}

The image(needs to be downloaded)(Right Click ->Save Image as...):

fabian · Accepted Answer

You set the opacity of every pixel to a value only depending on the loop variable here:

color = new Color(color.getRed(), color.getGreen(), color.getBlue(), counter / 10.00);

For transparent pixels (opacity = 0) you actually increase the opacity making the values stored in the other channels (in this case 0 / black) visible. You need to make sure transparent pixels remain transparent, which usually is done like this:

color = new Color(color.getRed(), color.getGreen(), color.getBlue(), (counter / 10.00) * color.getOpacity());

Alternatively you could use deriveColor:

color = color.deriveColor(0, 1, 1, counter / 10d);

Edit

For some reason ImageCursor doesn't seem to like a completely transparent image. You can check that this works, if at least one pixel is not completely transparent by adding

pixelWriter.setColor(0, 0, new Color(0, 0, 0, 0.01));

After the for loops writing the image.

To fix this you could simply use Cursor.NONE instead of an ImageCursor with a fully transparent image:

for (; counter >= 1; counter--) {
    ...
}
Platform.runLater(() -> scene.setCursor(Cursor.NONE));

Alternative without the need to recreate the image/cursor

You could simulate the cursor yourself by moving a image Across the root of the Scene. This won't make the image show up beyond the bounds of the Scene, but you can apply animations to the ImageView for fading instead of modifying the opacity of each pixel manually...

public class CursorSimulator {

    private final FadeTransition fade;

    public CursorSimulator(Image image, Scene scene, ObservableList rootChildrenWriteable, double hotspotX, double hotspotY) {
        ImageView imageView = new ImageView(image);
        imageView.setManaged(false);
        imageView.setMouseTransparent(true);

        fade = new FadeTransition(Duration.seconds(2), imageView);
        fade.setFromValue(0);
        fade.setToValue(1);

        // keep image on top
        rootChildrenWriteable.addListener((Observable o) -> {
            if (imageView.getParent() != null
                    && rootChildrenWriteable.get(rootChildrenWriteable.size() - 1) != imageView) {
                // move image to top, after changes are done...
                Platform.runLater(() -> imageView.toFront());
            }
        });
        scene.addEventFilter(MouseEvent.MOUSE_ENTERED, evt -> {
            rootChildrenWriteable.add(imageView);
        });
        scene.addEventFilter(MouseEvent.MOUSE_EXITED, evt -> {
            rootChildrenWriteable.remove(imageView);
        });
        scene.addEventFilter(MouseEvent.MOUSE_MOVED, evt -> {
            imageView.setLayoutX(evt.getX() - hotspotX);
            imageView.setLayoutY(evt.getY() - hotspotY);
        });
        scene.setCursor(Cursor.NONE);
    }

    public void fadeOut() {
        fade.setRate(-1);
        if (fade.getStatus() != Animation.Status.RUNNING) {
            fade.playFrom(fade.getTotalDuration());
        }
    }

    public void fadeIn() {
        fade.setRate(1);
        if (fade.getStatus() != Animation.Status.RUNNING) {
            fade.playFromStart();
        }
    }

}

@Override
public void start(Stage primaryStage) {
    Button btn = new Button("Say 'Hello World'");
    btn.setOnAction((ActionEvent event) -> {
        System.out.println("Hello World!");
    });

    StackPane root = new StackPane();
    root.getChildren().add(btn);

    Scene scene = new Scene(root, 500, 500);
    
    Image image = new Image("https://i.sstatic.net/OHj1R.png");
    CursorSimulator simulator = new CursorSimulator(image, scene, root.getChildren(), 32, 50);
    scene.setOnMouseClicked(new EventHandler() {

        private boolean fadeOut = true;
        
        @Override
        public void handle(MouseEvent event) {
            if (fadeOut) {
                simulator.fadeOut();
            } else {
                simulator.fadeIn();
            }
            fadeOut = !fadeOut;
        }
    });

    primaryStage.setScene(scene);
    primaryStage.show();
}

JavaFX Transparent Cursor using WritableImage

Answers (2)

Alternative without the need to recreate the image/cursor

Related Questions