ImageView with transparent image not clickable

Question

I created an ImageView with an image with transparent portions. I also did some scaling and moving, which I though might cause this effect, but that is not the case. When I click on the transparent portion of the image the onMouseClick event is not fired. Other mouse events (mouse enter, mouse move, mouse exit, ...) get fired. Only when I click on the non transparent part the click event is fired.
Image img = new Image(getClass().getResourceAsStream("barrel_icon.png"));
ImageView view = new ImageView(img);
view.setScaleX(0.5);
view.setScaleY(0.5);
view.setOnMouseClicked(new EventHandler<MouseEvent>() {
    @Override
    public void handle(MouseEvent mouseEvent) {
    System.out.println("Clicked on the scaled icon");
StackPane root = new StackPane();
Group group = new Group(view);
group.setManaged(false);
group.setLayoutY(-13);
group.setLayoutX(-13);
root.getChildren().add(group);
The area between the barrel and the shadow belongs clearly to the image, however is transparent.
I am wondering if there is a reason for this behaviour and what is the best way to work around this issue, as my image has large transparent portions and the non transparent parts are hard to click on.
By the way this is all based on JavaFX 2.2.
Regards
Hotzst

Answer 1

For future reference here is the workaround I have come up with:
public class TransparentImageViewClickableArea extends Rectangle{
    private final ImageView imageView;
    public TransparentImageViewClickableArea(ImageView imageView) {
        super(imageView.getLayoutX(), imageView.getLayoutY(), imageView.getImage().getWidth(), imageView.getImage().getHeight());
        setOnMouseReleased(imageView.getOnMouseReleased());
        this.imageView = imageView;
        bindBounds();
    private void bindBounds() {
        DoubleBinding layoutXBinding = new DoubleBinding() {
                super.bind(imageView.layoutXProperty(), imageView.scaleXProperty());
            @Override
            protected double computeValue() {
                final double imgWidth = imageView.getImage().getWidth();
                final double actualWidth = imgWidth * imageView.getScaleX();
                double diff = imgWidth - actualWidth;
                return imageView.getLayoutX() + diff/2;
        layoutXProperty().bind(layoutXBinding);
        DoubleBinding layoutYBinding = new DoubleBinding() {
                super.bind(imageView.layoutYProperty(), imageView.scaleYProperty());
            @Override
            protected double computeValue() {
                final double imgHeight = imageView.getImage().getHeight();
                final double actualHeight = imgHeight * imageView.getScaleY();
                double diff = imgHeight - actualHeight;
                return imageView.getLayoutY() + diff/2;
        layoutYProperty().bind(layoutYBinding);
        widthProperty().bind(imageView.getImage().widthProperty().multiply(imageView.scaleXProperty()));
        heightProperty().bind(imageView.getImage().heightProperty().multiply(imageView.scaleYProperty()));
It is not a perfect solution, as it does not consider the case that the image might be changed as well. This however could be improved easily but was not necessary in my use case.