{"id":2269,"date":"2012-12-30T15:25:20","date_gmt":"2012-12-30T14:25:20","guid":{"rendered":"http:\/\/sahits.ch\/blog\/?p=2269"},"modified":"2012-12-31T12:19:46","modified_gmt":"2012-12-31T11:19:46","slug":"resizable-layout-and-resizable-image","status":"publish","type":"post","link":"http:\/\/sahits.ch\/blog\/blog\/2012\/12\/30\/resizable-layout-and-resizable-image\/","title":{"rendered":"Resizable Layout and resizable image"},"content":{"rendered":"

This is the follow up of the previous article<\/a> on resize with JavaFX. In this article I will show you how I created a Layout manager that has top and left insets which stay constant when the window is resized to a size larger than the original, but reduce proportionally if the size becomes smaller. The second point addressed here are resizable images.<\/p>\n

<\/p>\n

\"ResizeLayout_nonResized\"\"ResizeLayout_enlarged\"\"ResizeLayout_small\"<\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

 <\/p>\n

The code for this is split up into two classes, the layout manager:<\/p>\n

package javafxtest;\r\n\r\nimport java.util.List;\r\nimport javafx.geometry.Pos;\r\nimport javafx.geometry.VPos;\r\nimport javafx.scene.Node;\r\nimport javafx.scene.layout.StackPane;\r\n\r\npublic class StretchLeftBottomLayout extends StackPane {\r\n    private final int topMargin;\r\n    private final int leftMargin;\r\n    private Double originalWidth = null;\r\n    private Double originalHeight = null;\r\n\r\n    public StretchLeftBottomLayout(int topMargin, int leftMargin) {\r\n        this.topMargin = topMargin;\r\n        this.leftMargin = leftMargin;\r\n     }\r\n\r\n    @Override\r\n    protected void layoutChildren() {\r\n        List<Node> managed = getManagedChildren();\r\n        double width = getWidth();\r\n        double height = getHeight();\r\n        if (originalWidth == null) {\r\n            originalWidth = width;\r\n        }\r\n        if (originalHeight == null) {\r\n            originalHeight = height;\r\n        }\r\n        double scaleX = Math.min(computeScaleX(width), 1);\r\n        double scaleY = Math.min(computeScaleY(height), 1);\r\n        double top = getInsets().getTop() + topMargin*scaleY;\r\n        double right = getInsets().getRight();\r\n        double left = getInsets().getLeft() + leftMargin*scaleX;\r\n        double bottom = getInsets().getBottom();\r\nSystem.out.println(scaleX+\" -> \"+left+\", \"+scaleY+\" -> \"+top);\r\nSystem.out.println(width+\" \"+height+\" \"+top+\" \"+right+\" \"+left+\" \"+bottom+\" \"+getAlignment().getVpos()+\" \"+VPos.BASELINE);\r\n        double baselineOffset = height\/2;\r\n        for (int i = 0; i < managed.size(); i++) {\r\n            Node child = managed.get(i);\r\n            Pos childAlignment = StretchLeftBottomLayout.getAlignment(child);\r\n            layoutInArea(child, left, top,\r\n                           width - left - right, height - top - bottom,\r\n                           baselineOffset, getMargin(child),\r\n                           childAlignment != null? childAlignment.getHpos() : getAlignment().getHpos(),\r\n                           childAlignment != null? childAlignment.getVpos() : getAlignment().getVpos());\r\n        }\r\n    }\r\n\r\n    private double computeScaleX(double width) {\r\n        return width \/ originalWidth;\r\n    }\r\n     private double computeScaleY(double height) {\r\n        return height \/ originalHeight;\r\n    }\r\n}<\/pre>\n
and the calling code:<\/p>\n
package javafxtest;\r\n\r\nimport java.io.File;\r\nimport java.io.FileInputStream;\r\nimport java.io.FileNotFoundException;\r\nimport javafx.application.Application;\r\nimport javafx.scene.Scene;\r\nimport javafx.scene.canvas.Canvas;\r\nimport javafx.scene.canvas.GraphicsContext;\r\nimport javafx.scene.image.Image;\r\nimport javafx.scene.layout.Region;\r\nimport javafx.scene.layout.StackPane;\r\nimport javafx.stage.Stage;\r\n\r\npublic class OverlayLayoutResize2Test extends Application {\r\n\r\n    @Override\r\n    public void start(Stage stage) throws FileNotFoundException {\r\n        final StackPane root = new StackPane();\r\n        File f = new File(\"\/home\/andi\/Pictures\/Adam.jpg\");\r\n        Image image = new Image(new FileInputStream(f));\r\n        final double width = image.getWidth();\r\n        final double height = image.getHeight();\r\n        Canvas background = new Canvas(width, height);\r\n        GraphicsContext context = background.getGraphicsContext2D();\r\n        context.drawImage(image, 0, 0);\r\n\r\n        root.getChildren().add(background);\r\n\r\n        StretchLeftBottomLayout animationPane = new StretchLeftBottomLayout(54, 23);\r\n        Region red = new Region();\r\n        red.setStyle(\"-fx-background-color: #FF0000;\");\r\n        animationPane.getChildren().add(red);\r\n        root.getChildren().add(animationPane);\r\n\r\n        Scene scene = new Scene(root, width, height);\r\n\r\n        stage.setTitle(\"Resize Layout 2 Overlay Test\");\r\n        stage.setScene(scene);\r\n        stage.show();\r\n    }\r\n\r\n    public static void main(String[] args) {\r\n        launch(args);\r\n    }\r\n}<\/pre>\n
As in a real application a red rectangle is not terribly exciting I need to have an image that can be resized and displayed. Unfortunately both Canvas and ImageView are not resizable. So it is supposed that the ImageView should become resizable some when. Therefore I had to tweek the code a bit on my own:<\/p>\n
package ch.sahits.javafx.test;\r\n\r\nimport java.io.IOException;\r\nimport java.util.logging.Level;\r\nimport java.util.logging.Logger;\r\nimport javafx.application.Application;\r\nimport javafx.beans.value.ChangeListener;\r\nimport javafx.beans.value.ObservableValue;\r\nimport javafx.scene.Scene;\r\nimport javafx.scene.canvas.Canvas;\r\nimport javafx.scene.canvas.GraphicsContext;\r\nimport javafx.scene.image.Image;\r\nimport javafx.scene.layout.Pane;\r\nimport javafx.scene.layout.StackPane;\r\nimport javafx.stage.Stage;\r\n\r\n\/**\r\n *\r\n * @author andi\r\n *\/\r\npublic class ResizeableCanvas extends Application {\r\n\r\n    @Override\r\n    public void start(Stage primaryStage) {\r\n        try {\r\n            StackPane root = new StackPane();\r\n            Scene scene = new Scene(root, 300, 250);\r\n            Image img = new Image(getClass().getResource(\"kajak4_small.png\").openStream());\r\n            Canvas canvas = new Canvas(root.getWidth(), root.getHeight());\r\n            GraphicsContext context = canvas.getGraphicsContext2D();\r\n            context.drawImage(img, 0, 0, root.getWidth(), root.getHeight());\r\n\r\n            \/\/ Binding\r\n            canvas.widthProperty().bind(root.widthProperty());\r\n            canvas.heightProperty().bind(root.heightProperty());\r\n\r\n            final ResizeChangeListener resizeChangeListener = new ResizeChangeListener(root, context, img);\r\n\r\n            canvas.widthProperty().addListener(resizeChangeListener);\r\n            canvas.heightProperty().addListener(resizeChangeListener);\r\n\r\n            root.getChildren().add(canvas);            \r\n\r\n            primaryStage.setTitle(\"Resizable Canvas Test\");\r\n            primaryStage.setScene(scene);\r\n            primaryStage.show();\r\n        } catch (IOException ex) {\r\n            Logger.getLogger(ResizeableCanvas.class.getName()).log(Level.SEVERE, null, ex);\r\n        }\r\n    }\r\n\r\n    public static void main(String[] args) {\r\n        launch(args);\r\n    }\r\n\r\n    private static class ResizeChangeListener implements ChangeListener<Number> {\r\n\r\n        private final Pane parent;\r\n        private final GraphicsContext context;\r\n        private final Image img;\r\n\r\n        public ResizeChangeListener(Pane parent, GraphicsContext context, Image image) {\r\n            this.parent = parent;\r\n            this.context = context;\r\n            this.img = image;\r\n        }\r\n\r\n        @Override\r\n        public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {\r\n            final double width = parent.getWidth();\r\n            final double height = parent.getHeight();\r\n            context.clearRect(0, 0, width, height);\r\n            context.drawImage(img, 0, 0, width, height);\r\n        }\r\n    }\r\n}<\/pre>\n
The main point here is that the width and height properties of the Canvas are bound to the same properties of the StackPane. Additionally there is a ChangeListener registered on these two properties of the Context which will redraw the Image with the correct proportions:<\/p>\n
\"resizedJavaFXCanvas\"<\/p>\n
The next step the would be to refactor this code into a separate component, which did not work, as this forum entry<\/a> can confirm.<\/p>\n
Never the less as I invested some time into figuring this out, I came across some useful resources on the web:<\/p>\n