在JavaFX中创建自定义节点并将其添加到布局

Question

我是GUI编程的新手，我需要帮助创建7个自定义节点并将它们放入布局中。我不知道我应该扩展什么父类，或者如何将这个类作为一个节点来实现。

我想最终的GUI看起来像这样： http://d2vlcm61l7u1fs.cloudfront.net/media%2Fecc%2Fecc3c2db-2a7e-4571-bcf0-37858846dadf%2FphphG0pUA.png

这里是我迄今为止

public class HexagonShape extends CustomNode {//what to extend? 
    //color of each segment 
    public String A; 
    public String B; 
    public String C; 
    public String D; 
    public String E; 
    public String F; 

    private final double angle30degree = Math.PI/6; 


    public HexagonShape() { 
     // Create a pane, a polygon, and place polygon to pane 
     Pane pane = new Pane(); 
     Polygon triangle1 = new Polygon(); 
     ObservableList<Double> tri1List = triangle1.getPoints(); 
     Polygon triangle2 = new Polygon(); 
     ObservableList<Double> tri2List = triangle1.getPoints(); 
     Polygon triangle3 = new Polygon(); 
     ObservableList<Double> tri3List = triangle1.getPoints(); 
     Polygon triangle4 = new Polygon(); 
     ObservableList<Double> tri4List = triangle1.getPoints(); 
     Polygon triangle5 = new Polygon(); 
     ObservableList<Double> tri5List = triangle1.getPoints(); 
     Polygon triangle6 = new Polygon(); 
     ObservableList<Double> tri6List = triangle1.getPoints(); 

     Polygon hexagon = new Polygon(); 
     pane.getChildren().addAll(hexagon, triangle1, triangle2, triangle3, triangle4, triangle5, triangle6); 
     hexagon.setFill(Color.WHITE); 
     hexagon.setStroke(Color.BLACK); 
     ObservableList<Double> list = hexagon.getPoints(); 

     triangle1.setFill(Color.GRAY); 
     triangle1.setStroke(Color.BLUEVIOLET); 


     final double WIDTH = 250, HEIGHT = 250; 
     double centerX = WIDTH/2, centerY = HEIGHT/2; 
     double radius = Math.min(WIDTH, HEIGHT) * 0.4; 

     // Add points to the polygon list 
     for (int i = 0; i < 6; i++) { 
      list.add(centerX + radius * Math.cos(2 * i * angle30degree)); 
      list.add(centerY - radius * Math.sin(2 * i * angle30degree)); 
     } 
      createTriangle(tri2List, radius, centerX, centerY, 0); 
      createTriangle(tri1List, radius, centerX, centerY, 2); 
      createTriangle(tri6List, radius, centerX, centerY, 4); 
      createTriangle(tri5List, radius, centerX, centerY, 6); 
      createTriangle(tri4List, radius, centerX, centerY, 8); 
      createTriangle(tri3List, radius, centerX, centerY, 10); 


    } 


    private void createTriangle(ObservableList<Double> vectors, double radius, double centerX, double centerY, int radian) { 
     vectors.add(centerX); 
     vectors.add(centerY); 
     vectors.add(centerX + radius * Math.cos(radian * angle30degree)); 
     vectors.add(centerY - radius * Math.sin(radian * angle30degree)); 
     vectors.add(centerX + radius * Math.cos((radian + 2) * angle30degree)); 
     vectors.add(centerY - radius * Math.sin((radian + 2) * angle30degree)); 

    } 

    public void loadHexagon(ArrayList<String> colors, int id){ 
     this.A = colors.get(0); 
     this.B = colors.get(1); 
     this.C = colors.get(2); 
     this.D = colors.get(3); 
     this.E = colors.get(4); 
     this.F = colors.get(5); 


    } 



} 

这就是我想要实例我的自定义节点（六边形）的主界面

package gui; 

import java.io.File; 
import java.io.IOException; 
import java.util.ArrayList; 
import java.util.Arrays; 
import java.util.Scanner; 

import javax.swing.JFileChooser; 

import hexagon.Hexagon; 
import javafx.application.Application; 
import javafx.geometry.Insets; 
import javafx.scene.Group; 
import javafx.scene.Scene; 
import javafx.scene.layout.GridPane; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Polygon; 
import javafx.scene.transform.Rotate; 
import javafx.stage.Stage; 

public class HexagonGUI extends Application { 

    @Override 
    public void start(Stage primaryStage) { 
     GridPane gp = new GridPane(); 
     gp.setGridLinesVisible(true); 
     gp.setVgap(10); 
     gp.setHgap(10); 
     gp.setPadding(new Insets(10,10,10,10)); 


     HexagonShape h1 = new HexagonShape();//custom node to add 
     GridPane.setConstraints(h1, 10, 10); 


     HexagonShape h2 = new HexagonShape(); 

     HexagonShape h3 = new HexagonShape(); 

     HexagonShape h4 = new HexagonShape(); 

     HexagonShape h5 = new HexagonShape(); 

     HexagonShape h6 = new HexagonShape(); 


     HexagonShape h7 = new HexagonShape(); 



     Scene scene = new Scene(gp, 260, 80); 
     primaryStage.setScene(scene); 






     primaryStage.show(); 
    } 


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

Answer 1

您可以在HexagonShape类扩展Region类，

然后做this.getChildren.add(pane);在HexagonShape类

注：Region延伸Parent当我将节点添加到gridpane我没有得到该节点的渲染延伸Node类