Prevent scaling of leaf nodes

Question

I am trying to implement a simple map solution in JavaFX 2.0. I have map object in a given resolution and some "car" objects (for example Rectangle) that I would like to overlay the map.
My intention is to create a Group node containing the map objects and the "car" objects. This way I would be able to pan / zoom by only changing the Group transformation. For the map objects this should work fine. For the "car" object, I would like to apply the same transformation to simplify the positioning of the objects. But, the transformation seems to also be used to draw the shape (i.e. effecting the size of the "car").
I can think of two options:
1. Apply the inverse transform when drawing the shape
2. Draw a bit map
I really just want to be able to draw a simple shape (fixed size in pixels is OK), but at the same time utilise the group transformation for pan / zoom operations. What is the best practice here? If the Rectangle is 20x20 pixels, I would like to offset the Rectangle by 10 pixels to get it centred correctly.
PS
I would like to avoid using an image, since I might need to change it dynamically (minor changes like colour, line-width, etc.).
Edited by: 885374 on Sep 15, 2011 2:35 AM

Answer 1

Hi Zonski
Thanks for your suggestions. The scaling hint was realy helpfull. No luck with the StackPane though, since it seemed to scale the map objects in unwanted ways (got hints about that from the API documentation too). For your convenience, I have included a small example illustrating what I came up with. The example compiles on 'javafx_apps-2_0-beta-b42-23_aug_2011' and you may play with the Zoom factor and Pan offsets to observe the effect.
Please feel free to comment or suggest changes!
package com.demo.javafx;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Polygon;
import javafx.scene.shape.SVGPath;
import javafx.scene.transform.Scale;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;
import java.util.Collection;
import java.util.LinkedList;
* Simple map / track solution demonstrating the use of separate map and track groups to ease pan / zoom operations
* in the map while maintaining the size of the track objects. Below is a illustration of the scene graph:
* root (Group)
*    --> mapLayers (Group)
*           --> mapLayer1 (Group)
*                  --> Blue Polygon
*           --> mapLayer2 (Group)
*                  --> Green Polygon
*    --> trackLayer (Group)
*           --> trackShape (SVGPath)
* Note!
* Coordinate (0, 0) is in the center of the window when PAN_OFFSET_X and PAN_OFFSET_Y is zero.
public class StackPaneDemo extends Application {
    private static final int SCREEN_WIDTH = 600;
    private static final int SCREEN_HEIGHT = 600;
    private static final double ZOOM_FACTOR = 1.0;
    private static final double PAN_OFFSET_X = 0.0;
    private static final double PAN_OFFSET_Y = 0.0;
    @Override
    public void start(final Stage stage) throws Exception {
        Group root = new Group();
        Scene scene = new Scene(root, SCREEN_WIDTH, SCREEN_HEIGHT, Color.BLACK);
        stage.setScene(scene);
        // First map layer
        Group mapLayer1 = new Group();
        mapLayer1.getChildren().addAll(new PolygonShape(Color.BLUE, 0.0, 0.0, -100.0, 0.0, -100.0, -100.0, 0.0, -100.0));
        // Second map layer
        Group mapLayer2 = new Group();
        mapLayer2.getChildren().addAll(new PolygonShape(Color.GREEN, 0.0, 0.0, 100.0, 0.0, 100.0, 100.0, 0.0, 100.0));
        // Create the map group with two map layers
        // 1. The map group is there to be able to pan / zoom all map layers at once (i.e. not each individual layer)
        // 2. Multiple map layers are added to be able to hide map details later (i.e. hide individual layers)
        Group mapLayers = new Group();
        mapLayers.getChildren().addAll(mapLayer1, mapLayer2);
        // Translate and scale the map
        mapLayers.getTransforms().addAll(new Translate(-PAN_OFFSET_X + SCREEN_WIDTH / 2,
                                                       PAN_OFFSET_Y + SCREEN_HEIGHT / 2),
                                         new Scale(ZOOM_FACTOR, ZOOM_FACTOR));
        // Create the a track layer
        Group trackLayer = new Group();
        trackLayer.getChildren().addAll(new TrackShape(0, 0), new TrackShape(100, 100), new TrackShape(200, 200));
        // Translate the track layer
        trackLayer.getTransforms().addAll(new Translate(-PAN_OFFSET_X + SCREEN_WIDTH / 2,
                                                        PAN_OFFSET_Y + SCREEN_HEIGHT / 2));
        // Add the map / track layers to the root node
        root.getChildren().addAll(mapLayers, trackLayer);
        // Show the stage
        stage.show();
     * Simple track representation using SVG Path (need to flip the y-axis)
    private class TrackShape extends SVGPath {
        public TrackShape(final double x, final double y) {
            setTranslateX(x * ZOOM_FACTOR);
            setTranslateY(-y * ZOOM_FACTOR);  // Note: Positive Y should point upwards
            setStroke(Color.WHITE);
            setContent("M0,-10 V10 M-10,0 H10");
     * Simple map object using Polygon (need to flip the y-axis)
    private class PolygonShape extends Polygon {
        public PolygonShape(final Color color, final Double ... points) {
            final Collection<Double> pointsWithFlippedYAxis = new LinkedList<Double>();
            boolean isYCoordinate = false;
            for (Double point : points) {
                pointsWithFlippedYAxis.add(isYCoordinate ? -point : point);  // Note: Positive Y should point upwards
                isYCoordinate = !isYCoordinate;
            getPoints().addAll(pointsWithFlippedYAxis);
            setStroke(color);
    public static void main(String[] args) throws InterruptedException {
        launch(args);
}