Как установить ColorPicker, расположенный с помощью gridPane поверх холста

Question

У меня есть 3 набора цветов, которые расположены с использованием сетки, я также использую холст. Но проблема заключается в том, что холст подталкивает панель сетки к нижней части экрана. Поэтому, если im использует root.add(HeadColor, 0, 1); (чтобы добавить первый colorpicker к панели сетки в столбце 0 и строке 1) Colorpicker позиционирует себя где-то посередине экрана, потому что панель сетки начинается под сеткой. Итак, мой вопрос: как я могу поместить панель сетки поверх холста или цветную надпись поверх холста?

код, который я использую:

package gui; 

import display.Image; 
import java.awt.Button; 
import java.io.IOException; 
import java.util.logging.*; 
import javafx.application.Application; 
import javafx.event.*; 
import javafx.geometry.*; 
import javafx.scene.Scene; 
import javafx.scene.canvas.*; 
import javafx.scene.control.ColorPicker; 
import javafx.scene.layout.*; 
import javafx.scene.layout.VBox; 
import javafx.scene.paint.*; 
import javafx.scene.text.Font; 
import javafx.stage.Stage; 

public class JavaFXColorPicker extends Application { 
private Image head; 
private Image heart; 

ColorPicker HeadColor = new ColorPicker(); 
ColorPicker BodyColor = new ColorPicker(); 
ColorPicker LegColor = new ColorPicker(); 

@Override 
public void start(Stage primaryStage) throws IOException { 

    GridPane root = new GridPane(); 
    final Canvas canvas = new Canvas(200,300); 

    Scene scene = new Scene(root, 500, 400, Color.BLACK); 
    GraphicsContext gc = canvas.getGraphicsContext2D(); 
    root.setHgap(10); 
    root.setVgap(10); 
    root.setPadding(new Insets(10, 30, 30, 30)); 

    HeadColor.setOnAction(new EventHandler(){ 
     @Override 
     public void handle(Event event) { 
      Color HeadPaint = HeadColor.getValue(); 
      Color[] HeadColorArray = new Color[] 
       { 
        new Color(0 , 0, 0, 1), 
        HeadPaint, 
        HeadPaint, 
        HeadPaint, 
        HeadPaint, 
        new Color(1, 1, 1, 1) // de ogen 
       }; 

      try { 
       head = new display.Image(display.Parts.playerHead); 
      } catch (IOException ex) { 
       Logger.getLogger(JavaFXColorPicker.class.getName()) 
         .log(Level.SEVERE, null, ex); 
      } 

      head.recolour(HeadColorArray); 
      Image i = head; 
      gc.drawImage(i.show(), 200, 100); 
     } 
    }); 

    root.getChildren().add(canvas); 
    root.add(HeadColor, 0, 1); 
    root.add(BodyColor, 0, 2); 
    root.add(LegColor,0,3); 

    primaryStage.setTitle("Customize Character!"); 
    primaryStage.setScene(scene); 
    primaryStage.show(); 
} 

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

Answer 1

Проблема заключается в следующем:

root.getChildren().add(canvas); 

В GridPane documentation состояния:

Если индексы строк/столбцов не явно, то ребенок будет помещен в первую строку/столбец.

Назначьте строку и столбец вашему холсту, точно так же, как вы делаете это со своими ColorPickers.