应用比例缩放时不接受路径转换

Question

I am having some problems applying both a translation and scale to aa JavaFx Path node . I have found that whenever a scale is applied via a call to either setScaleX() or scaleY() then any translation applied by a call to relocate() is no long honoured.

For example, using this main class:

import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class MainApp extends Application {

    @Override
    public void start(Stage stage) throws Exception {

        StackPane myPane = new StackPane(new MyRegion());
        Scene myScene = new Scene(myPane);
        stage.setScene(myScene);
        stage.setWidth(500);
        stage.setHeight(500);
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

And the MyRegion class:

import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;
import javafx.scene.layout.Region;
import javafx.scene.paint.Color;
import javafx.scene.shape.ClosePath;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;

public class MyRegion extends Region{

    private Path pointer;
    private ObjectProperty<Color> pointerColour = 
        new SimpleObjectProperty<>(Color.ORANGE);

    public MyRegion() {
        initGraphics();
    }

    private void initGraphics(){
        pointer = new Path();
        pointer.setFill(pointerColour.get());
        pointer.setStrokeWidth(0);
        pointer.getElements().add(new MoveTo(50, 50));
        pointer.getElements().add(new LineTo(50, 200));
        pointer.getElements().add(new LineTo(200, 200));
        pointer.getElements().add(new ClosePath());
        pointer.relocate(70, 70);
    }

    @Override
    protected void layoutChildren() {
        getChildren().removeAll(pointer);
        getChildren().addAll(pointer);
    }

    @Override
    protected double computePrefHeight(double width) {
        return 200;
    }

    @Override
    protected double computePrefWidth(double height) {
        return 200;
    }

}

This results in a triangle located at co-oridinates (70,70) as set by the line pointer.relocate(70, 70) in method initGraphics() :

If I now add X and Y scaling factors to the Path so that `initGraphics() now looks like:

private void initGraphics(){
    pointer = new Path();
    pointer.setFill(pointerColour.get());
    pointer.setStrokeWidth(0);
    pointer.getElements().add(new MoveTo(50, 50));
    pointer.getElements().add(new LineTo(50, 200));
    pointer.getElements().add(new LineTo(200, 200));
    pointer.getElements().add(new ClosePath());
    pointer.relocate(70, 70);
    pointer.setScaleX(2);
    pointer.setScaleY(2);
}

The following results, which is not as I expected:

So the size of the triangle has scaled as expected but it is drawn from the (0,0) . This is almost as if the MoveTo() object has been ignored in the Path .

It does not matter where the scale methods are called during the creation of the Path, the result is the same. I have also tried setting the first PathElement as a MoveTo(0,0) but the result is the same.

Am I misunderstanding how these method calls work or is this a bug in JavaFx Node?

Answer 1

When you apply scaleX / scaleY over a node, it is applied over it's center:

Defines the factor by which coordinates are scaled about the center of the object along the X axis of this {@code Node}.

The pivot point about which the scale occurs is the center of the untransformed {@link #layoutBoundsProperty layoutBounds}.

As for relocate :

Sets the node's layoutX and layoutY translation properties in order to relocate this node to the x,y location in the parent. This method does not alter translateX or translateY , which if also set will be added to layoutX and layoutY, adjusting the final location by corresponding amounts.

(bold id mine)

In your first case, as you say, the path will be relocated to (70, 70), but on the second case, with the scale, it is relocated to (70, 70), the center will be at (145, 145), and its size will be 300x300, meaning that the top left vertex will be at (145, 145) - (150, 150) = (-5, -5).

This is the result of the bounding box:

System.out.println(pointer.getBoundsInParent());

>> BoundingBox [minX:-5.5, minY:-5.5, minZ:0.0, width:302.0, height:302.0, depth:0.0, maxX:296.5, maxY:296.5, maxZ:0.0]

(it adds 1 px for the path's stroke).

So it is doing what it is supposed to.

In case you want your path scaling from (70, 70), take its top left vertex as a pivot , and use a Scale transform:

private void initGraphics(){
    pointer = new Path();
    pointer.setFill(pointerColour.get());
    pointer.setStrokeWidth(0);
    pointer.getElements().add(new MoveTo(50, 50));
    pointer.getElements().add(new LineTo(50, 200));
    pointer.getElements().add(new LineTo(200, 200));
    pointer.getElements().add(new ClosePath());
    pointer.relocate(70, 70);
    pointer.getTransforms().add(new Scale(2, 2, 50, 50));
}