java - 在 JavaFX 中将形状放置在 Canvas 上

Question

我创建形状并且需要在 Canvas 上定位

Class Square绘制一个正方形并插入 canvas位置

public class Square{
    //calculate the position of the rand column to 
    //draw and insert in the position of the canvas
    public void drawSquare(int posX, int posY, GraphicsContext gc) {
        //Square Shadow 
        //gc.rect(posX, posY, w, h);
        gc.rect(posX + 1, posY + 53, 50, 50);
        gc.fill();
        gc.beginPath();
        //Square
        gc.beginPath();
        gc.setFill(Color.WHITE);
        gc.setStroke(Color.BLACK);
        gc.setLineWidth(2);
        //gc.rect(posX, posY, w, h);
        gc.rect(posX + 1, posY + 53, 48, 48);
        gc.fill();
        gc.stroke();

    }
}

新Canvas instance与 height = 450和width = 600

Canvas canvas = new Canvas();
canvas.setHeight(450);
canvas.setWidth(600);

和GraphicsContext至draw square

GraphicsContext gc = canvas.getGraphicsContext2D();

通过这个循环，绘制 4 rows和 6 columns与 square在canvas ,我的疑问是如何 calculate the position line的和column至draw square并插入 position当我打电话 pieces.drawSquare(i, j, gc); 时 Canvas 的，以及方法drawSquare创建形状，但疑问是如何 position如果有多个形状，则使用它们

 for (int i = 0; i < 4; i++) { //4 rows
      for (int j = 0; j < 6; i++) { //6 columns
        Piece pieces = new Piece();
        pieces.drawSquare(i, j, gc);
      }

此图片是示例，

目标是填充 4 行 6 列

我已经考虑过将 Canvas 的大小和宽度除以形状的大小和宽度，但它不起作用，也许可以有其他解决方案

Answer 1

我认为这可以让你快速开始

public class Main extends Application {

private SimpleIntegerProperty rowProperty = new SimpleIntegerProperty(4); //default
private SimpleIntegerProperty columnProperty = new SimpleIntegerProperty(6);//default


@Override
public void start(Stage primaryStage) {
    try {
        BorderPane root = new BorderPane();
        root.setPadding(new Insets(5));
        HBox top;
        TextField rowField = new TextField();
        rowField.setMaxWidth(60);
        rowField.textProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> observable,
                    String oldValue, String newValue) {
                try{ rowProperty.setValue(Integer.valueOf(newValue));}catch(NumberFormatException e){}
            }
        });
        TextField colField = new TextField();
        colField.setMaxWidth(60);
        colField.textProperty().addListener(new ChangeListener<String>() {
            @Override
            public void changed(ObservableValue<? extends String> observable,
                    String oldValue, String newValue) {
                try{ columnProperty.setValue(Integer.valueOf(newValue));}catch(NumberFormatException e){}
            }
        });
        top = new HBox(10,new Label("ROW FIELD"),rowField, new Label("COLUMN FIELD"),colField);
        top.setAlignment(Pos.CENTER);
        root.setStyle("-fx-background-color: white;");
        root.setTop(top);
        ////////////////////////////////////////////////////////////////////////////////////
        Canvas canvas = new Canvas(500,400);
        canvas.getGraphicsContext2D().setFill(Color.BLACK);
        canvas.getGraphicsContext2D().setStroke(Color.GOLD);

        ChangeListener<Number> chan = new ChangeListener<Number>() {
            int space = 2;
            @Override
            public void changed(ObservableValue<? extends Number> observable,
                    Number oldValue, Number newValue) {
                ///i will draw here
                canvas.getGraphicsContext2D().clearRect(0, 0, canvas.getWidth(), canvas.getHeight());
                int rectW = (int) canvas.getWidth();
                rectW = rectW/columnProperty.intValue();
                int rectH = (int) canvas.getHeight();
                rectH = rectH/rowProperty.intValue();

                System.out.println(rectW);
                System.out.println(rectH);

                for(int k = 0; k < canvas.getHeight()/rectH; k++){
                    for(int i =0; i< canvas.getWidth()/rectW; i++){
                        canvas.getGraphicsContext2D().fillRect((i*rectW) + (i*space),
                                (k*rectH) + (k*space),
                                rectW, rectH);
                    }
                }

            }
        };
        rowProperty.addListener(chan);
        columnProperty.addListener(chan);
        //////////////////////////////////////////////////////////////////////////////////////////

        root.setCenter(canvas);
        Label l = new Label("ENTER NUMBERS TO FIELDS TO SEE IT");
        l.setStyle("-fx-background-color: blueviolet; -fx-text-fill: white;");
        l.setPrefWidth(Double.MAX_VALUE);
        l.setAlignment(Pos.CENTER);
        root.setBottom(l);
        Scene scene = new Scene(root,500,500);
        scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
        primaryStage.setScene(scene);
        primaryStage.show();

    } catch(Exception e) { e.printStackTrace(); }
}



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

}