我创建形状并且需要在 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 的大小和宽度除以形状的大小和宽度,但它不起作用,也许可以有其他解决方案
最佳答案
我认为这可以让你快速开始
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);
}
}
关于java - 在 JavaFX 中将形状放置在 Canvas 上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42050473/