Display the modified image of an ImageView object

Question

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.

It is quite unclear to me what you are asking. Perhaps it is [How show specific part of an image in javafx](http://stackoverflow.com/questions/23440980/how-show-specific-part-of-an-image-in-javafx). — jewelsea, Aug 29 '15 at 10:02
The given answer there is way too long and specific for the given case scenario to help me any here. And what I'm asking is just what I said above: "modify an Image and then draw it" I want to know how can you modify an image (f.e crop it) using an ImageView object and then get the modified Image obj out of it so that I can use the GraphicsContext2D.draw method on it and put it where I want it on the screen. — MrGuy, Aug 29 '15 at 10:32
Sorry I don't quite understand your question. ImageView doesn't modify Images, it provides a view of them. Maybe all you want to do is to use the GraphicsContext [drawImage function](https://docs.oracle.com/javase/8/javafx/api/javafx/scene/canvas/GraphicsContext.html#drawImage-javafx.scene.image.Image-double-double-double-double-double-double-double-double-) that draws an image, cropping and scaling it to the requested size, at a given location on a Canvas. — jewelsea, Aug 29 '15 at 17:01

AlmasB · Accepted Answer · 2015-08-29T12:06:13.230

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.

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.
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);

I tried the first method you've mentioned like this: root.getChildren().add(iv); root.getChildren().get(1).setTranslateX(500); and while it works, I really doubt that's how it was meant to be used? It's really dubious to say the least :P So if possible, I'd love to have your answer elaborated a little more, otherwise, tyvm for helping me solve this :) — MrGuy, Aug 29 '15 at 11:43

Display the modified image of an ImageView object

1 Answers1