CODEWITHSUNDEEP
javaimagejavafx
MrGuy
MrGuy

Reputation: 664

Display the modified image of an ImageView object

I've been using an ImageView object to try and modify an Image and then draw it. However I could only make the two following outcomes happen:

1) After ImageView has been modified, I tried to grab the image out of it for display with getImage() but that only displayed the original Image I had in the first place.

example code:

sheet = new Image("file:sprite_sheet.png"); 

        ImageView iv = new ImageView();
        iv.setImage(sheet);
        iv.setViewport(new Rectangle2D(0, 0, 32, 32));

        g.drawImage(iv.getImage(), 100, 100);//'g' is GraphicsContext2D

2) I managed to get the modified image to show by adding it to the Group obj like so:

root.getChildren().add(iv);

But then it only displayed the image in the top left corner of the screen and I couldn't move it or do anything with it.

I prefer (if possible) to approach this issue with a method more like the first outcome has presented. And just saying this in advance, I'm aware of that that there's another post similar to this atm, but I couldn't get anything useful out of it.

Upvotes: 0

Views: 249

Answers (1)

AlmasB
AlmasB

Reputation: 3407

ImageView, as the name implies, is just a view of the data (image in this case). All modifications to the view only affect the view and not the data. There are two general methods for what you want to achieve.

  1. Use scene graph and ImageView object. Perform all visual operations on the view. This is the preferred way as the data stays the same, meaning you can easily create a new ImageView with the original image and modify it in a different way should you wish to. If the parent is Pane, then you can easily move the object by calling setTranslateX/Y.

  2. If you absolutely need to use Canvas, then you will need to modify the data itself or create a copy of the data and modify it instead. You can do this by using a combination of the following: PixelWriter and PixelReader

Example for 1.:

ImageView view = new ImageView(image);
// create root with dimension 800x600
Pane root = new Pane();
root.setPrefSize(800, 600);

// attach view to root so it can be displayed
root.getChildren().add(view);

// translate view to 100, 100
// on the screen this means the image will move 100 in X and 100 in Y
view.setTranslateX(100);
view.setTranslateY(100);

Upvotes: 3

Related Questions