JavaFX Drag View for Transparent png image - javafx

Question

I am trying to drag an Object which is represented as PNG image with transparent background from an AnchorPane to an HBox.
I set the image to the Drag View with this lines:
SliderItemHandler mh = (SliderItemHandler) event.getSource();
Dragboard db = mh.startDragAndDrop(TransferMode.COPY);
db.setDragView(mh.getModule().getImage());
ClipboardContent content = new ClipboardContent();
db.setContent(content);
It is all fine with nontransparent background images, but with the transparent ones the image got a white background with opacity "0.8" i think.
I tried taking a snapshot for the node:
db.setDragView(mh.snapshot(new SnapshotParameters(), null));
but it didn't work, the white background still there.
Is there any other way to make it transparent like the original image?

Answer 1

You have to change your snapshot parameters to transpartent fill:
SnapshotParameters sp = new SnapshotParameters();
sp.setFill(Color.TRANSPARENT);
db.setDragView(mh.snapshot(sp, null));
The result will be transparent without the white borders.

Answer 2

I'm not really sure how you achieve to get a white background, taking the opacity into account. However, I re-created your use case and will show you how I implemented this.
The following image is a Scene divided between an AnchorPane on the left, and a HBox on the right. The small transparent circle being the source ImageView to copy, the larger circle next to it being a dropped Image and far-most right being a circle currently being dragged. (Screenshot didn't include the cursor.)
As you can see, in none of the 3 scenarios there is a white (or almost white) background. It is just the image itself, with the image itself being a bit more transparent while dragging.
To achieve this, we'll take 2 variables into account. The source ImageView and the destination HBox.
#FXML
private HBox destination;
#FXML
private ImageView image;
We'd like the image to be dragged, so we add a DRAG_DETECTED event onto the ImageView.
image.addEventHandler(MouseEvent.DRAG_DETECTED, mouseEvent -> {
Dragboard db = image.startDragAndDrop(TransferMode.COPY);
ClipboardContent content = new ClipboardContent();
content.putImage(image.getImage());
db.setContent(content);
mouseEvent.consume();
});
Then we'd like the destination HBox to accept the dragged ImageView.
destination.addEventHandler(DragEvent.DRAG_OVER, (DragEvent event) -> {
if (event.getDragboard().hasImage()) {
event.acceptTransferModes(TransferMode.COPY_OR_MOVE);
}
event.consume();
});
And of course we'd like to place the ImageView into the HBox when actually dropped. In this case, it just places a copy of it into the HBox, but that's open for implementation of course.
destination.addEventHandler(DragEvent.DRAG_DROPPED, (DragEvent event) -> {
Dragboard db = event.getDragboard();
destination.getChildren().add(new ImageView(db.getImage()));
event.setDropCompleted(true);
event.consume();
});
That's all there is to dragging and dropping an image. No white backgrounds involved for transparent images. However, if you're able to create a MCVE, it might be easier to look into your problem if it still maintains.