Displaying pixel-perfect images without blur when zooming

[Felipe Heidrich]

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


> On Aug 26, 2014, at 10:00 AM, Nico Krebs | www.mensch-und-maschine.de <nicokrebs.dev at googlemail.com> wrote:
> 
> 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
>