Displaying pixel-perfect images without blur when zooming

[Nico Krebs | www.mensch-und-maschine.de]

Hi Edu,

short story: i built a very simple image file format: a zip file,
containing a meta.xml file and several png images. the xml defines the
position of each png in the image. this way i have a very basic layered
image file. I built the first version with Swing in JDK 7 but switched
to JavaFX8 last week. The swing-version workes and lets me see and
manipulate single pixels when i zoom.

Question 1:
I don't know why setSmooth(false) doesnt work. Perhaps am i using it the
wrong way? I set it for each ImageView object i got in my list. the
scrollpane can`t be "unsmoothed" because of the lack of the setSmooth()
method.
On the other hand, it could just be a bug of JavaFX.
 
Question 2:
i want to load the image with all it`s layers once and then be able to
zoom so far that i can see the pixels (as you can do in photoshop or
even paint). for example because i want to modify the image pixel by
pixel (think of icons, gif animations and other tiny images)

It`s an image manipulation tool for artists, who want to do very basic
stuff like drawing single pixels, lines and do some effect magic. To be
able to do precise image manipulation manually it is indispensable that
you can work with the untouched image data. as you can in gimp, paint,
photoshop,...

i hope I answered your questions. if not, tell me ;)

Nico
> Edu García <mailto:arcnorj at gmail.com>
> 26. August 2014 23:13
>
> I'm curious. Why setSmooth doesn't work?
>
> Also, do I really need to create an image in memory just to render
> something showing the pixels?
>
> Felipe Heidrich <mailto:felipe.heidrich at oracle.com>
> 26. August 2014 19:20
>
> Hi Nico,
>
> Is this what you looking for:
>
> Image image - the image to scale up
>         int width = (int)image.getWidth();
>         int height = (int)image.getHeight();
>
> int z = (int)getZoom();  // 2, 4, 8, 16 (I only tested for powers of two)
>         IntBuffer src = IntBuffer.allocate(width * height);
>         WritablePixelFormat<IntBuffer> pf =
> PixelFormat.getIntArgbInstance();
>         image.getPixelReader().getPixels(0, 0, width, height, pf, src,
> width);
>         int newWidth = width * z;
>         int newHeight = height * z;
>         int[] dst = new int[newWidth * newHeight];
>         int index = 0;
>         for (int y = 0; y < height; y++) {
>             index = y * newWidth * z;
>             for (int x = 0; x < width; x++) {
>                 int pixel = src.get();
>                 for (int i = 0; i < z; i++) {
>                      for (int j = 0; j < z; j++) {
>                         dst[index + i + (newWidth * j)] = pixel;
>                      }
>                  }
>                  index += z;
>             }
>          }
>          WritableImage bigImage = new WritableImage(newWidth, newHeight);
>          bigImage.getPixelWriter().setPixels(0, 0, newWidth,
> newHeight, pf, dst, 0, newWidth);
>          preview.setImage(bigImage);
>          preview.setFitWidth(newWidth);
>
>
> preview is ImageView where the scale up image is displayed.
>
>
> Felipe
>
>
>
> Nico Krebs | www.mensch-und-maschine.de
> <mailto:nicokrebs.dev at googlemail.com>
> 26. August 2014 19:00
> Hi there,
>
> i want to display multiple images (layers) inside a scene and want to be
> able to zoom without having "blurry" images as you can see in the images
> in the attachment (on the left you can see very big scaled pixels as i
> need it and on the right is the "blurry" JavaFX-Result on which i cannot
> identify single pixels.
>
> i used the zoom pane example from
> https://stackoverflow.com/questions/16680295/javafx-correct-scaling
>
> this is how i initialize my scene:
>
> ArrayList<ImageView> listOfImageViews = getImageViews();
> //imageviews are created from bufferedimages with:
> SwingFXUtils.toFXImage(image, null)
> final Group layerGroup = new Group(listOfImageViews);
> this.stackPane = new StackPane();
> stackPane.getChildren().add(layerGroup);
> scene = new Scene(stackPane);
> this.stackPane.getChildren().add(this.scrollPane);
>
> this.stackPane.getChildren().add(scrollPane.createZoomPane(listOfImageViews
> ));
> this.setScene(scene);
>
> and this is how zooming is done:
>
> ...//calculate scalefactor from scrolling
> ...
> layerGroup .setScaleX(layerGroup .getScaleX() * scaleFactor);
> layerGroup .setScaleY(layerGroup .getScaleY() * scaleFactor);
> ...
>
> when i zoom in so that i theoreticallly could see single pixels, all i
> see is a blurry area. (see examples)
> i know already that that`s JavaFX default behaviour and even if i set
> setSmooth(false), the antialiasing or precision errors or whatever is
> causing this, persists.
>
> is there perhaps another way? i am even willing to write my own
> implementation of Imageview if it would help.
>
> Can anybody please help me out?
>
> if you need more details, please ask :)
>
> thanks in advance and greetz,
> Nico
>

-- 
Nico Krebs

Michelangelostraße 1
01217 Dresden

web:     www.mensch-und-maschine.de
mobil:    0162 / 85 89 667
mail:    nicokrebs.dev at googlemail.com
skype:    k-dottus
icq:    324 143 104
fax:    032 12 - 11 39 77 6
twitter: nico_krebs