如何在javaFX中定位Polygon

Question

I try to design a custom button in javafx but I have some problem to locate a polygon :

public class PlayButton extends Group{
public static final int PLAY = 0, PAUSE = 1;

private int state = PAUSE;
private Circle background;
private Polygon triangle;

public PlayButton(){
    background = new Circle(20);
    background.setStroke(MyApp.FIRST_COLOR);
    background.setStrokeWidth(2);
    background.setEffect(MyApp.DROP_SHADOW);
    background.setCursor(Cursor.HAND);
    background.setFill(MyApp.SECOND_COLOR_OPAQUE);
    this.getChildren().add(background);

    triangle = new Polygon();
    triangle.getPoints().addAll(new Double[]{10.0, 10.0, 40.0, 25.0, 10.0, 40.0});
    triangle.setFill(MyApp.FIRST_COLOR);
    this.getChildren().add(triangle);
}

public void setState(int state){
    this.state = state;
}
}

My polygon is outside of my background, but I don't understand why :

The rectangle is a progress bar, no problem with him.
Thank you for your help

Answer 1

You're using absolute coordinates for the triangle, but you should probably use coordinates relative to the circle if you want them to always overlap. To get the top left of the enclosing rectangle of the circle I'd do:

float[] backgroundTopLeft = new float[] {
    background.getCenterX() - background.getRadius(),
    background.getCenterY() - background.getRadius()};

Then draw the triangle relative to that coordinate as the top left of the triangle.

Answer 2

After some test I think position of polygon's points are calculated from the center of my group, the radius of my circle in background is 20 then coordinate start at -20 and end at 20, then good coordinates are :

triangle.getPoints().addAll(new Double[]{-5.0, -10.0, 12.0, 0.0, -5.0, 10.0});

then it's look like that :

Someone can tell me if I'm wrong or right ?
Else I hope this could help someone.